ما الذي يفعله
يلتف غلاف CMS حول مكون مجموعة Framer CMS ويتحكم في العناصر المعروضة. يقرأ الأسعار ومعرّفات المنتجات مباشرة من DOM المعروض، ثم يتعامل مع التصفّح الصفحي والترتيب والتصفية بالكامل على الجانب العميل — دون الحاجة إلى خادم. السلوكيات الرئيسية:- التصفّح الصفحي — يقسّم القائمة الكاملة لعناصر CMS إلى صفحات ويعرض عناصر الصفحة الحالية فقط. أزرار السابق/التالي تتنقل بين الصفحات. يُظهر عداد الصفحات الصفحة الحالية والإجمالي، أو “لا توجد عناصر” عند تصفية جميع العناصر.
- ترتيب الأسعار — يقرأ المفتاح
priceSortمنsessionStorageويعيد ترتيب العناصر حسب السعر (من الأدنى للأعلى أو من الأعلى للأدنى) كلما تغير. يعمل مع مكون متحكم ترتيب الأسعار مباشرة. - فلتر المتغيرات — يقرأ المفتاح
variantFilterProductIdsمنlocalStorageويخفي أي عناصر CMS لا يكون معرّف منتجها في القائمة. يعمل مع مكون فلتر حسب المتغير مباشرة. - التخطيطات المتجاوبة — يقبل مكونات صفحات CMS منفصلة لسطح المكتب والأجهزة اللوحية والهواتف المحمولة. يتبدل بينها بناءً على عرض نقاط التوقف القابلة للتخصيص.
- التمرير عند تغيير الصفحة — بعد الانتقال إلى صفحة جديدة، يتمرر منفذ العرض تلقائيًا إلى أعلى القائمة مع إزاحة قابلة للتخصيص لمراعاة الرؤوس أو أشرطة التنقل الثابتة.
- التحديثات المباشرة — يستمع لأحداث
storageعلىwindowحتى تتفاعل القائمة فورًا كلما تغير ترتيب الفرز أو فلتر المتغير دون إعادة تحميل الصفحة. - استخراج السعر من DOM — يقرأ الأسعار من العناصر ذات الفئة
.framerfyPriceومعرّفات المنتجات من اسم الفئة الثاني على ذلك العنصر (مثال:framerfyPrice 8352533184673).
ضوابط الخصائص
جميع الضوابط متاحة في لوحة Framer اليمنى عند تحديد المكون.CMS Pages
Breakpoints
Pagination
ملاحظات
- يتطلب هذا المكون وجود مكون سعر المنتج الديناميكي داخل كل بطاقة CMS مع الفئة
framerfyPriceحتى يعمل ترتيب الأسعار والتصفية. بدونه، ستكون جميع العناصر بسعر0. - تُقرأ معرّفات المنتجات من اسم الفئة الثاني على العنصر
.framerfyPrice(مثال:<span class="framerfyPrice 8352533184673">). يتعامل مكون سعر المنتج الديناميكي مع هذا تلقائيًا عند ربط Product ID من CMS. - يتفاعل ترتيب الأسعار مع المفتاح
priceSortفيsessionStorage. اربط متحكم ترتيب الأسعار في نفس الصفحة لتشغيله. - يتفاعل فلتر المتغيرات مع المفتاح
variantFilterProductIdsفيlocalStorage. اربط فلتر حسب المتغير في نفس الصفحة لتشغيله. - عندما لا يكون هناك فلتر متغير نشط (مصفوفة
variantFilterProductIdsفارغة)، تُعرض جميع العناصر. - يُشغَّل فحص نقطة التوقف مرة واحدة عند التحميل باستخدام
window.innerWidth— لا يتبدل التخطيطات ديناميكيًا عند تغيير حجم المتصفح. - فلتر الأسعار عبر مدخلات الحد الأدنى/الأقصى مُنفَّذ في الكود لكنه معطّل حاليًا في لوحة Framer. يمكن تفعيله بإلغاء التعليق على ضوابط الخصائص ذات الصلة في المصدر.