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.

The one real integration task

Shopify and WooCommerce both add to cart by their internal variant/product ID, not by SKU. So the glue is a SKU → platform-ID map.

Shopify (AJAX Cart API)

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