تكامل Webflow#

استخدم الشيفرة المخصصة وحقول CMS والتجارة الإلكترونية في Webflow لعرض أزرار Room Visualizer التي يطابق رمز المنتج فيها كتالوج ideal.house.

حالة التحقق: تمت مراجعة وثائق مركز مساعدة Webflow في 7 سبتمبر 2026. لم يتوفر موقع Webflow خاص بعميل. تعمل الشيفرة المخصصة بعد المعاينة أو النشر، ولا يشغّل Webflow شيفرة الخادم داخل عنصر تضمين؛ لذا اختبر النطاق المنشور لبيئة ما قبل الإنتاج.

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

المتطلبات المسبقة والقيود#

تحتاج إلى إذن لاستخدام الشيفرة المخصصة أو تضمين الشيفرة، ونطاق لبيئة ما قبل الإنتاج، وShop ID وPublishable Key ورمز SKU واحد مستورد في الكتالوج. تنطبق شروط خطة Webflow على تضمينات JavaScript. يجوز أن يحتوي المتصفح على Publishable Key، لكن يجب ألا يحتوي مطلقًا على Client Secret أو مفتاح AI API.

لا يقرأ SDK Ecommerce لـ Webflow تلقائيًا. يجب أن يكشف قالبك عن SKU، أو يجب أن يستخلصه محوّل العميل من حقل CMS موثوق.

عقد SDK الأدنى#

html

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

<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>

يجب أن يساوي data-product-code ideal.house sku المستورد بدقة.

تثبيت المحمّل#

افتح إعدادات الموقع → الشيفرة المخصصة وأضف وسم سكربت SDK في التذييل أو نهاية جسم الصفحة. استبدل القيم النائبة، ثم احفظ وانشر. ثبّته مرة واحدة على مستوى الموقع ولا تكرره في كل عنصر CMS.

قد لا تشغّل مساحة التصميم في Webflow السكربت. تحقق باستخدام URL للمعاينة أو لبيئة ما قبل الإنتاج المنشورة، وافحص مصدر الصفحة الفعلي.

أضف زرًا على مستوى العنصر#

أنشئ حقل CMS نصيًا عاديًا باسم Idealhouse SKU مثلًا. املأه بالقيمة نفسها المستوردة في حقل sku لدى ideal.house. في قالب المنتج أو مجموعة CMS، أضف عنصر تضمين شيفرة في موضع الزر:

html

<div
  data-idealhouse-button-container
  data-product-code="[bind this attribute to the current item's Idealhouse SKU]"
></div>

استخدم عنصر التحكم إضافة حقل في Webflow داخل محرر التضمين لإدراج قيمة العنصر الحالي؛ فالتعليمات بين الأقواس أعلاه ليست وسومًا تُنسخ حرفيًا إلى الإنتاج. بعد النشر، افحص DOM وتحقق من تحولها إلى سلسلة نصية عادية مثل:

html

<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>

بالنسبة لصفحة ثابتة، الصق SKU حرفي. لا تستخدم slug الصفحة أو معرف عنصر Webflow إلا إذا كانت تلك القيمة الدقيقة هي ideal.house SKU المستورد.

متغيرات المنتجات والعرض الديناميكي#

قد لا يتيح ربط البيانات القياسي في مصمم Webflow الوصول إلى SKU النهائي لمتغير المنتج من الشيفرة المخصصة في جميع تخطيطات التجارة الإلكترونية. إذا احتاج كل خيار مرئي إلى مورد مختلف في ideal.house، فأنشئ محوّلًا خاصًا بالعميل يستقبل المتغير المحدد من تكامل Webflow مدعوم أو من طبقة بياناتك، ثم يستبدل الحاوية:

function showIdealhouseVariant(host, sku) {
  host.replaceChildren();
  const code = typeof sku === 'string' ? sku.trim() : '';
  if (!code) return;
  const node = document.createElement('div');
  node.dataset.idealhouseButtonContainer = '';
  node.dataset.productCode = code;
  host.append(node);
}

هذه شيفرة خاصة بالعميل. استدعها من دالة رد نداء موثقة في أداة متغيرات المنتجات التي تستخدمها فعليًا. لا تستخرج نص الخيارات المعروض ولا تفترض وجود حدث غير رسمي في Webflow.

قد تضيف تفاعلات Webflow ومرشحات CMS وتقسيم النتائج إلى صفحات بواسطة أدوات خارجية والانتقالات الشبيهة بـ SPA عناصر المجموعات أو تستبدلها. ضع عنصر التضمين داخل قالب كل عنصر، أو استدعِ دالة الربط بعد دالة رد النداء الموثقة للعرض في الأداة. أنشئ دائمًا حاوية جديدة بدلًا من استنساخ وسوم سبق أن عالجها SDK.

استيراد بيانات الكتالوج#

صدّر حقول Product/CMS من Webflow وقم بربط Idealhouse SKU بـ sku. حمّل عبر تحميل المنتجات واتبع استيراد المنتجات، وحالة المهمة， وقائمة المنتجات، وتحديث المنتجات، وحذف المنتج، والأخطاء والمحاولات.

لا يوفر SDK في المتصفح مزامنة تلقائية مع Webflow. يقع تنفيذ أي تصدير عبر CMS API أو خطاف ويب أو عملية أتمتة على عاتق العميل.

التحقق والإزالة#

انشر في بيئة ما قبل الإنتاج، واختبر عنصرًا مرتبطًا وحقلًا مفقودًا وSKU غير معروف وقائمة مجموعات وقالب منتج ومرشحات وتقسيم الصفحات ونافذة منبثقة ونقطة تغيّر التخطيط على الهاتف المحمول وعناصر التحكم في الموافقة وزري الرجوع والتقدم في المتصفح. تحقق من تحميل SDK مرة واحدة، ومن تطابق كل رمز معروض مع العنصر الحالي، ومن عدم ظهور بيانات اعتماد الخادم في HTML.

لإزالة التكامل، احذف الشيفرة المخصصة لـ SDK على مستوى الموقع وكل ربط لعنصر تضمين أو زر، ثم أعد النشر وامسح ذاكرة التخزين المؤقت للخادم الوسيط وCDN. تحقق من اختفاء طلب السكربت وعناصر data-idealhouse-* من الموقع المنشور.

تكامل Webflow#

المتطلبات المسبقة والقيود#

عقد SDK الأدنى#

تثبيت المحمّل#

أضف زرًا على مستوى العنصر#

متغيرات المنتجات والعرض الديناميكي#

استيراد بيانات الكتالوج#

التحقق والإزالة#

المراجع الرسمية للمنصة#