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.
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
In the events-example, run vtex link and trigger an event to the Broadcaster app by making a POST request to app.io.vtex.com/vtex.broadcaster-adapter/v0/{{account}}/{{workspace}}/notify.
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
In the events-example, run vtex link and trigger an event to the Broadcaster app by making a POST request to app.io.vtex.com/vtex.broadcaster-adapter/v0/{{account}}/{{workspace}}/notify.
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