Widget boutique en ligne
Référence du SDK
L'API complète de ScalarcutTiling.mount : chaque option, chaque callback et chaque méthode du handle qu'elle renvoie.
Le SDK a un seul point d'entrée, ScalarcutTiling.mount(target, options). Il renvoie un handle que vous pouvez utiliser pour piloter le widget après son chargement.
mount(target, options)
const planner = ScalarcutTiling.mount('#sc-tiling', {
widgetKey: 'YOUR_WIDGET_KEY',
// ... options below
});
target est une chaîne de sélecteur CSS ou un Element. Le widget se rend dans un nouvel iframe à l'intérieur.
Options
| Option | Type | Requise | Description |
|---|---|---|---|
widgetKey |
string |
Oui | La clé de widget de votre compte. |
catalog |
string |
Non | Slug de catalogue sur lequel verrouiller le planificateur. |
sku |
string |
Non | SKU à présélectionner au chargement. |
locale |
string |
Non | Locale de l'interface — en, ru, de, pl, it, es, fr ou pt. |
currency |
string |
Non | Code de devise affichée, par exemple USD, EUR ou BYN. |
height |
number |
Non | Hauteur de départ du cadre bureau en pixels. Par défaut 880. |
embedOrigin |
string |
Non | Origine de l'hôte d'intégration. Par défaut, l'origine du script SDK lui-même, donc vous devez rarement la définir. |
onReady |
() => void |
Non | Appelé quand le widget a fini de démarrer. |
onBomUpdated |
(payload) => void |
Non | Appelé à chaque changement de la nomenclature. |
onAddToCart |
(payload) => void |
Non | Appelé quand l'acheteur clique sur « Ajouter au panier ». |
onError |
(payload) => void |
Non | Appelé quand le widget signale une erreur. |
onResize |
(height) => void |
Non | Appelé quand le widget demande une nouvelle hauteur. |
Callbacks
onAddToCart(payload) est celui que vous utiliserez le plus :
onAddToCart(payload) {
// payload = { lines: [{ sku, qty, unit }], layoutFingerprint, layoutToken }
payload.lines.forEach((line) => {
yourStore.addToCart(line.sku, line.qty, line.unit);
});
}
Chaque ligne porte un SKU, une quantité numérique et une unité (box pour les carreaux ; kg et l pour les consommables quand cette option est activée pour votre boutique). Voir Intégration du panier.
onBomUpdated(payload) vous donne un instantané en direct du devis, pour que votre page puisse afficher quelque chose comme « Carreaux à commander : 34 » à côté du widget :
onBomUpdated(payload) {
console.log(payload); // areas, piece counts, boxes, consumables
}
onError(payload) porte un motif lisible par machine que vous pouvez transmettre à votre équipe support.
Méthodes du handle
mount renvoie un handle :
| Méthode | Description |
|---|---|
setSku(sku) |
Change le SKU actif sans re-rendre tout le widget. |
setLocale(locale) |
Change la langue de l'interface et recharge le cadre. |
setCurrency(currency) |
Change la devise affichée et recharge le cadre. |
exportBlueprint() |
Demande au widget de télécharger le Blueprint PDF actuel. |
requestAddToCart() |
Déclenche « Ajouter au panier » par programme, comme le bouton dans le widget. |
destroy() |
Supprime l'iframe et désabonne l'écouteur. Appelez-le quand le widget n'est plus nécessaire, par exemple lors d'une navigation en SPA. |
const planner = ScalarcutTiling.mount('#sc-tiling', { widgetKey: 'YOUR_WIDGET_KEY' });
// Later, in response to a variant switch on your page:
planner.setSku('VARIANT_SKU');
// On navigation away:
planner.destroy();
Locale et devise rechargent, pas le SKU
setLocale et setCurrency changent la langue et la devise du widget et rechargent le cadre. setSku ne recharge pas — il échange le matériau sur place et conserve la disposition de l'acheteur.
Erreurs
mount lève immédiatement une exception si la cible manque, si widgetKey est absent ou si l'origine d'intégration est indéterminable. Enveloppez l'appel si votre page rend le conteneur de façon conditionnelle :
try {
ScalarcutTiling.mount('#sc-tiling', { widgetKey: 'YOUR_WIDGET_KEY' });
} catch (error) {
console.warn('Scalarcut not mounted:', error.message);
}