Widget sklepu internetowego
Szybki start
Załaduj SDK, zamontuj widżet i podłącz jeden callback. Piętnaście minut od pustej strony produktu do działającego układu z synchronizacją koszyka.
Ten przewodnik zamienia zwykłą stronę produktu w działający osadzony planer. Zanim zaczniesz, upewnij się, że masz dwie rzeczy z konta Scalarcut: klucz widżetu i katalog. Obie powstają przy rejestracji.
1. Załaduj SDK
Dodaj SDK Scalarcut do swojej strony. To mały skrypt bez zależności:
<script src="https://embed.scalarcut.com/v1/sdk.js"></script>
2. Dodaj kontener
Zarezerwuj element, w którym zostanie wyrenderowany planer. Widżet wypełnia kontener i zmienia swój rozmiar, gdy kupujący pracuje:
<div id="sc-tiling" style="max-width: 960px; margin: 0 auto;"></div>
3. Zamontuj widżet
<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>
To cała integracja. Widżet ładuje Twój katalog, blokuje się na wymiarach oglądanego SKU i zwraca rozwiązane pozycje koszyka przez onAddToCart.
4. Utrzymuj SKU w synchronizacji
Jeśli kupujący przełączy się na inny produkt, gdy strona jest otwarta, daj znać widżetowi:
const planner = ScalarcutTiling.mount('#sc-tiling', { /* ... */ });
planner.setSku('NEXT_PRODUCT_SKU');
Widżet zmienia materiał, zachowuje układ kupującego i przelicza ilości.
Co dzieje się dalej
- Kupujący opisuje ścianę lub podłogę, widzi każde cięcie i może otworzyć listę cięć oraz blueprint.
- Gdy kliknie Dodaj do koszyka, Twój callback
onAddToCartotrzymuje{ lines, layoutFingerprint, layoutToken }, a Twój sklep dodaje pozycje. - Nic nie opuszcza Twojego sklepu: cena, stan magazynowy i checkout pozostają dokładnie tam, gdzie są dzisiaj.
Kolejne kroki
- Dodaj widżet do sklepu — SDK kontra surowy iframe, rozmiary i umiejscowienie.
- Referencja SDK — każda opcja i każda metoda.
- Katalog — format CSV i jednorazowe mapowanie kolumn.