Ideal House
İçeriğe atla

Özel mağaza vitrini geliştirici entegrasyonu#

ideal.house SDK'yi yükleyin ve mağaza vitrini productCode değerlerini Kataloğa eşleyin.

<!-- DASHBOARD_READINESS -->

SDK yüklenmeden önce: Panel → Ayarlar sayfasını açın, mağaza vitrini kökeninizi Allowed Origins (CORS) listesine ekleyin ve Kaydet düğmesine tıklayın. Yayımlanan ana bilgisayar adını ve kullandığınız önizleme veya test ortamı kökenlerini dahil edin; birden fazla kökeni virgülle ayırın. yapılandırma adımları bölümüne bakın.

1. SDK'i yükleyin#

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

2. Bir düğme sözleşmesi seçin#

Seçenek A: SDK-üretilen düğme#

Hedef konteyneri görüntüleyin. Ürün doğrulamasından sonra, SDK kendi alt düğmesini oluşturur.

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

Seçenek B: oluşturulan düğme#

Düğmeyi kendiniz görüntüleyin ve stillendirin. SDK, DOM'ü korur ve uygunluk ile tıklama davranışını bağlar.

html
<button
  type="button"
  data-idealhouse-authored-button
  data-product-code="<PRODUCT_CODE>"
  style="visibility: hidden;"
>
  View in my room
</button>

3. productCode'ü Kataloğa benzer tutun#

<PRODUCT_CODE>

  • Kataloğ productCode ve mağaza vitrini data-product-code, büyük/küçük harf dahil olmak üzere aynı olmalıdır.
  • productCode'yi her görüntüleme sırasında değişken bir isimden yeniden üretmeyin; değişmesi gerektiğinde Kataloğu ve mağaza vitrinini birlikte güncelleyin.

4. Dinamik sayfaları ve seçili ürünleri işleyin#

SDK, sayfa yüklemesinden sonra eklenen hedefleri gözlemler. Uygulamanız, seçili ürün değiştiğinde hedef özniteliklerini güncellemeye ve eski SDK durumunu sıfırlamaya devam etmelidir.

Seçim değişikliklerinden sonra oluşturulan düğmeyi güncelleyin#

js
const button = document.querySelector('[data-idealhouse-authored-button]')

function selectProduct(product) {
  button.dataset.productCode = product.productCode
  button.dataset.active = 'false'
  button.style.visibility = 'hidden'

  delete button.dataset.rvProductCode
  delete button.dataset.rvProductType
  delete button.dataset.rvProductId
  delete button.dataset.rvProductIds
}

5. Entegrasyonu doğrulayın#

  1. Ağ paneli, sdk.js'in HTTP 200 ile yüklendiğini gösterir.
  2. Eşleşen hedef data-product-code, Kataloğ ile tam olarak eşleşir.
  3. Yalnızca uygun ürünler otomatik olarak üretilen veya sizin yazdığınız bir düğme gösterir.
  4. Dinamik ürün değişiklikleri, müşteri tıklamadan önce hedefi günceller.
  5. Düğmeye tıklamak, seçili ürünle ideal.house Viewer'ü açar.
<!-- DASHBOARD_CONFIGURATION -->

Gelişmiş yapılandırma#

Sunucu tarafından üretilen başlatma belirleyicisi#

Arka ucunuzun kısa ömürlü başlatma belirleyicileri çıkardığı bu modu kullanın. Client Secret asla tarayıcı JavaScript'de görünmemelidir.

html
<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="<SHOP_ID>"
  data-launch-token="<SERVER_GENERATED_LAUNCH_TOKEN>"
  async
></script>
bash
# Run on your server. Never expose CLIENT_SECRET in browser JavaScript.
curl -X POST "<IDEALHOUSE_API_URL>/shops/<SHOP_ID>/sdk-launch-token" \
  -H "Content-Type: application/json" \
  -H "x-client-id: <CLIENT_ID>" \
  -H "x-client-secret: <CLIENT_SECRET>" \
  -d '{"origin":"https://your-store.example"}'

Özel ürün boyutu#

Genişlik, yükseklik ve küçük harf birimi (ft, in veya cm) birlikte eşleşen öğede sağlanmalıdır. SDK, tıklama anında en güncel değerleri okur.

html
<button
  data-idealhouse-authored-button
  data-product-code="<PRODUCT_CODE>"
  data-product-width="8"
  data-product-height="10"
  data-product-size-unit="ft"
  style="visibility: hidden;"
>View in my room</button>