Skip to main content
All CollectionsSize ChartSize Chart Customizations
Adding Custom Event Listeners to Product Pages
Adding Custom Event Listeners to Product Pages
Updated over 3 months ago

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.

Did this answer your question?