Referencja SDK

SDK ma jeden punkt wejścia, ScalarcutTiling.mount(target, options). Zwraca uchwyt, którym możesz sterować widżetem po załadowaniu.

mount(target, options)

const planner = ScalarcutTiling.mount('#sc-tiling', {
  widgetKey: 'YOUR_WIDGET_KEY',
  // ... options below
});

target to ciąg selektora CSS lub Element. Widżet renderuje się w nowym iframe wewnątrz niego.

Opcje

Opcja	Typ	Wymagana	Opis
widgetKey	string	Tak	Klucz widżetu Twojego konta.
catalog	string	Nie	Slug katalogu, do którego blokowany jest planer.
sku	string	Nie	SKU do wstępnego wybrania przy ładowaniu.
locale	string	Nie	Locale interfejsu — en, ru, de, pl, it, es, fr lub pt.
currency	string	Nie	Kod wyświetlanej waluty, na przykład USD, EUR lub BYN.
height	number	Nie	Początkowa wysokość ramki desktopowej w pikselach. Domyślnie 880.
embedOrigin	string	Nie	Origin hosta osadzenia. Domyślnie origin samego skryptu SDK, więc rzadko musisz go ustawiać.
onReady	() => void	Nie	Wywoływany, gdy widżet zakończy uruchamianie.
onBomUpdated	(payload) => void	Nie	Wywoływany przy każdej zmianie zestawienia materiałów.
onAddToCart	(payload) => void	Nie	Wywoływany, gdy kupujący kliknie „Dodaj do koszyka".
onError	(payload) => void	Nie	Wywoływany, gdy widżet zgłosi błąd.
onResize	(height) => void	Nie	Wywoływany, gdy widżet poprosi o nową wysokość.

Callbacki

onAddToCart(payload) to ten, którego będziesz używać najczęściej:

onAddToCart(payload) {
  // payload = { lines: [{ sku, qty, unit }], layoutFingerprint, layoutToken }
  payload.lines.forEach((line) => {
    yourStore.addToCart(line.sku, line.qty, line.unit);
  });
}

Każda pozycja niesie SKU, ilość liczbową i jednostkę (box dla płytek; kg i l dla materiałów eksploatacyjnych, gdy ta opcja jest włączona dla Twojego sklepu). Zobacz Integracja koszyka.

onBomUpdated(payload) daje migawkę wyceny na żywo, aby Twoja strona mogła pokazać coś w rodzaju „Płytki do zamówienia: 34" obok widżetu:

onBomUpdated(payload) {
  console.log(payload); // areas, piece counts, boxes, consumables
}

onError(payload) niesie czytelny maszynowo powód, który możesz przekazać swojemu zespołowi wsparcia.

Metody uchwytu

mount zwraca uchwyt:

Metoda	Opis
setSku(sku)	Przełącza aktywny SKU bez ponownego renderowania całego widżetu.
setLocale(locale)	Zmienia język interfejsu i przeładowuje ramkę.
setCurrency(currency)	Zmienia wyświetlaną walutę i przeładowuje ramkę.
exportBlueprint()	Prosi widżet o pobranie bieżącego Blueprint PDF.
requestAddToCart()	Wywołuje „Dodaj do koszyka" programowo, jak przycisk w widżecie.
destroy()	Usuwa iframe i wypisuje się z nasłuchu. Wywołaj, gdy widżet nie jest już potrzebny, np. przy nawigacji 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 i waluta przeładowują, SKU nie

setLocale i setCurrency zmieniają język i walutę widżetu oraz przeładowują ramkę. setSku nie przeładowuje — zamienia materiał na miejscu i zachowuje układ kupującego.

Błędy

mount rzuca natychmiast, jeśli brakuje celu, nie ma widgetKey lub nie da się ustalić origina osadzenia. Owiń wywołanie, jeśli Twoja strona renderuje kontener warunkowo:

try {
  ScalarcutTiling.mount('#sc-tiling', { widgetKey: 'YOUR_WIDGET_KEY' });
} catch (error) {
  console.warn('Scalarcut not mounted:', error.message);
}