Add to bag and checkout

The result can carry two buttons of your shop: Add to bag and Checkout. They only appear when your page says it can do them. The try-on never touches your cart itself: it asks your page, and your page answers.

Add to bag

Listen to addToBag. The button appears on the result as soon as there is a listener.

window.Labbesne = window.Labbesne || []
Labbesne.push([
  'on',
  'addToBag',
  async ({ product }) => {
    await cart.add(product.id, product.variantId)
  },
])

product is the product the shopper tried on, with the id and variantId your page gave. See Product data.

What your handler answers

The shopper sees Adding… until your handler finishes. What it returns, or the promise it returns resolves to, is the answer.

Your handler	The shopper sees
Returns nothing, or true	It worked
Returns { ok: true, message: 'Added. Size M.' }	It worked, with your line
Returns false or { ok: false }	It didn't work, and they can try again
Returns { ok: false, message: 'Pick a size first.' }	It didn't work, with your line
Throws, or its promise rejects	It didn't work
Takes longer than 10 seconds	It didn't work

Keep message to one short line. It is shown to the shopper as it is.

Answer within 10 seconds. After that the shopper is told it didn't work, even if your handler finishes later.

Labbesne.push([
  'on',
  'addToBag',
  async ({ product }) => {
    if (!product.variantId) return { ok: false, message: 'Pick a size first.' }
    const added = await cart.add(product.id, product.variantId)
    return added ? { ok: true } : { ok: false, message: 'That size just sold out.' }
  },
])

Checkout

There are two ways to show Checkout.

An address. The simplest: the shopper is sent there, and the try-on closes.

Labbesne.push(['init', { checkoutUrl: '/checkout' }])

Passing options to init() needs data-auto="false" on the tag. See Setting it up yourself.

A handler. For anything more than a link. It answers the same way as addToBag, and the try-on closes when it says it worked. If it says no, the shopper stays on the result and sees your message.

Labbesne.push([
  'on',
  'checkout',
  async ({ product }) => {
    await cart.add(product.id, product.variantId)
    location.assign('/checkout')
  },
])

A checkout handler wins over checkoutUrl.

Which buttons show

Your page has	On the result
Neither	No shop buttons. The shopper closes the try-on to buy.
addToBag only	Add to bag
checkout or checkoutUrl only	Checkout
Both	Add to bag first, then Checkout once it is added

If you stop listening with off() while the try-on is open, the button goes away.

The right size and colour

variantId is whatever your page passed when the try-on opened. If the shopper can change size on the page, pass product as a function so each open reads the selection. See The selected variant.

The try-on has no size picker of its own. If a size is needed and none is picked, answer { ok: false, message: 'Pick a size first.' }.

In your analytics

When your handler says it worked, the script pushes labbesne_added_to_bag or labbesne_checkout_started to the page's dataLayer. See Analytics.