Skip to main content
Version: v1

Cart Setup

Add the Beam cart tracking file​

<html>
  <head>
    <!-- Your page 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>
</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.

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.

beam-cart-setup.js

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

const cartChangeEventName = "cart:change";

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

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
  discountCodes: [{ code: "SPECIALOFFER", applicable: true }], // The applicable order-level discount codes applied
  content: {
    items: [
      // "remoteProductIdentifier" is the product Id or sku for the item in the cart
      // "discountCodes" is the list of applicable line item level discounts
      {
        remoteProductIdentifier: "1234abcd",
        localAmount: 14.99,
        discountCodes: [{ code: "10OFF", applicable: true }],
      },
    ],
  },
};

// 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 })
);

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

  await updateCart(beam, eventPayload);
});