Shopping Cart Demo

Interactive cart sync demo — see events firing in real-time between the widget and this simulated host cart.

Cart Event Monitor

Waiting for events... Open the widget and interact with the chat.

readyrequestresponseaction

Host Cart (Simulated Store)

Cart is empty. Add sample items below or ask the AI to add products via the chat widget.

Add Sample Items

tohost(source: widget)widget(source: host)

Use sync (send full cart instead of add/remove/update)

Ask Your Agent

What is in my cart?

Add The Videographer Snowboard to my cart

Empty my cart.

Full Chat

Test cross-tab sync: add, remove, update, or empty the cart via full chat and watch events appear here via Socket.IO cart-updated push.

Open Full Chat (new tab) →

Console

// Waiting for cart events...

How It Works

The widget and your host page communicate via DOM events on window. Your adapter bridges these events to your store's cart API. Cart requests are always served from the server (not local cache).

Initial Sync

Host adapter mounts
  → fires xinfer:cart:ready
  → widget fires xinfer:cart:request
  → host responds with xinfer:cart:response
  → widget stores host cart in memory
  → init merge: aligns both carts

Cart Request / Response

Either side fires xinfer:cart:request
  → other side responds with its cart
  → widget fetches from GET /api/embed/cart
  → host responds from in-memory state

AI Mutates Cart

AI calls shopping_cart tool (add/remove/update)
  → widget DB updated server-side
  → widget fires xinfer:cart:action
  → host adapter applies the mutation

Cross-Tab via Socket.IO

AI mutates cart from full chat tab
  → server emits cart-updated to user room
  → widget tab receives via Socket.IO
  → dispatches DOM events to host adapter
  → works for add, remove, update, empty

AI Checkout

AI calls shopping_cart "submit"
  → order created, cart emptied
  → widget fires xinfer:cart:action (empty)
  → host adapter empties its cart

Host Checkout

User checks out on host site
  → adapter detects cart went empty
  → fires xinfer:cart:action (empty)
  → widget calls DELETE /api/embed/cart

Events & Actions Reference

Events

Event	Direction	Payload
`xinfer:cart:ready`	Host → Widget	`{}`
`xinfer:cart:request`	Either → Either	`{ source }`
`xinfer:cart:response`	Either → Either	`{ source, items: XinferCartItem[] }`
`xinfer:cart:action`	Either → Either	`{ source, action, item?, items? }`

Actions

Action	Description
`add`	Add item to cart. Resolved via id, sku, url, or title.
`remove`	Remove item by id
`update`	Update item quantity
`empty`	Clear all items (checkout or manual clear)
`sync`	Replace cart with provided items array (full sync)

All events are CustomEvents on window. Each includes a source field ("host" or "widget") to prevent loops — only handle events from the other side.

Live Demo

The chat widget is embedded on this page with cartSync: true. Open the chat and ask the AI to add an item to your cart — watch the events fire above.