Cart integration

The widget turns a finished layout into concrete cart lines and hands them to your store. Your checkout stays the single source of truth for price, discounts, inventory, and payment.

The contract

When the shopper clicks Add to cart, the widget calls onAddToCart with:

{
  lines: [
    { sku: 'TILE-600-300', qty: 5, unit: 'box' },
  ],
  layoutFingerprint: '…',
  layoutToken: '…',
}

lines are the items to add. Each line is a catalog SKU, a numeric quantity, and a unit. The tile line is always present — the total tiles to purchase, expressed in boxes.

Consumables are opt-in

Adhesive, grout, and primer are always calculated and shown in the on-screen estimate and the Blueprint PDF. Whether they also sync to the cart is an opt-in setting, enabled for merchants who stock and sell those items. When enabled, those lines are added alongside the tile:

{
  lines: [
    { sku: 'TILE-600-300', qty: 5, unit: 'box' },
    { sku: 'ADHESIVE-25', qty: 12.5, unit: 'kg' },
    { sku: 'GROUT-2KG', qty: 3, unit: 'kg' },
    { sku: 'PRIMER-10L', qty: 1, unit: 'l' },
  ],
  layoutFingerprint: '…',
  layoutToken: '…',
}

Talk to us if you sell consumables and want them included — we enable it for your store during setup.

layoutFingerprint is a stable identifier for the layout. layoutToken is a signed token you can persist so the exact layout can be reopened later — for example, to attach the plan to an order.

Adding to your cart

Your callback adds the lines using your store's own API:

onAddToCart(payload) {
  payload.lines.forEach((line) => {
    yourStore.addToCart({
      sku: line.sku,
      quantity: line.qty,
      unit: line.unit,
    });
  });
}

For WooCommerce that means a cart/add-item call per line; for Shopify, a cart mutation; for a custom store, your own cart service. The widget never calls your store directly — you do, with the SKUs and quantities it resolved.

Price stays in your store

The widget never sends a price. It can show list prices from your catalog in the estimate for context, but the final price, tax, promotions, and loyalty discounts are all applied by your checkout when the lines are added. That keeps a single pricing engine and avoids any drift between the widget and the cart.

Inventory stays in your store

The widget adds what the layout requires. Your store validates stock on those SKUs exactly as it would for any other add-to-cart. If a SKU is low or unavailable, your existing backorder and notification flow applies unchanged.

Cart intent endpoint

For headless or server-side integrations there is a cart-intent endpoint that returns the same resolved lines. Your server calls it with the layout and adds the result to the session cart:

curl -X POST "https://embed.scalarcut.com/v1/tiling/cart-intent" \
  -H "Authorization: Bearer $WIDGET_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "catalog": "YOUR_CATALOG_SLUG",
    "sku": "TILE-600-300",
    "layoutFingerprint": "…",
    "quantities": { "boxes": 5 }
  }'

Response:

{
  "lines": [
    { "sku": "TILE-600-300", "qty": 5, "unit": "box" }
  ],
  "layoutFingerprint": "…",
  "layoutToken": "…"
}

With consumables enabled for your store, the request may also carry adhesiveKg, groutKg, and primerL, and the response gains the corresponding lines.

See the API reference for the full endpoint contract.