فلتر حسب المتغير

مكون فلتر منتجات متصل بـ Shopify لـ Framer يجلب جميع خيارات المتغيرات من الكتالوج ويعرضها كأزرار فلتر قابلة للنقر، مع حفظ التحديد النشط في localStorage لاستخدامه من قِبل مكونات أخرى.

ما الذي يفعله

يجلب فلتر حسب المتغير جميع متغيرات المنتجات من متجر Shopify عبر Storefront API، ويجمّعها حسب اسم الخيار (مثل الحجم، اللون، نمط الإطار)، ويعرض كل قيمة فريدة كزر فلتر. عند نقر المستخدم على زر، يحفظ المكون التحديد في localStorage ويبث حدث تخزين — مما يتيح لمكون قائمة المنتجات في نفس الصفحة تصفية نتائجه بشكل تفاعلي. السلوكيات الرئيسية:

يجلب المتغيرات من Shopify — عند التحميل، يستعلم عن Shopify Storefront API للحصول على جميع المنتجات ومتغيراتها. يعود إلى بيانات معاينة وهمية إذا لم تكن بيانات اعتماد Shopify متاحة (مثل داخل لوحة Framer).
يجمّع حسب اسم الخيار — تُجمَّع خيارات المتغيرات تلقائيًا وتُصنَّف حسب اسم خيار Shopify (مثل جميع قيم الحجم معًا، وجميع قيم اللون معًا).
تحديد فردي أو متعدد — يمكن تكوينه للسماح بتحديد فلتر واحد في كل مرة أو فلاتر متعددة في آنٍ واحد.
منطق فلتر AND/OR — تحديد قيم متعددة ضمن مجموعة الخيار نفسها يستخدم منطق OR (مثل Small أو Medium). تحديد قيم عبر مجموعات خيارات مختلفة يستخدم منطق AND (مثال: الحجم: Small AND اللون: Black).
يحفظ التحديد في localStorage — تُكتَب وسوم الفلتر النشط ومعرّفات المنتجات المطابقة كلاهما في localStorage وتُبقى متزامنة عبر تفاعلات الصفحة ونسخ المكونات.
يبث أحداث التخزين — يطلق أحداث storage حتى تتفاعل المكونات الأخرى (مثل شبكة المنتجات) مع تغييرات الفلتر دون إعادة تحميل الصفحة.
تسمية اختيارية — يمكن عرض تسمية نصية فوق أزرار الفلتر.
آمن للمعاينة — يعرض خيارات الحجم واللون الوهمية في لوحة Framer عندما لا تتوفر بيانات اعتماد Shopify.

ضوابط الخصائص

جميع الضوابط متاحة في لوحة Framer اليمنى عند تحديد المكون.

Initial

الخاصية	النوع	الافتراضي	الوصف
Initial	نص	`""`	قيمة الفلتر الافتراضية المحددة مسبقًا عند تحميل المكون لأول مرة. اتركها فارغة لعرض جميع المنتجات افتراضيًا.

Label

الخاصية	النوع	الافتراضي	الوصف
Label	نص	`Filter by Variant`	النص المعروض فوق أزرار الفلتر عند تفعيل Show Label.

Show Label

الخاصية	النوع	الافتراضي	الوصف
Show Label	منطقي	`true`	إظهار أو إخفاء التسمية فوق أزرار الفلتر.

Product Limit

الخاصية	النوع	الافتراضي	الوصف
Product Limit	رقم	`50`	عدد المنتجات التي يتم جلبها لكل صفحة من Shopify. ينطبق فقط عند تعطيل Fetch All Variants. النطاق: 1–250.

Variants Per Product

الخاصية	النوع	الافتراضي	الوصف
Variants Per Product	رقم	`250`	الحد الأقصى لعدد المتغيرات التي يتم جلبها لكل منتج. الحد الأقصى لـ Shopify هو 250.

Fetch All Variants

