تكامل Wix#

قم بتكامل Room Visualizer مع Wix Stores من خلال سطح امتداد Wix الذي يتطابق مع نوع موقعك. يتطلب Wix Editor و Wix Studio نهجين مختلفين.

حالة التحقق: تمت مراجعة وثائق امتداد Wix في تاريخ 7 سبتمبر 2026. لم تتوفر بيانات اعتماد موقع Wix أو تطبيق العميل، لذا لا يُعد هذا التحقق شاملاً (end-to-end). يجب أن يتقاسم SDK نفس DOM واجهة المتجر مع حاويته؛ ولا يُعد عنصر iframe من نوع HTML بديلاً.

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

اختر مسار Wix المناسب#

توثق Wix أن Embedded Scripts الخاصة بالمتاجر غير متوفرة في Wix Studio وتوجّه المطورين نحو استخدام إضافة موقع (site plugin). لا تقم بتثبيت حل Embedded Script الخاص بـ Editor وتدعي تغطية Studio.

المتطلبات المسبقة#

أعدّ موقع اختبار Wix مزوّدًا بـ Wix Stores، وصلاحيات نشر الكود المخصص أو إضافة التطبيق، ومعرفات ideal.house Shop ID وPublishable Key، ووحدات SKU مختبرة مستوردة. حدّد ما إذا كان المتغيّر Wix المحدّد يملك SKU خاصًّا به. احتفظ بأسرار التطبيقات ومفاتيح الـ API الخاصة بالواجهة الخلفية بعيدًا عن صفحة المتصفح.

وسم SDK الأساسي#

عندما يسمح Wix لك بتشغيل الكود في مستند واجهة المتجر، يكون وسوم ideal.house المدعومة على النحو التالي:

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

يجب أن يتطابق Product Code تماماً مع sku ideal.house المُستورد.

Wix Editor: التثبيت لموقع واحد#

في لوحة تحكم Wix، أضف وسم SDK عبر الإعدادات → الشيفرة المخصصة، وضعه في وسم body أو نهاية body، واختر صفحات المنتجات التي تحتاجه. انشر الموقع؛ فوضع المعاينة لا يكفي للتحقق من الإنتاج.

ثم أضف عنصراً مخصصاً لصفحة المنتج أو نقطة امتداد Wix Stores تنتج الحاوية في نفس المستند ذو المستوى الأعلى. تجنب استخدام ميزة Embed من نوع Wix HTML للزر: لأنها تعمل داخل iframe، مما يعني أن السكربت الموجود في المستند الأب لا يمكنه اكتشاف الحاوية، ولا يمكن للسكربت داخل الـ iframe التحكم في صفحة المنتج.

يجب أن يُعرّض العنصر القابل للوضع عملية واحدة فقط في كودك الخاص:

function setIdealhouseSku(host, sku) {
  host.replaceChildren();
  const code = typeof sku === 'string' ? sku.trim() : '';
  if (!code) return;

  const container = document.createElement('div');
  container.dataset.idealhouseButtonContainer = '';
  container.dataset.productCode = code;
  host.append(container);
}

استدعِ الدالة فقط بعد أن يُبلغ Wix عن المنتج أو متغير المنتج الحالي بصورة مكتملة عبر واجهة API المتاحة لصفحتك أو امتدادك. هذا كود تكييف تابع للعميل؛ وهو يتعمد عدم ذكر حدث صفحة Wix غير المُثبت.

تطبيق Wix: Embedded Script لمتاجر Wix Editor#

يوفر Wix Stores مواقع details-placeholder و bottom-placeholder لامتدادات النصوص المضمنة. أضف عنصرًا حاويًا إلى أحد هذه العناصر النائبة؛ لا تحل محتواها لأن التطبيقات الأخرى يمكنها مشاركتها. قم بتكوين نص SDK كجزء مضمن منفصل، أو أنشئه برمجيًا باستخدام سمات src و data-shop-id و data-publishable-key الدقيقة.

تستطيع Wix Site API المتاحة للسكربتات المضمّنة المنشأة باستخدام CLI قراءة سياق واجهة المتجر. حدّد SKU لمتغير المنتج الحالي عبر Stores API المدعومة من Wix، ثم استدعِ دالة الربط setIdealhouseSku() الخاصة بك. أبقِ الموضع المخصص فارغًا إلى أن تتوفر قيمة SKU كاملة.

