Dodaj widżet do sklepu

Widżet to samodzielny iframe. Możesz dodać go do strony na dwa sposoby. SDK to zalecana ścieżka, ponieważ obsługuje za Ciebie komunikaty, zmianę rozmiaru i synchronizację koszyka.

SDK (zalecane)

SDK opakowuje iframe i protokół postMessage w jedno małe API:

<script src="https://embed.scalarcut.com/v1/sdk.js"></script>
<div id="sc-tiling"></div>
<script>
  ScalarcutTiling.mount('#sc-tiling', {
    widgetKey: 'YOUR_WIDGET_KEY',
    catalog: 'YOUR_CATALOG_SLUG',
    sku: 'CURRENT_PRODUCT_SKU',
  });
</script>

SDK wyznacza host osadzenia z adresu URL samego skryptu, więc ten sam fragment działa w każdym sklepie i regionie. Obserwuje też kontener i utrzymuje prawidłową wysokość ramki zarówno na desktopie, jak i na urządzeniach mobilnych.

Zwykły iframe

Jeśli wolisz renderować iframe samodzielnie, skieruj go na URL widżetu ze swoimi parametrami:

<iframe
  src="https://embed.scalarcut.com/v1/tiling?wk=YOUR_WIDGET_KEY&catalog=YOUR_CATALOG_SLUG&sku=CURRENT_PRODUCT_SKU&locale=en"
  style="width: 100%; height: 880px; border: 0;"
  title="Tile layout"
  allow="fullscreen"
  allowfullscreen
></iframe>

Do synchronizacji koszyka SDK i tak jest lepszym wyborem, bo przy surowym iframe sam nasłuchujesz zdarzeń postMessage widżetu. Zobacz Zdarzenia.

Rozmiary

Widżet wypełnia szerokość swojego kontenera i sam zarządza swoją wysokością.

• Desktop — SDK startuje z wysokości 880 px i rośnie automatycznie, jeśli interfejs potrzebuje więcej miejsca.
• Mobile — widżet używa pełnej wysokości okna, aby canvas i panel wyceny pozostały wygodne na telefonie.

Jeśli chcesz niższą ramkę startową, ustaw height:

ScalarcutTiling.mount('#sc-tiling', {
  widgetKey: 'YOUR_WIDGET_KEY',
  catalog: 'YOUR_CATALOG_SLUG',
  height: 720,
});

Umiejscowienie

Umieść widżet na stronie produktu, pod galerią lub obok niej. Jest powiązany z pojedynczym SKU, więc pasuje tam, gdzie kupujący wybrał już produkt — płytkę, laminat, LVT, płytę lub deskę warstwową.

• Jeden SKU na montaż. Jeśli strona pokazuje warianty, przekaż SKU wybranego wariantu i wywołaj setSku, gdy się zmieni.
• Ładuje się leniwie. SDK ustawia loading="lazy" na ramce, więc strona pozostaje szybka, gdy widżet jest poniżej linii zagięcia.
• Jeden widżet na stronę wystarczy. Ta sama instancja obsługuje ściany i podłogi.

HTTPS

Widżet jest serwowany przez HTTPS i w produkcji wymaga strony nadrzędnej przez HTTPS. Twój klucz widżetu jest powiązany z zarejestrowanymi originami, więc ładuje się tylko na Twoich domenach — więcej w Bezpieczeństwo i licencje.