​
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

product_card_preview

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:

product_modal_preview

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:

product_modal_preview

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

EventsStories