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 onAddToCart otrzymuje { 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