Beam Cart Setup

theme.liquid

<html>
	<head> ... </head>
	<body>
    ...
    
		<!-- BEAM START -->
	  {% render 'beam-config' %}
	  **{% render 'beam-cart-setup' %}**
		<!-- BEAM END -->
  </body>
</html>

Base code

<aside> ⚠️ If you are using a Rebuy cart, use the Rebuy Cart Tracking snippet below instead of this base code.

</aside>

<aside> ⚠️ If you are using a custom cart, or the GraphQL Shopify API, use the Tracking custom carts snippet below instead of this base code.

</aside>

beam-cart-setup.liquid

<script type="module" async crossorigin>
  import { registerCartIntegration } from "<https://sdk.beamimpact.com/web-sdk/>{{ settings.beam_sdk_version }}/dist/integrations/shopify.js";

  registerCartIntegration({
    apiKey: {{ settings.beam_api_key }},
    storeId: {{ settings.beam_store_id }},
    baseUrl: {{ settings.beam_base_url }},
    domain: {{ settings.beam_store_domain }} || undefined,
  });
</script>

Tracking Rebuy carts

Rebuy and Beam’s default cart tracking code can sometimes interfere with each other. To ensure a consistent experience for your users, the following snippet can be used in place of the “Base Widget” snippet above for storefronts which use Rebuy for carts.

beam-cart-setup.liquid

<script type="module" async crossorigin>
  import { addBeamAttributesToCart, getCurrentCart, trackCart } from "<https://sdk.beamimpact.com/web-sdk/>{{ settings.beam_sdk_version }}/dist/integrations/shopify.js";
  import { events, getCookieValue, createScopedLocalStorage, saveRemoteSession } from "<https://sdk.beamimpact.com/web-sdk/>{{ settings.beam_sdk_version }}/dist/integrations/utils.js";
  import { getConfig } from "<https://sdk.beamimpact.com/web-sdk/>{{ settings.beam_sdk_version }}/dist/integrations/beam.js";

  const beam = getConfig();
  await beam.readyPromise;
 
  let lastSelectedNonprofitId = null; // used to avoid duplicate calls
  window.addEventListener(events.BeamNonprofitSelectEvent.eventName, async (event) => {
    const {selectedNonprofitId, selectionId} = event.detail;
    if (selectedNonprofitId !== lastSelectedNonprofitId) {
      await addBeamAttributesToCart({
        selectedNonprofitId,
        selectionId,
        cartId: await getCookieValue("cart"),
        storeId: beam.storeId,
        chainId: beam.chainId,
      })
    }
    lastSelectedNonprofitId = selectedNonprofitId;
  });

  // Set up Rebuy event listeners; this replaces "registerCartIntegration"
  document.addEventListener('rebuy:cart.change', async (event) => {
    const currentCart = await getCurrentCart(beam);
    await trackCart(beam, currentCart.cart);
  });
</script>

Tracking custom carts

In cases where your site is using a custom cart, or the GraphQL implementation of Shopify’s API, Beam listens for cart changes differently than using registerCartIntegration as seen above. The code below is a way to do this.

The code assumes you have access to the Shopify Storefront AJAX API (/cart.js, etc.).

beam-cart-setup.liquid