Personalised Recommendation widgets trigger events on the document element when user takes certain action inside the widget.

"Rk:Added_To_Cart" is one such event which is triggered every time a user adds an item to their cart from the widget. Some of the common use cases where this event can be helpful are:

  1. Automatically open the cart slider in your theme on add to cart
  2. Update/Refresh the cart state in your theme when user adds items to cart.

All you need to do is attach a listener for the event "Rk:Added_To_Cart" on document element.

// Native Javascript
document.addEventListener('Rk:Added_To_Cart', function(event) {
// console.log(event.detail); // Inspect the event payload
// refresh theme's cart state
// open theme's cart slider
// other custom logic
})


// Using jQuery
$(document).on('Rk:Added_To_Cart', function(event) {
// console.log(event.detail); // Inspect the event payload
// refresh theme's cart state
// open theme's cart slider
// other custom logic
})

The event.detail contains various information that can you can use in your callback to run custom logic. Here is structure for the object

{
type: 'Rk:Added_To_Cart',
items: [
{
product_id: {ID of product that was added},
variant_id: {ID of variant that was added},
quantity: {Quantity of the item that was added},
},
{
...another item object
}
]
}

Incase you face any issues with the integration or would like additional events to be integrated, please reach out to us at [email protected].

Did this answer your question?