Add to cart

The embed emits togenar:configurator:selection_change on load and on every option change. The pattern is: wait for a valid selection → enable your button → on click, read the SKUs and POST them to your cart.

The generic pattern

<togenar-embed id="tg" project="YOUR_PROJECT_ID" configurator aspect="1/1"></togenar-embed>
<button id="add" disabled>Add to cart</button>

<script>
  const tg  = document.getElementById('tg');
  const btn = document.getElementById('add');

  // 1) Enable the button once the shopper has a complete configuration.
  tg.addEventListener('togenar:configurator:selection_change', (e) => {
    const skus = (e.detail.parts || []).map(p => p.sku).filter(Boolean);
    btn.disabled = skus.length === 0;
  });

  // 2) On click, read the current configuration…
  btn.addEventListener('click', async () => {
    const skus     = tg.getSkus();        // ["OSLO-BODY-WALNUT", "OSLO-LEGS-CHROME"]
    const shareUrl = tg.getShareUrl();    // permalink that rebuilds this exact config

    // 3) …and hand it to YOUR store (replace with your real cart call, below).
    await fetch('/cart/add', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ skus, quantity: 1, configuration_url: shareUrl }),
    });
  });
</script>

Persist shareUrl on the order line

It rebuilds the shopper’s exact configuration for order review, fulfillment or re-order — the one field worth storing beyond the SKUs.

Add to cart from AR

A shopper who has just placed the sofa in their living room is the most convinced they will ever be — and on a phone, that moment happens inside a native AR app, away from your page. AR Add to Cart is how you take the sale there: turn it on in WebAR settings → AR Add to Cart, and the tap arrives as one event.

It is the same handler as your on-page button — plus one line in that button:

// iOS: the shopper tapped the button INSIDE AR. Quick Look has already closed; add the item.
tg.addEventListener('togenar:ar-add-to-cart', () => addToCart(tg.getSkus(), tg.getShareUrl()));

// Your own button, unchanged — except it now tells us the add landed.
addBtn.addEventListener('click', async () => {
  await addToCart(tg.getSkus(), tg.getShareUrl());
  tg.addedToCart();
});

Those two lines are not redundant, they are the two platforms:

• iOS puts our button inside AR, so the tap arrives as an event and we add the item for you.
• Android allows no button inside AR, so the add comes from your own button — addedToCart() is what attributes it to the AR session. Skip that line and AR-driven Android sales are not attributed.

Either way, show the shopper it worked: bump the cart badge, open the mini-cart. Someone who comes out of AR, taps, and sees nothing assumes it failed.

iOS Safari, and only via the embed

The in-AR banner is a Safari feature — iOS Chrome and Firefox do not draw it. And AR add-to-cart needs togenar-embed on your page: a bare share link has no cart to add to.

When the shopper started on desktop

The two lines above assume the shopper is on your page when AR ends. Scan a QR code and they are not: AR finished on a phone that never loaded your site, so no event can reach the handler you just wired. The tap has to come back as a navigation instead.

It does, if the embed knows your product page — it does by default, or set it explicitly with page-url. The phone lands on your product page with the configuration in the URL and togenar_ar_cart=1 appended. Read it once, on load:

const q = new URLSearchParams(location.search);
if (q.get('togenar_ar_cart') === '1') {
  addToCart(tg.getSkus(), tg.getShareUrl());   // same handler, third entry point

  q.delete('togenar_ar_cart');                 // so a refresh does not add twice
  history.replaceState(null, '', location.pathname + (q.toString() ? `?${q}` : '') + location.hash);
}

The configuration parameters stay in the URL, so the embed on that page rebuilds the exact product the shopper saw in their living room — the cart line and the viewer agree without any extra state.

The price travels too

Quick Look draws no banner without a price, and the phone has no page to call setPrices(). The QR link therefore carries the price you last pushed on desktop. Push per-SKU prices rather than a bare total, so the banner keeps quoting correctly when the shopper changes an option on the phone.

Needs the domain allowlist

This return path is off until your product page’s domain is on the workspace domain allowlist. Without it AR still works, but the banner falls back to Togenar’s viewer page.

The one real integration task

Shopify and WooCommerce both add to cart by their internal variant/product ID, not by SKU. The integration therefore reduces to a SKU → platform-ID map.

Shopify (AJAX Cart API)

On Shopify, skip this page

The Shopify connector builds this map, pushes prices and stock, and wires the cart button automatically — one Custom Liquid paste, zero code. The pattern below is what it does under the hood, kept here for custom setups.

// Build this map from your product data (window.meta, a metafield, or the product JSON).
const SKU_TO_VARIANT = {
  'OSLO-BODY-WALNUT': 40123456789012,
  'OSLO-LEGS-CHROME': 40123456789013,
};

btn.addEventListener('click', async () => {
  const items = tg.getSkus()
    .map(sku => SKU_TO_VARIANT[sku])
    .filter(Boolean)
    .map(id => ({ id, quantity: 1, properties: { _config: tg.getShareUrl() } }));

  await fetch('/cart/add.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ items }),
  });
  // then refresh your cart drawer / redirect to /cart
});

For a configured bundle you typically sell one parent SKU (mapped to a single variant) and stash the full part list + shareUrl in line-item properties.

WooCommerce (Store API)

await fetch('/wp-json/wc/store/v1/cart/add-item', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json', 'Nonce': wcStoreApiNonce },
  body: JSON.stringify({ id: WC_PRODUCT_ID, quantity: 1 }),
});

Resolve WC_PRODUCT_ID from the Togenar SKU with the same kind of map.

Analytics

After your cart call resolves, dispatch togenar:commerce:add_to_cart_success (or …_fail) on the element to keep commerce analytics on one channel — see Events reference.