Navigation & Checkout

AI shopping one tap away in the nav menu — and reassurance at the moment of highest hesitation: checkout.

Menu Integration

AI shopping, always one tap away. An Ask AI item pinned to the navigation menu reaches shoppers who navigate rather than search — it sits beside the category links on both desktop and mobile instead of competing with them, and turns a browse into a conversation.

The nav item carries no product or query context, so it only needs to open the widget:

// The nav item just shows the widget — no context to pass
navAskAi.addEventListener('click', () => widget.show());

SDK reference

• widget.show() — the nav item simply opens the assistant.
• widget.sendToggleHistory() — toggles the history panel, so a "Continue shopping with AI" entry should call it once on open, not on every press.

Checkout Widget

Catch the objection that empties the basket. Placement 04 answers these questions on arrival; this one answers them with the basket already filled, at the step where an unanswered doubt becomes an abandoned cart. Because the widget knows the cart, "when will it arrive?" gets an answer about these items — and the shopper never leaves the checkout flow to find it.

Keep the widget's copy of the basket current, or the answers will describe a cart the shopper no longer has:

// Sync on load and after every cart mutation.
// cartId is required; every item needs a non-empty productId AND variantId
// (quantity is optional). updateUserCart THROWS on an invalid shape — map your
// lines before calling it, and give single-variant products a stable variantId.
widget.updateUserCart({
  cartId,
  items: cartItems.map((line) => ({
    productId: String(line.productId),
    variantId: String(line.variantId ?? line.productId),
    quantity: line.quantity,
  })),
});

checkoutChips.addEventListener('click', (event) => {
  const chip = event.target.closest('[data-sophi-prompt]');
  if (!chip || !widget.isReady()) return;

  widget.show();
  widget.sendTextMessage(chip.dataset.sophiPrompt);
});

SDK reference

• widget.updateUserCart(cart) — required. Call it on initial load and after every add, remove, quantity change and cart restore.
• on("add_to_cart") — required handler. Apply widget-initiated additions to your cart, then call updateUserCart again.
• on("send_to_checkout") — required handler. Route the shopper to your checkout page.