> ## Documentation Index
> Fetch the complete documentation index at: https://docs.remark.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom Cart Opener

> Open your site's cart instead of the Remark checkout dialog

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.

```javascript theme={null}
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.

<Note>
  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.
</Note>

## Function contract

Remark calls `window.remarkOpenCart` with a single context object.

```typescript theme={null}
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`.

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

  if (!cartButton) return false;

  cartButton.click();
  return true;
};

window.remarkOpenCartOnRecommendationAdd = true;
```

<Note>
  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.
</Note>

## 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.

```javascript theme={null}
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.

```javascript theme={null}
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.

```javascript theme={null}
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.

```javascript theme={null}
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

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