Cart Interaction

Use a cart interaction event to monitor customer activity when they add items to, remove items from, or replace the entire contents of their online shopping cart.

Cart interactions come in two forms:

• Single line item interactions: For modifying individual line items in the customer’s cart.
• Multiple line item interactions: For bulk operations against the customer’s cart.

Single Line Item Interactions

These interaction names are used for cart interactions that affect individual line items.

Here are fields for a single line cart interaction.

To track adding or removing a single product, use the AddToCart or RemoveFromCart interaction names. The payload must contain a lineItem key with a single Line Item object as its value.

// Example: Adding a single item to the cart
{
   interaction: {
        name: SalesforceInteractions.CartInteractionName.AddToCart,
        lineItem: { // Note the singular "lineItem"
            catalogObjectType: "Product",
            catalogObjectId: "product-1",
            quantity: 1,
            price: 9.99,
            currency: "USD",
            attributes: {
                giftWrapping: true
            }
        }
   }
}

Multiple Line Item Interactions

These interaction names are used for cart interactions that affect all the line items in a cart.

Here are the fields for multiple line item cart interactions.

To track a bulk update that replaces all items in the cart, use the ReplaceCart interaction name. This is common after a login when merging a guest cart with a saved cart. The payload must contain a lineItems key with an array of Line Item objects as its value. An empty array indicates the cart is now empty.

// Example: Replacing the cart with two different items
{
   interaction: {
        name: SalesforceInteractions.CartInteractionName.ReplaceCart,
        lineItems: [ // Note the plural "lineItems" array
          {
            catalogObjectType: "Product",
            catalogObjectId: "product-1",
            quantity: 1,
            price: 9.99,
            currency: "USD"
          },
          {
            catalogObjectType: "Product",
            catalogObjectId: "product-2",
            quantity: 3,
            price: 20,
            currency: "USD"
          }
        ]
   }
}

Implementation Examples

Transmit Events Using the Web SDK

You can send a cart interaction event directly from your own JavaScript code, such as within a custom event handler for an "Add to Cart" button using the Web SDK.

// Fire this event from within your site's custom "addToCart" function
SalesforceInteractions.sendEvent({
  interaction: {
    name: SalesforceInteractions.CartInteractionName.AddToCart,
    lineItem: {
      catalogObjectType: "Product",
      catalogObjectId: "product-1",
      quantity: 1,
      price: 9.99,
      currency: "USD",
      attributes: {
        giftWrapping: 1,
      },
    },
  },
});

Transmit Events Using a Sitemap Listener

For a more declarative approach, you can use the Sitemap to listen for user actions (like a button click) and automatically send the corresponding event.

SalesforceInteractions.init().then(() => {
  const sitemapConfig = {
    global: {},
    pageTypes: [
      {
        name: "product_detail_page",
        isMatch: () => true,
        listeners: [
          // Listen for a click on any element with the class ".add-to-cart-button"
          SalesforceInteractions.listener("click", ".add-to-cart-button", () => {
            SalesforceInteractions.sendEvent({
              interaction: {
                name: SalesforceInteractions.CartInteractionName.AddToCart,
                lineItem: {
                  catalogObjectType: "Product",
                  catalogObjectId: "product-1", // Should be dynamically populated
                  quantity: 1, // from the page
                  price: 9.99,
                  currency: "USD",
                },
              },
            });
          }),
        ],
      },
    ],
  };
  SalesforceInteractions.initSitemap(sitemapConfig);
});

See Also

• Custom Events
• Translation of SDK Events to Web Connector Schemas