Adding items to the shopping cart depends heavily on the underlying technical setup of your e-commerce platform. If you would like us to enable an “Add to Cart” button directly on product tiles (whether in recommendation widgets, autocomplete, search results, or shopping assistant product tiles), you will need to provide us with the appropriate technical interface that allows this action.

The interface should be capable of supporting the entire user flow, including:

• Adding the selected product to the cart
• Triggering and displaying a confirmation message or popup
• Updating the cart icon or counter in the navigation menu

There are several approaches:

Expose global JavaScript function

Expose a JavaScript function as a global object that can be called from our script. This function ensures all necessary steps for adding a product to the cart.

type AddToCartItem = {
	itemId: string;
	variantId?: string;
	quantity: number;
};

type AddToCartPayload = {
	items: AddToCartItem[];
	showSuccessPopup?: boolean;
	onSuccess?: () => void;
	onError?: (error?: unknown) => void;
};

type AddToCart = (payload: AddToCartPayload) => void;

declare global {
	interface Window {
		addToCart: AddToCart;
	}
}

Example:

window.addToCart({
	items: [
		{ itemId: '1', variantId: '1-red-m', quantity: 1 },
		{ itemId: '2', variantId: '2-blue-l', quantity: 2 },
	],
	showSuccessPopup: true, // if true, site should show confirm dialog
	onSuccess,
	onError,
});

Also note that the variantId is provided only when the widget allows the user to select a variant manually, or when the product has exactly one explicit variant.

Adding a product to the cart can require a different ID. Please refer to the special ID for the cart provided in Item Feed.

Use HTML markup

In many cases, the add-to-cart action can be implemented simply by using a specific HTML structure that your e-commerce platform is able to interpret. If this is how your platform operates, all we need from you is a clear definition of that structure. For instance, you can specify that the “Add to Cart” button should be placed within the following HTML pattern.