مكون محدد متغيرات متصل بـ Shopify لـ Framer يعرض أزرار خيارات قابلة للنقر (الحجم، اللون، نمط الإطار، إلخ) مع فحص التوافر في الوقت الفعلي.
ما الذي يفعله
يعرض محدد المتغيرات الشامل الخيارات القابلة للتحديد لمنتج Shopify — مثل الحجم أو اللون أو نمط الإطار — كصف أو عمود من الأزرار. صُمِّم ليوضع مرة لكل نوع خيار، لذا فإن منتجًا يحتوي على خياري الحجم واللون يستخدم نسختين منفصلتين من هذا المكون. السلوكيات الرئيسية:- يعرض مجموعة خيار واحدة — تتعامل كل نسخة مع نوع خيار واحد (مثال: محدد للحجم، وآخر للون). يُعيَّن اسم الخيار عبر ضابط Variant Name.
- التوافر المباشر من Shopify — عند التحميل، يستعلم المكون عن Shopify Storefront API لجلب حالة
availableForSaleالحديثة لكل متغير، متجاوزًا بيانات CMS القديمة. - منطق اختيار ذكي — عند اختيار قيمة (مثل “XL”)، يجد المكون المتغير الذي يطابق القيمة الجديدة وجميع الخيارات المحددة الأخرى، مما يُبقي التحديدات متسقة عبر المحددات.
- الخيارات غير المتاحة — تُعرض المتغيرات النافدة بشفافية مخفضة مع خط مائل قطري ولا يمكن النقر عليها.
- الحالة مدفوعة بـ URL — يُحفظ المتغير النشط في معامل URL
?variant=. جميع المحددات في الصفحة تقرأ وتكتب في نفس هذا المعامل، لذا تبقى متزامنة مع بعضها ومع مكونات المعرض. - الاختيار التلقائي للأول المتاح — إذا لم يكن هناك متغير صالح في URL، يختار المكون تلقائيًا أول متغير متاح ويعيّنه.
- تسمية اختيارية — يمكن عرض تسمية نصية (مثل “الحجم”) فوق أو بجانب الخيارات مع التحكم الكامل في الطباعة واللون.
ضوابط الخصائص
جميع الضوابط متاحة في لوحة Framer اليمنى عند تحديد المكون. تُجمَّع في أربعة أقسام: المتغيرات، اسم المتغير، التسمية، والخيارات.المتغيرات (CMS)
اسم المتغير
التسمية
يتحكم في التسمية المعروضة بجانب أزرار الخيارات.الخيارات
يتحكم في مظهر وتخطيط أزرار الخيارات الفردية.التخطيط
الحالات
تمتلك أزرار الخيارات ثلاث حالات بصرية — محدد، غير محدد، ومعطّل — لكل منها ضوابط ألوان مستقلة. محدد (الخيار النشط حاليًا)
غير محدد (متاح لكن غير نشط)
معطّل (نافد من المخزون)
ملاحظات
- يتطلب هذا المكون تعيين
window.DOMAINوwindow.ACCESSTOKENعالميًا على الصفحة لجلب التوافر المباشر من Shopify. بدونها، يعود المكون إلى بيانات التوافر من CMS. - ضع نسخة واحدة من هذا المكون لكل نوع خيار. منتج يحتوي على خياري الحجم واللون يحتاج إلى نسختين منفصلتين من محدد المتغيرات الشامل، لكل منهما Variant Name مختلف.
- يجب أن يطابق Variant Name اسم الخيار كما هو محدد في Shopify تمامًا (مثال:
Frame Styleوليسframe styleأوFrameStyle). - جميع المحددات ومكونات المعرض في نفس الصفحة تتشارك الحالة تلقائيًا عبر معامل URL
?variant=— لا حاجة لتوصيلات إضافية.