Widget sklepu internetowego

Integracja koszyka

Jak widżet zamienia układ w pozycje koszyka i dlaczego cena, stan magazynowy i checkout pozostają autorytatywne na Twojej platformie.

Widżet zamienia gotowy układ w konkretne pozycje koszyka i przekazuje je Twojemu sklepowi. Twój sklep pozostaje odpowiedzialny za ceny, rabaty, stan magazynowy i checkout.

Ładunek callbacka

Gdy kupujący kliknie Dodaj do koszyka, widżet wywołuje onAddToCart z:

{
  lines: [
    { sku: 'TILE-600-300', qty: 5, unit: 'box' },
  ],
  layoutFingerprint: '…',
  layoutToken: '…',
}

lines to pozycje do dodania. Każda pozycja to SKU katalogu, ilość liczbowa i jednostka. Odpowiedź zawsze zawiera pozycję płytek — łączną liczbę płytek do kupienia, wyrażoną w kartonach.

Materiały eksploatacyjne są opcjonalne

Klej, fuga i grunt są zawsze wyliczane i pokazywane w wycenie na ekranie oraz w Blueprint PDF. To, czy są również synchronizowane do koszyka, to opcjonalne ustawienie, włączane sprzedawcom, którzy te artykuły mają w ofercie. Gdy jest włączone, te pozycje są dodawane obok płytki:

{
  lines: [
    { sku: 'TILE-600-300', qty: 5, unit: 'box' },
    { sku: 'ADHESIVE-25', qty: 12.5, unit: 'kg' },
    { sku: 'GROUT-2KG', qty: 3, unit: 'kg' },
    { sku: 'PRIMER-10L', qty: 1, unit: 'l' },
  ],
  layoutFingerprint: '…',
  layoutToken: '…',
}

Napisz do nas, jeśli sprzedajesz materiały eksploatacyjne i chcesz je uwzględnić — włączymy to dla Twojego sklepu podczas konfiguracji.

layoutFingerprint to stabilny identyfikator układu. layoutToken to podpisany token, który możesz zapisać, aby później ponownie otworzyć dokładnie ten układ — na przykład, aby dołączyć plan do zamówienia.

Dodawanie do Twojego koszyka

Twój callback dodaje pozycje przez własne API Twojego sklepu:

onAddToCart(payload) {
  payload.lines.forEach((line) => {
    yourStore.addToCart({
      sku: line.sku,
      quantity: line.qty,
      unit: line.unit,
    });
  });
}

Dla WooCommerce oznacza to wywołanie cart/add-item na pozycję; dla Shopify — mutację koszyka; dla sklepu własnego — Twój własny serwis koszyka. Widżet nigdy nie wywołuje Twojego sklepu bezpośrednio — robisz to Ty, z SKU i ilościami, które rozwiązał.

Cena zostaje w Twoim sklepie

Widżet nigdy nie wysyła ceny. Może pokazywać ceny katalogowe z Twojego katalogu w wycenie jako kontekst, ale cenę końcową, podatek, promocje i rabaty lojalnościowe stosuje Twój checkout przy dodawaniu pozycji. To utrzymuje jeden silnik cen i unika rozbieżności między widżetem a koszykiem.

Stan magazynowy zostaje w Twoim sklepie

Widżet dodaje to, czego wymaga układ. Twój sklep waliduje stan tych SKU dokładnie tak, jak przy każdym innym dodaniu do koszyka. Jeśli SKU jest niski lub niedostępny, Twój istniejący przepływ zamówień wstecznych i powiadomień działa bez zmian.

Endpoint intencji koszyka

Dla integracji headless lub po stronie serwera istnieje endpoint intencji koszyka, który zwraca te same rozwiązane pozycje. Twój serwer wywołuje go z układem i dodaje wynik do koszyka sesji:

curl -X POST "https://embed.scalarcut.com/v1/tiling/cart-intent" \
  -H "Authorization: Bearer $WIDGET_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "catalog": "YOUR_CATALOG_SLUG",
    "sku": "TILE-600-300",
    "layoutFingerprint": "…",
    "quantities": { "boxes": 5 }
  }'

Odpowiedź:

{
  "lines": [
    { "sku": "TILE-600-300", "qty": 5, "unit": "box" }
  ],
  "layoutFingerprint": "…",
  "layoutToken": "…"
}

Gdy materiały eksploatacyjne są włączone dla Twojego sklepu, żądanie może również nieść adhesiveKg, groutKg i primerL, a odpowiedź zyskuje odpowiadające pozycje.

Pełny kontrakt endpointu znajdziesz w referencji API.