البدء السريع باستخدام SDK#

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

1. حضّر المتجر والمنتج#

اختر متجرك في لوحة التحكم. احصل على Shop ID و Publishable Key الخاصتيْن به. افتح لوحة التحكم → الإعدادات، وأضف نقطة أصل الواجهة الأمامية إلى Allowed Origins (CORS) وانقر حفظ. تأكد من استعداد منتج واحد على الأقل للتصور. إذا كنت ترفع من خادمك الخلفي، اتبع Product Import API وفحص نتيجة المهمة النهائية.

2. اختر دليل المنصة#

استخدم Shopify لسمات Liquid، أو WooCommerce لواجهات WooCommerce الأمامية، أو الواجهة الأمامية المخصصة لموقعك الخاص. وتوجد أدلة منصات أخرى في نظرة عامة على SDK.

3. تحميل SDK مرة واحدة#

لواجهة متجر مخصصة، حمّل هذا السكربت مرة واحدة في الصفحة الحاضنة. استبدل القيمتين النائبتين بقيم من المتجر نفسه.

html

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

4. تصيير عنصر مستهدف مطابق#

استخدم رمز المنتج بدقة من كتالوجك المُعدّ مسبقًا. يطلب هذا المثال من SDK إنشاء الزر بعد اعتماد المنتج.

html

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

لا يثبت الهدف وحده أهلية المنتج. تأكد من المتغير المحدّد، وجاهزية المنتج، وتعيين المعرفات.

5. اختبر رحلة العميل#

تحقّق من أن sdk.js يُحمّل بنجاح، وأن الزر الصحيح يظهر، وأن النقر عليه يفتح Viewer بالمنتج المقصود. غيّر المتغيرات، وتجوّل إلى منتج آخر وكرر على الأجهزة المحمولة. أكمل قائمة التحقق من الإطلاق قبل النشر.