Custom Cart Opener

Remark can hand off cart actions to your storefront instead of opening the default Remark checkout dialog. To do this, add a remarkOpenCart function to window. When a shopper clicks the cart action in the Remark header, the widget checks for window.remarkOpenCart. If the function exists, Remark calls it and lets your site open its own cart drawer, modal, or cart page.

Add the cart opener

Add this code to the storefront pages where the Remark widget is installed.

window.remarkOpenCart = function () {
  const cartButton = document.querySelector("[data-cart-trigger]");

  if (cartButton) {
    cartButton.click();
    return true;
  }

  return false;
};

Returning true, or returning no value, tells Remark that your storefront handled the action. Returning false tells Remark to fall back to the default checkout dialog.

The function can be synchronous or asynchronous. Define it before shoppers can click the Remark cart action. If your cart script loads later, assign window.remarkOpenCart after your cart script is ready.

Function contract

Remark calls window.remarkOpenCart with a single context object.

type RemarkOpenCartContext = {
  cart: object;
  checkoutUrl: string;
  itemCount: number;
};

type RemarkOpenCart = (
  context: RemarkOpenCartContext,
) => boolean | void | Promise<boolean | void>;

Field	Description
`cart`	The current Remark cart preview. Use this if your cart integration needs product or line item context.
`checkoutUrl`	The checkout URL generated by Remark. Use this only if you want your fallback to send shoppers directly to checkout.
`itemCount`	The number of items in the cart.

Open cart after recommendation add-to-cart

By default, remarkOpenCart only runs when a shopper clicks the cart button in the Remark header. It does not automatically open your cart after a shopper adds a recommended product to cart. To also open your storefront cart after a user clicks the add-to-cart button on a recommendation, opt in with window.remarkOpenCartOnRecommendationAdd.

window.remarkOpenCart = function () {
  const cartButton = document.querySelector("[data-cart-trigger]");

  if (!cartButton) return false;

  cartButton.click();
  return true;
};

window.remarkOpenCartOnRecommendationAdd = true;

This opt-in only affects add-to-cart buttons on product recommendations shown in chat. If window.remarkOpenCart is missing, throws an error, or returns false, Remark will not open a fallback cart after recommendation add-to-cart since this isn’t the default behavior.

Common patterns

Open a cart drawer by clicking the site’s cart button

Most storefronts already have a cart button that opens the cart drawer. In that case, reuse the existing button instead of duplicating cart logic.

window.remarkOpenCart = function () {
  const selectors = [
    "[data-cart-trigger]",
    '[aria-controls="cart-drawer"]',
    'button[name="cart"]',
    'a[href="/cart"]',
  ];

  const cartTrigger = document.querySelector(selectors.join(","));

  if (!cartTrigger) return false;

  cartTrigger.click();
  return true;
};

Call your storefront’s cart API

If your theme exposes a cart function, call it directly.

window.remarkOpenCart = async function () {
  if (typeof window.openCartDrawer === "function") {
    await window.openCartDrawer();
    return true;
  }

  return false;
};

Redirect to your cart page

If your site does not have a cart drawer or modal, send the shopper to the cart page.

window.remarkOpenCart = function () {
  window.location.assign("/cart");
  return true;
};

Fallback behavior

If the function is missing, throws an error, or returns false, Remark opens the default checkout dialog. Use this behavior intentionally: return false when your cart drawer cannot be opened, rather than leaving the shopper with no next step.

window.remarkOpenCart = async function () {
  try {
    await window.openCartDrawer();
    return true;
  } catch (error) {
    console.error("Unable to open storefront cart", error);
    return false;
  }
};

Test the integration

Load a page with the Remark widget installed.
Start a conversation.
Add an item to your cart.
Click the cart icon in the Remark header.
Confirm your storefront cart opens.
Temporarily return false from window.remarkOpenCart and confirm Remark falls back to the default checkout dialog.
If you set window.remarkOpenCartOnRecommendationAdd = true, add a recommended product to cart from chat and confirm your storefront cart opens.

Getting Started

Guides

Dashboard

API

Integrations

Add the cart opener

Function contract

Open cart after recommendation add-to-cart

Common patterns

Open a cart drawer by clicking the site’s cart button

Call your storefront’s cart API

Redirect to your cart page

Fallback behavior

Test the integration

​Add the cart opener

​Function contract

​Open cart after recommendation add-to-cart

​Common patterns

​Open a cart drawer by clicking the site’s cart button

​Call your storefront’s cart API

​Redirect to your cart page

​Fallback behavior

​Test the integration

Add the cart opener

Function contract

Open cart after recommendation add-to-cart

Common patterns

Open a cart drawer by clicking the site’s cart button

Call your storefront’s cart API

Redirect to your cart page

Fallback behavior

Test the integration