الخاصية	النوع	الافتراضي	الوصف
Fetch All Variants	منطقي	`false`	عند التفعيل، يتنقل المكون عبر جميع المنتجات في متجر Shopify (حتى 100 صفحة). عند التعطيل، يُجلَب فقط الدفعة الأولى من المنتجات (حتى Product Limit). فعّله للكتالوجات الكبيرة.

Enable Multi-Select

الخاصية	النوع	الافتراضي	الوصف
Enable Multi-Select	منطقي	`true`	عند التفعيل، يمكن للمستخدمين تحديد قيم فلتر متعددة في آنٍ واحد. عند التعطيل، يلغي تحديد قيمة جديدة القيمة السابقة. النقر على القيمة النشطة يمسحها دائمًا.

Filter by Product ID

الخاصية	النوع	الافتراضي	الوصف
Filter by Product ID	نص	`""`	اختياري. أدخل معرّف منتج Shopify لتقييد خيارات المتغيرات على منتج واحد فقط. اتركه فارغًا لعرض الخيارات من جميع المنتجات.

Layout

الخاصية	النوع	الافتراضي	الوصف
Layout	قائمة	`Row`	ترتيب أزرار الفلتر أفقيًا (`Row`) أو عموديًا (`Column`). تلتف الأزرار إلى سطر جديد عند تجاوزها العرض المتاح في وضع `Row`.

Gap

الخاصية	النوع	الافتراضي	الوصف
Gap	رقم	`8`	المسافة بين أزرار الفلتر.

Styles

يتحكم في المظهر البصري لأزرار الفلتر.

الخاصية	النوع	الافتراضي	الوصف
Font	خط	—	الطباعة لجميع أزرار الفلتر.
Selected Color	لون	`#fff`	لون نص زر الفلتر النشط (المحدد).
Unselected Text Color	لون	`#333`	لون نص أزرار الفلتر غير النشطة.
Selected Background Color	لون	`#1976d2`	لون خلفية زر الفلتر النشط.
Unselected Background Color	لون	`#fff`	لون خلفية أزرار الفلتر غير النشطة.
Disabled Text Color	لون	—	لون النص لأي حالة معطّلة.
Border Radius	رقم	`8`	يجعل زوايا أزرار الفلتر مستديرة.
Box Shadow	نص	`none`	ظل CSS مطبق على أزرار الفلتر (مثال: `0 2px 4px rgba(0,0,0,0.1)`).
Border	كائن	`1px solid rgba(0,0,0,0.12)`	الحدود المطبقة على أزرار الفلتر. قابل للتكوين عبر `borderWidth` و`borderStyle` و`borderColor`.
Padding	رقم	`8`	المسافة الداخلية لكل زر فلتر.

ملاحظات

يتطلب هذا المكون تعيين window.DOMAIN وwindow.ACCESSTOKEN عالميًا على الصفحة لجلب البيانات المباشرة من Shopify. بدونها، يعرض خيارات الحجم واللون الوهمية لمعاينة اللوحة.
تُحفظ حالة الفلتر في localStorage تحت مفتاحين: variantFilter (الوسوم المحددة) وvariantFilterProductIds (معرّفات المنتجات المطابقة). يمكن لأي مكون آخر في الصفحة قراءة هذين المفتاحين لتطبيق الفلتر.
يطلق المكون حدث storage على window في كل مرة يتغير فيها الفلتر، حتى تتحدث مكونات قائمة المنتجات بشكل تفاعلي دون إعادة تحميل الصفحة.
منطق AND/OR: تُجمَع قيم متعددة ضمن نفس الخيار (مثل حجمين) بـ OR. تُجمَع القيم عبر خيارات مختلفة (مثل حجم ولون) بـ AND.
في وضع Fetch All Variants، يتنقل المكون عبر حتى 100 صفحة من المنتجات. قد يستغرق هذا لحظة عند التحميل الأول للكتالوجات الكبيرة جدًا.

​فلتر حسب المتغير

​ما الذي يفعله

​ضوابط الخصائص

​Initial

​Label

​Show Label

​Product Limit

​Variants Per Product

​Fetch All Variants

​Enable Multi-Select

​Filter by Product ID

​Layout

​Gap

​Styles

​ملاحظات