Listening to events in your application is like setting up ears to hear when something happens. This functionality helps you track actions or trigger events when needed. The Kiwi Size Chart & Recommender app allows you to listen to specific events emitted by the app, and it’s straightforward to implement.
Setting Up Event Listeners
To start, deploy the following script into your product.liquid file:
ks.on("EVENT_NAME", function(data) {
console.log("Event is triggered", data);
});
Available Events
Here are the events you can listen to, along with their descriptions and callback data:
| Event Name | Description | Callback data |
| sizing_loaded | Triggered when the size chart is finished loading after calling ks.loadSizing | {sizeChartID: 123} |
| modal_open | Triggered when the modal is opened | {modalID: "modal-id-123"} |
| modal_close | Triggered when the modal is closed | none |
| modal_tab_change | Triggered when the modal tab is changed |
{tabID: "size-chart-layout"} or {tabID: "recommender"} |
| on_size_recommendation | Triggered after a user uses the recommender |
{status: "has_size", size: "M"} or {status: "no_size"} |
| on_add_to_cart | Triggered when the add-to-cart button from the recommender is triggered. This is important if you want the app to be able to dynamically add the recommended product to cart | {size: "M"} |
Example Usage
Here’s an example of how to listen for the on_add_to_cart event:
ks.on("on_add_to_cart", function(data) {
console.log("Add to cart event was triggered", data);
});
Q: Can I add multiple events in a single script?
A: No, the script can only accept one event at a time. If you wish to listen to multiple events, you’ll need to deploy a separate script for each event. While it is possible to define events as variables and call them simultaneously, that topic is beyond the scope of this article.