الصفحات الديناميكية وتغيّر متغيرات المنتجات#

يراقب SDK العناصر المستهدفة التي تُدرج بعد تحميل الصفحة. تظل واجهة متجرك مسؤولة عن تحديد المنتج المختار، ويجب أن تُبقي سمات العنصر المستهدف متزامنة مع هذا الاختيار.

حمّل مرة واحدة، حدث العنصر المستهدف#

استخدم مُحمّل SDK واحدًا على مستوى التطبيق أو القالب. لا تُضف سكربتًا جديدًا عند كل انتقال بين المسارات. اعرض عنصرًا مستهدفًا حيث يظهر المنتج الحالي، وحدّثه عندما يغيّر العرض السريع أو محدد متغير المنتج أو مسار جهة العميل المنتج المعروض.

بالنسبة للأزرار المولَّدة استخدم رمز المنتج الحالي على حاوية الهدف. أما الأزرار المُنشأة يدويًا فيجب إعادة تعيين حالة SDK السابقة أيضًا، كما هو موضح في دليل الواجهة الأمامية المخصصة.

إعادة ضبط الزر المُنشأ يدويًا#

يتبع التالي عقد متجر الواجهة الإلكترونية المخصص الحالي. استدعه من معالج التحديد الخاص بك، بعد أن تعرف رمز المنتج المحدد.

function setSelectedProduct(button, 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;
  const code = typeof productCode === 'string' ? productCode.trim() : '';
  if (code) button.dataset.productCode = code;
  else delete button.dataset.productCode;
  button.disabled = !code;
}

ربط دورة حياة المنصة الحقيقية#

لا يوجد حدث موحد لتغيير متغير المنتج في جميع منصات التجارة الإلكترونية. يحدد دليل Shopify حدثًا ليُطلقه قالبك؛ وإضافة مستمع الحدث وحدها لا تربط القالب. استخدم دالة رد النداء الموثقة للقالب أو التطبيق الذي تستخدمه فعليًا.

بالنسبة إلى React / Next.js و Vue / Nuxt، اتبع إرشادات دورة الحياة على جانب العميل والتنظيف في دليل الإطار.

تحقق من التحديدات القديمة#

انتقِل بين منتج مؤهل، ومنتج مؤهل مختلف، وواحد بلا تعيين. يجب ألا يفتح Viewer المنتج السابق أبدًا بعد تغيير التحديد. كرر مع العروض السريعة والتنقل العكسي في المتصفح.