Skip to main content

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
I