<aside> 🛑 Be sure to check your widget version! If it’s before v1.31.0, jump to here!

</aside>

You should already have the following setup in your page template. This page will show you how to populate beam-cart-setup.js.

<html>
	<head> ... </head>
	<body>
    <!-- Your page content... -->
    
		<!-- BEAM START -->
	  <script type="module" src="./beam-config.js"></script>
	  ****<script type="module" src="./beam-cart-setup.js"></script>
		<!-- BEAM END -->
  </body>
  </body>
</html>

The purpose of this code is to link up Beam to your customer’s carts in order to show them the correct list of nonprofits based on active promotions and SKU- or product-specific settings. It also registers data in Beam for ROI dashboards.

Base code

beam-cart-setup.js

The goal of the following code is to call Beam’s updateCart method whenever cart data changes. This can be done by listening for events (either existing ones provided by your cart system or custom ones) or by calling the updateCart method directly in your cart change logic.

Replace the following in the example

• cartChangeEventName - This should be the name of a Javascript event that is thrown when a change to your cart happens. This example code expects a JSON payload of the event with the following structure:

Example: Using Events

1. Dispatch an event any time the cart is changed (integrate this into your site code):

const cartChangeEventName = 'cart:change'

const cartChangeEventPayload = {
	cartId: "1234abcd", // A unique identifier for the cart if applicable 
  itemCount: 1, // The quantity of items in the cart
  subtotal: 14.99, // A number value of the cart's subtotal (no taxes or shipping included)
  currencyCode: "USD", // The ISO currency code corresponding to the subtotal value
  content: {
    items: [
      // "remoteProductIdentifier" is the product Id or sku for the item in the cart
      { remoteProductIdentifier: '1234abcd', localAmount: 14.99 }
    ]
  }
}

// One way of dispatching events - your site may do this already
// https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
window.dispatchEvent(
  new CustomEvent(cartChangeEventName, { detail: cartChangeEventPayload })
);

1. Listen for cart change event and call Beam’s updateCart method with cart data

// beam-cart-setup.js
import { updateCart } from "https://production-beam-widgets.beamimpact.com/web-sdk/v1.31.0/dist/integrations/cart.js";
import { getConfig } from "https://production-beam-widgets.beamimpact.com/web-sdk/v1.31.0/dist/integrations/beam.js";

const cartChangeEventName = "cart:change";

// Note: SDK versions below 1.31.0 may use window.BeamImpact instead of getConfig()
const beam = getConfig();
await beam.readyPromise;

// Listen for cart change events
window.addEventListener(cartChangeEventName, async (event) => {
  const eventPayload = event.detail; // Depends on how event was created

  await updateCart(beam, eventPayload);
});

SDK before v1.31.0

Older versions of the SDK do not have the init/getConfig system, so instead of the code snippet from Step 2 above, you may use the snippet below.

// beam-cart-setup.js
import { updateCart } from "https://production-beam-widgets.beamimpact.com/web-sdk/v1.31.0/dist/integrations/cart.js";

const cartChangeEventName = "cart:change";

// Listen for cart change events
window.addEventListener(cartChangeEventName, async (event) => {
  const eventPayload = event.detail; // Depends on how event was created
  const cartData = {
    cartId: eventPayload.cartId,
    itemCount: eventPayload.itemCount,
    subtotal: eventPayload.subtotal,
    currencyCode: eventPayload.currencyCode,
    storeId: window.BeamImpact.storeId,
    content: eventPayload.content?.items > 0 ? eventPayload.content : undefined
  };

  const beamCartConfig = {
    apiKey: "{{ SDK API Key }}", // i.e., "abc123.xyz456"
    chainId: {{ Chain ID }}, // i.e., 1000
    storeId: {{ Store ID }}, // i.e., 50000
    domain: "{{ Store Top Domain }}", // i.e., "mystore.com"
    baseUrl: "https://production-central-backend-ne.beamimpact.com"
  }

  await updateCart(beamCartConfig, eventPayload);
});