Widget boutique en ligne

Intégration du panier

Comment le widget transforme une disposition en lignes de panier, et pourquoi prix, stock et tunnel de commande restent la référence sur votre plateforme.

Le widget transforme une disposition terminée en lignes de panier concrètes et les remet à votre boutique. Votre boutique reste responsable des prix, remises, stocks et du tunnel de commande.

Charge utile du callback

Quand l'acheteur clique sur Ajouter au panier, le widget appelle onAddToCart avec :

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

lines sont les articles à ajouter. Chaque ligne est un SKU de catalogue, une quantité numérique et une unité. La réponse inclut toujours une ligne de carreaux — le total de carreaux à acheter, exprimé en cartons.

Les consommables sont optionnels

La colle, le joint et le primaire sont toujours calculés et affichés dans le devis à l'écran et le Blueprint PDF. Qu'ils se synchronisent aussi au panier est un réglage optionnel, activé pour les marchands qui vendent ces articles. Quand c'est activé, ces lignes sont ajoutées à côté du carreau :

{
  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: '…',
}

Parlez-nous si vous vendez des consommables et souhaitez les inclure — nous l'activons pour votre boutique lors de la mise en place.

layoutFingerprint est un identifiant stable de la disposition. layoutToken est un jeton signé que vous pouvez conserver pour rouvrir plus tard la disposition exacte — par exemple, pour joindre le plan à une commande.

Ajout à votre panier

Votre callback ajoute les lignes via la propre API de votre boutique :

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

Pour WooCommerce, cela signifie un appel cart/add-item par ligne ; pour Shopify, une mutation de panier ; pour une boutique sur mesure, votre propre service de panier. Le widget n'appelle jamais votre boutique directement — c'est vous, avec les SKU et quantités qu'il a résolus.

Le prix reste dans votre boutique

Le widget n'envoie jamais de prix. Il peut afficher les prix catalogue de votre catalogue dans le devis à titre indicatif, mais le prix final, la taxe, les promotions et les remises fidélité sont tous appliqués par votre tunnel quand les lignes sont ajoutées. Cela conserve un moteur de prix unique et évite tout écart entre le widget et le panier.

Le stock reste dans votre boutique

Le widget ajoute ce que la disposition exige. Votre boutique valide le stock de ces SKU exactement comme pour tout autre ajout au panier. Si un SKU est bas ou indisponible, votre flux existant de réassort et de notification s'applique sans changement.

Endpoint d'intention de panier

Pour les intégrations headless ou côté serveur, il existe un endpoint d'intention de panier qui renvoie les mêmes lignes résolues. Votre serveur l'appelle avec la disposition et ajoute le résultat au panier de session :

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 }
  }'

Réponse :

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

Avec les consommables activés pour votre boutique, la requête peut aussi porter adhesiveKg, groutKg et primerL, et la réponse gagne les lignes correspondantes.

Voir la référence de l'API pour le contrat complet de l'endpoint.