Shopify

Shopify users of the Smartzer Platform can take advantage of the Smartzer SDK to listen for events that occur within the Smartzer player. This allows you to trigger actions on your Shopify store based on user interactions with the Smartzer player, most commonly an addToCart action.

The SDK should already be included in your shopify store if you have gone through the embedding instructions after creating your first project. This can be enabled and disabled as a Shopify App Embed in your shopify store settings.

Add to Cart Listener

The Smartzer Shopify SDK already includes a listener for an "add to cart" action, which intercepts the selected productId from the Smartzer player and attempts to add it to the Shopify Cart via the Shopify Cart API. Assuming your store uses the expected format for adding items to the cart, this API request should work out of the box. The SDK then attempts to update the cart UI elements to reflect the change.

Cart API

The SDK uses the product ID from the addToCart event and sends a POST request to the Shopify Cart API. The request is sent to the /cart/add.js endpoint, this is the default endpoint for adding items to the cart in Shopify, and so is very unlikely to need to be over-ridden. In very rare circumstances where over-riding this functionality is required, you can do so by creating your own listener for the smrtzr:broadcast:callToAction_shopify event, using the following code as an example:

  <script>
    if (!window.smrtzrListenersOverride) {
      window.smrtzrListenersOverride = {};
    }
    window.smrtzrListenersOverride.broadcastCallToAction = true;
    document.addEventListener('smrtzr:broadcast:callToAction_shopify', (e) => {
      // Event contains the productId that was added to the cart as the cta property
      const { cta } = e.detail;
      addToOtherCartPlugin(cta);
    });
  </script>

Cart UI

Depending on your store theme, after a successful add to cart API request, the Cart UI elements may not reflect the change, for example until the user refreshes the page. We try to make our code work for as many of the default shopify themes as possible, and expect it to work for others that are built to standard, but due to number of possible themes and ways each theme handles cart interactions, it is impossible to make this work out of the box every time. We can provide guidance on how to update the cart UI after an add to cart action if you are experiencing issues.

If you would like to update the UI after an add to cart action, you can create your own smrtzr:broadcast:callToActionSuccess_shopify listener using the following code as an example:

  <script>
    if (!window.smrtzrListenersOverride) {
      window.smrtzrListenersOverride = {};
    }
    window.smrtzrListenersOverride.broadcastCallToActionNotifier = true;
    document.addEventListener('smrtzr:broadcast:callToActionSuccess_shopify', (e) => {
      // Event contains the productId that was added to the cart as the cta property
      // it also contains the Cart API response as the response property, this can contain
      // the full cart object, as well as the cart UI elements that need to be updated
      const { cta, response } = e.detail;

      updateCartUiByProductId(cta, response);
    });
  </script>