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