Wix Studio: إضافة موقع#

أنشئ إضافة موقع لـ Wix Stores تستهدف موضعًا موثقًا في صفحة المنتج. اعرض الحاوية من واجهة مستخدم الإضافة، وحمّل SDK في مستند الموقع الذي يعرضه Wix. يجب أن تمرّر الإضافة SKU لمتغير المنتج الحالي بعد تحديده إلى حاوية DOM. قد تتغير أسماء المواضع وواجهات API للمكونات في Wix Studio؛ اخترها من مرجع CLI/API الحالي عند إنشاء التوسعة، بدلًا من نسخ اسم من هذا الدليل.

لا تستخدم جزء إضافة يعرض عنصر التحكم داخل iframe معزول: لم يتم اعتماد SDK وعارضه لذلك الحد الفاصل. اختر نقطة امتداد Wix تضع الحاوية في مستند واجهة المتجر، أو استخدم واجهة متجر ذات واجهة أمامية منفصلة حيث تتحكم في المستند.

تعيين المنتجات والتنقل#

قم بربط sku منتج أو متغير منتج من Wix بـ sku من ideal.house. لا تقم بالرجوع الصامت إلى معرّف منتج Wix التوليدي، لأن المعرّف المُولّد لن يتطابق مع SKU الكتالوج إلا إذا قمت باستيراده عن قصد.

يمكن لصفحات منتجات Wix استبدال المحتوى أثناء اختيار الخيارات أو التنقل عبر العميل. في كل دالة رد نداء موثقة للمنتج أو الاختيار:

1. امسح الحاوية المعروضة سابقًا؛
2. حدّد متغير المنتج المختار بصورة كاملة؛
3. أدرج حاوية جديدة مع SKU الخاص بها؛
4. أبقِ العنصر الحاوي فارغًا عندما لا تتوفر قيمة SKU كاملة أو قابلة للعرض.

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

استيراد المنتجات#

لا يقوم Wix Stores بمزامنة تلقائية مع ideal.house. صدّر حقول المنتجات والمتغيرات Wix، واضبط Wix SKU المطلوب لكل منها كـ sku، واستخدم رفع المنتجات. اطّلع على استيراد المنتجات، وحالة المهمة، وعرض المنتجات، وتحديث المنتجات، وحذف المنتج، والأخطاء والإعادة.

التزامن التلقائي بين Wix و ideal.house، أو تدفق تثبيت التطبيق، أو معالج ويب هوك Wix هي مهام من مسؤولية العميل؛ ولا يعد هذا الدليل بتوفير واحد.

تحقق قبل النشر#

1. اختبر الموقع المنشور في نافذة متصفح خاصة على سطح المكتب والجوال.
2. تأكد من تحميل SDK مرة واحدة في نفس المستند مثل العنصر.
3. قارن DOM Product Code مع SKU المُستورد بدقة تامة.
4. غيّر كل خيار حتى يتم اختيار متغير منتج نهائي؛ تأكد من إزالة العنصر القديم وظهور عنصر جديد.
5. اختبر تنقل العميل عبر Wix، وصفحات معرض/قائمة المنتجات المتكررة، والعرض السريع، وأزرار الرجوع والتقدم في المتصفح، وإعدادات الموافقة، وأوضاع الأعضاء/غير المسجلين.
6. تأكد من أن SKU المجهول أو الفارغ لا يترك أي عنصر تحكم أداة العرض المرئي معطلاً.
7. بالنسبة للتطبيق، اختبر التثبيت، والتفعيل، والتعطيل، وإلغاء التثبيت في مواقع اختبار Wix Editor وStudio المنفصلة حسب الدعم المتاح.

إزالة التكامل#

احذف أوعطّل إدخال Wix Custom Code وأزل عنصر صفحة المنتج. بالنسبة للتطبيق، أزل امتداد Embedded Script أو إضافة الموقع وقم بإلغاء تثبيته من موقع الاختبار. انشر، ثم تأكد من زوال طلب السكربت وجميع عقد data-idealhouse-*.

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

• Wix: تخصيص Wix Stores باستخدام السكربتات المضمّنة
• Wix: حول السكربتات المضمّنة
• Wix: حول توسعات الموقع
• Wix: عناصر مخصصة