فلتر حسب المتغير
مكون فلتر منتجات متصل بـ 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 صفحة من المنتجات. قد يستغرق هذا لحظة عند التحميل الأول للكتالوجات الكبيرة جدًا.