Skip to main content
Version: v1

Cart Setup

<html>
  <head> ... </head>
  <body>
    ...

    <!-- BEAM START -->
    <script type="text/javascript" src="./beam-config.js"></script>
    <script type="module" async crossorigin src="./beam-cart-setup.js"></script>
     <!-- BEAM END -->
  </body>
</html>

Base code​

Replace the following in the example

  • cartItemObserverTarget - this will be the element that will be watched. Make sure that this element is as close to where the Beam widget should display as possible; since any changes to that element will trigger the observer code to run, we want to make sure that the observer callback is not called unnecessarily.
beam-cart-setup.js
  import { updateCart } from "https://sdk.beamimpact.com/web-sdk/{{ sdk_version }}/dist/integrations/shopify.js";
  import { events, waitForElement } from "https://sdk.beamimpact.com/web-sdk/{{ sdk_version }}/dist/integrations/utils.js";
  import { getConfig } from "https://sdk.beamimpact.com/web-sdk/{{ sdk_version }}/dist/integrations/beam.js";

  const beamConfig = getConfig();
  await beamConfig.readyPromise;

  const cartItemObserverTarget = ".cart-item-observer-target";

  await waitForElement(cartItemObserverTarget);
  const observerElement = document.querySelector(cartItemObserverTarget)

  const cartChangeObserver = new MutationObserver(
    async (mutationsList, observer) => {
      await updateCart(beamConfig, {
        cartId,
        itemCount,
        subtotal,
        currencyCode
      });
  });

  if (observerElement) {
    cartChangeObserver.observe(observerElement, {attributes: false, childList: true, subtree: true});
  }