Ajouter au panier de votre boutique (Shopify…)

Votre configurateur est intégré dans une page de votre boutique en ligne ? Le bouton devient « Ajouter au panier » et le bracelet est envoyé à votre page.

Si votre configurateur est intégré dans une page de votre boutique en ligne (Shopify, WooCommerce, Wix…), votre cliente peut mettre son bracelet directement dans votre panier et payer chez vous, au lieu d'envoyer une demande par email.

Activer

  1. Dans Boutique → Commandes, cochez Ajouter le bracelet au panier de ma boutique.
  2. Indiquez l'adresse de votre site, par exemple https://www.ma-boutique.com (la version avec ou sans www est acceptée).
  3. Enregistrez, puis demandez à votre développeur d'ajouter le petit script ci-dessous à la page qui contient le configurateur.

Dans votre page, le bouton de commande devient Ajouter au panier. Ailleurs (lien direct vers le configurateur, autre site), la commande par email reste en place.

Le bracelet est envoyé uniquement à l'adresse de votre site, jamais à un autre.

Ce que reçoit votre page

Au clic, le configurateur envoie un message à votre page (postMessage) :

  • total, currency : le prix total et la devise ;
  • wrist_cm, bead_mm, real_length_cm : tour de poignet voulu, taille des perles (une liste, par exemple [8, 10], si les tailles sont mélangées), longueur réelle ;
  • beads et elements : la liste, avec name, qty et unit_price (et length_mm pour les éléments, size_mm pour chaque pierre : une ligne par pierre et par taille) ;
  • order_text : la composition en texte, prête à mettre dans une note de commande ;
  • design_url : le lien qui rouvre exactement ce bracelet.

Pour votre développeur (exemple Shopify)

window.addEventListener('message', async (e) => {
  if (e.origin !== 'https://lochness-paris.com') return;   // seulement le configurateur
  const d = e.data;
  if (!d || d.source !== 'lochness' || d.type !== 'bracelet:order') return;
  await fetch('/cart/add.js', {
    method: 'POST', headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ items: [{
      id: VOTRE_VARIANTE_BRACELET, quantity: 1,
      properties: { 'Composition': d.order_text, 'Voir le bracelet': d.design_url }
    }] })
  });
  window.location.href = '/cart';
});
Ne faites pas confiance au total les yeux fermés : recalculez-le avec vos propres prix (qty × votre prix de chaque pierre) ou vérifiez la commande avant expédition.

La façon de fixer le prix dans le panier dépend de votre boutique (un produit par prix, une application de prix sur mesure…) : c'est votre développeur qui choisit.

Voir aussi : Recevoir les commandes, Mettre le configurateur sur votre site.

Mis à jour le 27 octobre 2026