Learn how to detect and handle catalog changes in your VTEX IO app.
This guide will teach you how to set up a system for detecting and responding to changes in the VTEX Catalog using VTEX IO.
We will use the Broadcaster app to trigger events and develop a new app to handle these events.
Before you begin
Ensure you are in a development workspace and install the Broadcaster app using the following command:
_10vtex install vtex.broadcaster
The Broadcaster app broadcasts catalog changes to other parts of the VTEX system. In this guide, we will use it to listen for catalog modifications and execute tasks accordingly.
Implementing the app
The steps below show how to implement a service app that receives and handles events triggered by the Broadcaster app when changes occur in the catalog.
Cloning the boilerplate repository
Clone the events-example boilerplate by running the command presented on the right. This will create a local copy of the project, equipping you with the necessary files to start implementing the catalog change handling system.
_10git clone https://github.com/vtex-apps/events-example
Setting the event handler
Navigate to the node/service.json file and configure the event handler's name to skuChange and the keys property to ["broadcaster.notification"].
The events field defines the events the service will listen to and specifies how it will handle them. In this case, the skuChange function will run whenever the event, identified by the key value, is triggered - specifically when the Broadcaster app triggers the notification event.
skuChange: Custom name given to the event handler function. You are free to choose a meaningful name for your events; in this case, it represents a change related to a Stock Keeping Unit (SKU).keys: Property that specifies the event identifier the service will listen for. In this case,["broadcaster.notification"].
Developing the event handler function
After saving the node/service.json, edit the node/index.ts file to create the skuChange handler function.
Note that the skuChange function will log the Received SKU changed event message whenever the event-example app listens to an event from the broadcaster app.
For more complex functions, consider developing your event handler function in a separate file.
Linking the app
Open a terminal, go to the events-example folder, and run the vtex link command. This will make the app run in the developer workspace and be ready to receive events.
Configuring the Broadcaster with the workspace
By default, the Broadcaster app only triggers events in the master workspace. To make events work in a developer workspace, you must add it in the Broadcaster settings. See the instructions in the Broadcaster app documentation.
Triggering the event
Change the catalog to trigger an event in the Broadcaster app. You can change the inventory amount, product price, or description. For details, see the Catalog, Inventory, and Prices documentation.
The event generated will contain details about the SKU changes such as inventory amount, price, date of the change, and others. See the complete list of fields in the event in the SKU data section in the Broadcaster app article.
Checking the handler function behavior
After linking the events-example app and firing the event with the Broadcast app, check the console for a log message similar to the following: Received SKU changed event service-node@6.38.3.
Now that your system is configured to detect catalog changes, it is time to tailor your code to respond effectively to these events according to your specific requirements. Customize your code to implement actions and functionalities that align with your desired outcomes in response to catalog modifications.
Cloning the boilerplate repository
Clone the events-example boilerplate by running the command presented on the right. This will create a local copy of the project, equipping you with the necessary files to start implementing the catalog change handling system.
Setting the event handler
Navigate to the node/service.json file and configure the event handler's name to skuChange and the keys property to ["broadcaster.notification"].
The events field defines the events the service will listen to and specifies how it will handle them. In this case, the skuChange function will run whenever the event, identified by the key value, is triggered - specifically when the Broadcaster app triggers the notification event.
skuChange: Custom name given to the event handler function. You are free to choose a meaningful name for your events; in this case, it represents a change related to a Stock Keeping Unit (SKU).keys: Property that specifies the event identifier the service will listen for. In this case,["broadcaster.notification"].
Developing the event handler function
After saving the node/service.json, edit the node/index.ts file to create the skuChange handler function.
Note that the skuChange function will log the Received SKU changed event message whenever the event-example app listens to an event from the broadcaster app.
For more complex functions, consider developing your event handler function in a separate file.
Linking the app
Open a terminal, go to the events-example folder, and run the vtex link command. This will make the app run in the developer workspace and be ready to receive events.
Configuring the Broadcaster with the workspace
By default, the Broadcaster app only triggers events in the master workspace. To make events work in a developer workspace, you must add it in the Broadcaster settings. See the instructions in the Broadcaster app documentation.
Triggering the event
Change the catalog to trigger an event in the Broadcaster app. You can change the inventory amount, product price, or description. For details, see the Catalog, Inventory, and Prices documentation.
The event generated will contain details about the SKU changes such as inventory amount, price, date of the change, and others. See the complete list of fields in the event in the SKU data section in the Broadcaster app article.
Checking the handler function behavior
After linking the events-example app and firing the event with the Broadcast app, check the console for a log message similar to the following: Received SKU changed event service-node@6.38.3.
Now that your system is configured to detect catalog changes, it is time to tailor your code to respond effectively to these events according to your specific requirements. Customize your code to implement actions and functionalities that align with your desired outcomes in response to catalog modifications.
_10git clone https://github.com/vtex-apps/events-example