Cart Setup

The purpose of this tag 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.

• Tag Type: Custom HTML
• Support document.write: Yes
• Tag Sequencing: Fire after "Beam Initialization" tag

This tag will set up an event listener that must be dispatched when cart changes occur (item added to cart, item removed from cart, etc).

The cartChangeEventName should be updated to the appropriate event that is dispatched from your cart.

HTML

<!-- BEGIN Beam Cart Tracking -->
<script type="module">
  import { updateCart } from "https://sdk.beamimpact.com/web-sdk/v1.39.2/dist/integrations/cart.js";
  import { getConfig } from "https://sdk.beamimpact.com/web-sdk/v1.39.2/dist/integrations/beam.js";

  var cartChangeEventName = "cart:change";

  var 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);
  });
</script>
<!-- END Beam Cart Tracking -->

Beam's updateCart method requires a JSON payload that is shaped like the object below. The example snippet above assumes that this is provided by the cartChangeEvent.detail.

JSON

{
  "cartId": "1234abcd", // Required: A unique identifier for the cart
  "itemCount": 1, // Required: The quantity of items in the cart
  "subtotal": 14.99, // Required: A number value of the cart's subtotal (no taxes or shipping included)
  "currencyCode": "USD", // Required: The ISO currency code corresponding to the subtotal value
  "discountCodes": [{ code: "SPECIALOFFER", applicable: true }], // Optional: 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 }] }
    ]
  }
}