Subscriptions
Before you dive in
Check if window.tolstoyWidget
is already initialized or wait for the tolstoyWidgetReady
event before doing anything. This will make sure Tolstoy’s widget is set for action:
if (window.tolstoyWidget) {
// Your next steps go here
} else {
window.addEventListener("tolstoyWidgetReady", () => {
// Your next steps go here
});
}
Product card click
The “product card” is a component shown on a Swipeable Tolstoy’s mobile layout

It’s possible to subscribe to the components’ onClick
event like so:
const subscribeToTolstoyProductCardClick = () => {
const myCallback = (payload) => {
// Your logic here
};
const options = {};
window.tolstoyWidget.subscribe(
"tolstoy_product_card_click",
myCallback,
options
);
};
if (window.tolstoyWidget) {
subscribeToTolstoyProductCardClick();
} else {
window.addEventListener("tolstoyWidgetReady", () => {
subscribeToTolstoyProductCardClick();
// Additional logic...
});
}
📌 When done correctly, Subscribe to event tolstoy_product_card_click
will appear in your logs.
Callback
Once the event is fired, myCallback
will be triggered with the following payload:
{
eventName: "tolstoy_product_card_click",
productId, // Product ID of the specific product that has been clicked
taggedProductIds, // A list of Product IDs that are tagged on the video, including productId
variantId, // Will be passed if a variant was specifically tagged
}
Options
By default, subscribing to the tolstoy_product_card_click
event prevents the product modal from opening:

If you’d still like the product modal to open, you can pass the following option to window.tolstoyWidget.subscribe
:
const options = {
disableProductModal: false, // true by default
};
Add to cart
The “Add to cart” button is shown in the product modal:

It’s possible to subscribe to button’s onClick
event like so:
const subscribeToTolstoyAddToCartClick = () => {
const myCallback = (payload) => {
// Your logic here
};
const options = {};
window.tolstoyWidget.subscribe("tolstoy_add_to_cart", myCallback, options);
};
if (window.tolstoyWidget) {
subscribeToTolstoyAddToCartClick();
} else {
window.addEventListener("tolstoyWidgetReady", () => {
subscribeToTolstoyAddToCartClick();
// Additional logic...
});
}
📌 When done correctly, Subscribe to event tolstoy_add_to_cart
will appear in your logs.
Callback
Once the event is fired, myCallback
will be triggered with the following payload:
{
eventName: "tolstoy_add_to_cart",
productId,
variantId,
}
Report Add to cart Success or Failure
- Success Scenario (product added successfully to the cart)
const myCallback = (payload) => {
const { variantId } = payload;
// Your add to cart logic here
window.tolstoyWidget.postMessage({
...payload, // Make sure to include this line
eventName: "tolstoy_add_to_cart_success",
});
};
- Failure/Error Scenario
const myCallback = (payload) => {
const { variantId } = payload;
// Your add to cart logic here
window.tolstoyWidget.postMessage({
...payload, // Make sure to include this line
eventName: "tolstoy_add_to_cart_error",
description: "itemSoldOut", // Optional description
});
};
🛈 Note 1: Tolstoy expects some data from payload
to be sent back within the message, so make sure to spread payload
in your message.
🛈 Note 2: The description
field is optional. Use it to specify an error like itemSoldOut
. If you skip it, you’ll get a general “Error adding to cart” message.
Unsubscribing from an event
If you’d like to stop listening to an event, you can do it like so:
window.tolstoyWidget.unsubscribe(eventName, myCallback);
🛈 Note: myCallback
should be the original callback passed to window.tolstoyWidget.subscribe