Szybki start SDK#

Dodaj punkt wejścia wizualizacji produktów do witryny sklepu z jednym przygotowanym produktem, zanim rozszerzysz to na cały katalog.

1. Przygotowanie sklepu i produktu#

Wybierz swój sklep w Panel zarządzania. Uzyskaj jego Shop ID i Publishable Key. Otwórz Pulpit → Ustawienia, dodaj źródło swojej witryny sklepu do Allowed Origins (CORS) i kliknij Zapisz. Upewnij się, że co najmniej jeden produkt jest gotowy do wizualizacji. Jeśli importujesz z backendu, postępuj zgodnie z Product Import API i sprawdź ostateczny wynik zadania.

2. Wybór przewodnika platformy#

Użyj Shopify dla motywów Liquid, WooCommerce dla witryn WooCommerce lub niestandardową witrynę sklepu dla własnej strony. Więcej przewodników platform znajduje się w przeglądzie SDK.

3. Załaduj SDK tylko raz#

W przypadku niestandardowej witryny sklepu załaduj ten skrypt tylko raz w stronie hosta. Zastąp obie wartości zastępcze wartościami z tego samego sklepu.

html

<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="YOUR_SHOP_ID"
  data-publishable-key="YOUR_PUBLISHABLE_KEY"
  async
></script>

4. Wyrenderuj odpowiadający cel#

Użyj dokładnego kodu produktu z przygotowanego katalogu. Ten przykład prosi SDK o utworzenie przycisku po walidacji produktu.

html

<div data-idealhouse-button-container data-product-code="YOUR_PRODUCT_CODE"></div>

Samo istnienie elementu docelowego nie potwierdza dostępności wizualizacji produktu. Sprawdź wybrany wariant, gotowość produktu i mapowanie identyfikatorów.

5. Testowanie ścieżki klienta#

Sprawdź, czy sdk.js ładuje się poprawnie, czy pojawia się właściwy przycisk i czy kliknięcie otwiera Viewer z zamierzonym produktem. Zmieniaj warianty, nawiguj do innego produktu i powtórz na urządzeniu mobilnym. Ukończ listę kontrolną wdrożenia przed publikacją.