Widget boutique en ligne

Démarrage rapide

Chargez le SDK, montez le widget et câblez un callback. Quinze minutes d'une page produit vierge à une disposition fonctionnelle avec synchronisation du panier.

Updated 27 October 2026

Ce guide transforme une simple page produit en planificateur intégré opérationnel. Avant de commencer, assurez-vous d'avoir deux choses de votre compte Scalarcut : une clé de widget et un catalogue. Les deux sont créées pour vous à l'inscription.

1. Chargez le SDK

Ajoutez le SDK Scalarcut à votre page. C'est un petit script sans dépendances :

<script src="https://embed.scalarcut.com/v1/sdk.js"></script>

2. Ajoutez un conteneur

Réservez un élément où le planificateur sera rendu. Le widget remplit le conteneur et se redimensionne pendant que l'acheteur travaille :

<div id="sc-tiling" style="max-width: 960px; margin: 0 auto;"></div>

3. Montez le widget

<script>
  ScalarcutTiling.mount('#sc-tiling', {
    widgetKey: 'YOUR_WIDGET_KEY',
    catalog: 'YOUR_CATALOG_SLUG',
    sku: 'CURRENT_PRODUCT_SKU',
    locale: 'en',
    currency: 'USD',
    onAddToCart(payload) {
      // Add the resolved lines to your own cart.
      payload.lines.forEach((line) => {
        yourStore.addToCart(line.sku, line.qty, line.unit);
      });
    },
  });
</script>

C'est toute l'intégration. Le widget charge votre catalogue, se verrouille sur les dimensions du SKU consulté et renvoie les lignes de panier résolues via onAddToCart.

4. Gardez le SKU synchronisé

Si l'acheteur passe à un autre produit pendant que la page est ouverte, prévenez le widget :

const planner = ScalarcutTiling.mount('#sc-tiling', { /* ... */ });
planner.setSku('NEXT_PRODUCT_SKU');

Le widget change le matériau, conserve la disposition de l'acheteur et recalcule les quantités.

Ce qui se passe ensuite

  • L'acheteur décrit le mur ou le sol, voit chaque coupe et peut ouvrir la liste de coupes et le blueprint.
  • Quand il clique sur Ajouter au panier, votre callback onAddToCart reçoit { lines, layoutFingerprint, layoutToken }, et votre boutique ajoute les articles.
  • Rien ne quitte votre boutique : prix, stock et tunnel de commande restent exactement là où ils sont aujourd'hui.

Étapes suivantes