SDK hızlı başlangıç#

Kataloğunuzda yaygınlaştırmadan önce, tek bir hazırlanmış ürünle mağaza vitrinine bir ürün görselleştirme giriş noktası ekleyin.

1. Mağazayı ve ürünü hazırlayın#

Yönetim paneli mağazanızı seçin. Shop ID ve Publishable Key'ni edinin. Panel → Ayarlar sayfasını açın, mağaza vitrininiz kökenini Allowed Origins (CORS) listesine ekleyin ve Kaydet düğmesine tıklayın. En az bir ürünün görselleştirme için hazır olduğundan emin olun. Arka uç sunucunuzdan içe aktarıyorsanız, Product Import API adımlarını izleyin ve son iş sonucunu denetleyin.

2. Platform kılavuzunu seçin#

Liquid temaları için Shopify, WooCommerce mağaza vitrinleri için WooCommerce veya kendi siteniz için özel mağaza vitrini kullanın. Daha fazla platform kılavuzu, SDK genel bakış sayfasında listelenmiştir.

3. SDK'ı bir kez yükleyin#

Özel bir mağaza vitrini için bu betiği ana sayfada bir kez yükleyin. Her iki yer tutucuyu da aynı mağazadan gelen değerlerle değiştirin.

html

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

4. Eşleşen bir hedefi oluşturun#

Hazırlanmış kataloğunuzdaki tam ürün kodunu kullanın. Bu örnek, SDK'in ürün doğrulamasından sonra düğmeyi oluşturmasını ister.

html

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

Yalnızca bir hedef, ürünün uygun olduğunu kanıtlamaz. Seçili varyantı, ürün hazırlığını ve tanımlayıcı eşlemesini doğrulayın.

5. Müşteri yolculuğunu test edin#

sdk.js'ın başarıyla yüklendiğini, doğru düğmenin göründüğünü ve bir tıklamanın hedeflenen ürünle Viewer'yi açtığını kontrol edin. Varyantları değiştirin, başka bir ürüne gidin ve mobil cihazda tekrarlayın. Yayınlamadan önce başlatma kontrol listesini tamamlayın.