Skip to main content
Version: v1

Cart Setup

Adding cart tracking is an important step to ensure that your Beam Partner Portal data, especially Cart Completion Rate and lift metrics, are accurate.

The updateCart method should be called whenever an item is added or removed from the cart.

Base code​

File: src/app/components/beam/beam-track-cart.tsx

import { updateCart } from '@beamimpact/web-sdk/dist/integrations/cart'
import { logCart } from '@/components/beam/beam-statsig-setup' // If running an A/B test
import {
  BEAM_BASE_URL,
  BEAM_PUBLIC_API_KEY,
  BEAM_STORE_ID,
  BEAM_STORE_TOP_DOMAIN,
} from '@/components/beam/constants'

export type TBeamCartContentItem = {
  localAmount: number, // Amount in cart currency
  remoteProductIdentifier: string, // Product ID or SKU
  discountCodes?: Record<string, any>[] // Applicable line item level discount codes, [{ code: "{{ DISCOUNT_CODE }}", applicable: true }]
}

export type TBeamCart = {
  cartId: string // unique cart id
  itemCount: number
  subtotal: number
  currencyCode: string
  content?: {
   items: TBeamCartContentItem[]
   discountCodes: Record<string, any>[] // Applicable order level discount codes, [{ code: "{{ DISCOUNT_CODE }}", applicable: true }]
  }
}

const BeamConfig = {
  apiKey: BEAM_PUBLIC_API_KEY,
  storeId: BEAM_STORE_ID,
  baseUrl: BEAM_BASE_URL,
  domain: BEAM_STORE_TOP_DOMAIN,
},

// Notify Beam that the cart has been updated
// Call whenever an item is added or removed from the cart
export function publishBeamCartUpdate(data: TBeamCart) {
  updateCart(BeamConfig, data)

  // If using Statsig for A/B tests, import "logCart" from beam-statsig-setup
  // If you are not using Statsig, this function and import is not needed
  logCart(data.cart)
}

Use with server side rendering​

If you are using server-side rendering for your cart component, you may see an error such as ReferenceError: CustomEvent is not defined at compile time.

To resolve this, you may use one of the following methods to call this function client-side and avoid the compile time error:

  1. Disable server-side rendering for your cart component
// In this example, "Cart" is the component that is depending on
// the "updateCart" function from @beamimpact/web-sdk/dist/integrations/cart
const Cart = dynamic(() => import("@/app/components/cart"), {
  ssr: false,
});
  1. Dynamically import the "updateCart" function before calling it
// Remove the "updateCart" import from the top of this file, and instead
// import it dynamically at run-time

// Notify Beam that the cart has been updated
// Call whenever an item is added or removed from the cart
export function publishBeamCartUpdate(data: TBeamCart) {
  const { updateCart } = await import(
    "@beamimpact/web-sdk/dist/integrations/cart"
  );
  updateCart(BeamConfig, data)
}