تكامل مطوّر واجهة متجر مخصصة#

حمّل SDK الخاص بـ ideal.house واربط قيم productCode في واجهة المتجر بالكتالوج.

قبل تحميل SDK: افتح لوحة التحكم ← الإعدادات، وأضف أصل واجهة متجرك إلى Allowed Origins (CORS)، ثم انقر على حفظ. أدرج اسم المضيف المنشور وأي أصول للمعاينة أو بيئة ما قبل الإنتاج تستخدمها؛ وافصل بين الأصول المتعددة بفواصل. راجع خطوات الإعداد.

1. تحميل الـ SDK#

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

2. اختر أحد عقود الأزرار#

الخيار أ: زر مُنتج بواسطة SDK#

اعرض حاوية مستهدفة. بعد التحقق من صحة المنتج، ينشئ SDK زرّه الفرعي.

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

الخيار ب: زر مُنشأ يدويًا#

اعرض الزر ونسّقه بنفسك. يحافظ SDK على DOM ويربط به التحقق من الأهلية وسلوك النقر.

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

3. الحفاظ على تطابق productCode مع الكتالوج#

<PRODUCT_CODE>

• يجب أن تتطابق قيمة productCode في الكتالوج مع data-product-code في واجهة المتجر، بما في ذلك حالة الأحرف.
• لا تقم بإعادة توليد productCode من اسم متغير في كل تصيير؛ حدّث الكتالوج وواجهة المتجر معًا عند الحاجة إلى التغيير.

4. معالجة الصفحات الديناميكية والمنتجات المختارة#

يراقب SDK الأهداف المدرجة بعد تحميل الصفحة. لا يزال تطبيقك بحاجة إلى تحديث سمات الهدف وإعادة تعيين حالة SDK القديمة عند تغيير المنتج المحدد.

تحديث زر مُنشأ يدويًا بعد تغيير الاختيار#

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. التحقق من التكامل#

1. تُظهر لوحة الشبكة أن sdk.js تم تحميله مع HTTP 200.
2. يطابق data-product-code للهدف المُطابق بدقة الكتالوج.
3. تظهر الأزرار المُولّدة أو المُنشأة يدويًا فقط للمنتجات المؤهلة.
4. تحدّث التغييرات الديناميكية للمنتج الهدف قبل نقر العميل.
5. يؤدي النقر على الزر إلى فتح ideal.house Viewer مع المنتج المحدد.

تكوين متقدم#

رمز تشغيل مُنتج من الخادم#

استخدم هذا الوضع عندما يصدر خادمك رموز تشغيل قصيرة العمر. يجب ألا يظهر Client Secret أبدًا في JavaScript المتصفح.

<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="<SHOP_ID>"
  data-launch-token="<SERVER_GENERATED_LAUNCH_TOKEN>"
  async
></script>

# 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"}'

حجم منتج مخصص#

وفّر العرض والارتفاع والوحدة المكتوبة بأحرف صغيرة (ft أو in أو cm) معًا على العنصر المُطابق. يقرأ SDK أحدث القيم عند النقر.

<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>