These events can be added as listeners or can be dispatched as needed.

TryNow

TryNow must be initialized in order to work within any merchant store.

window.addEventListener('trynow:initialized', (event) => {
   console.log("TryNow initialized");
})

Carts

The cart updated event is emitted when a cart is updated.

window.addEventListener('tn-cart-updated', (event) => {
   console.log("TryNow cart updated");
})

The cart updated event can be dispatched.

window.dispatchEvent(new CustomEvent('tn-cart-updated'));

The add to cart success event is emitted when an item is added to the cart successfully.

window.dispatchEvent(new CustomEvent('tn-add-to-cart-success'));

The add to cart success event is emitted when an item is not added to the cart successfully.

window.dispatchEvent(new CustomEvent('tn-add-to-cart-failed'));

Buttons

The CTA click event should be triggered when a TryNow CTA is clicked.

document.addEventListener('tn-cta-click', (event) => {
  console.log("TryNow button clicked");
})

The CTA click event can be dispatched.

      window.dispatchEvent(
        new CustomEvent('tn-cta-click', {
          detail: { source: <<external_event_source>> },
        })
      )

🚧
Heads up!
When the CTA click event is dispatched by TryNow, the event detail is recorded as an internal event. We suggest defining the source as an external event.

Variants

The variant changed event is emitted when a variant changes on the Product Detail Page.

window.addEventListener('tn-variant-changed', function(event) {
    console.log("Variant has changed");
    // Additional code goes here
});

The variant changed event can be dispatched.

window.dispatchEvent(new CustomEvent('tn-variant-changed'));

Entry point

The open modal event is emitted when a TryNow modal is opened.

window.addEventListener('tn-pdp-modal-open', function(event) {
    console.log("Modal has been opened");
    // Additional code goes here
});

The open modal event can be dispatched.

window.dispatchEvent(
  new CustomEvent('tn-pdp-modal-open', {
    detail: { source: <<external_event_source>> },
  });
);