> ## Documentation Index
> Fetch the complete documentation index at: https://docs.framerfy.ae/llms.txt
> Use this file to discover all available pages before exploring further.

# غلاف CMS

<Frame>
  <img src="https://mintcdn.com/thedesignmvp/6uuDwKK0lQ6CrwqP/images/CMSWrapper-1.webp?fit=max&auto=format&n=6uuDwKK0lQ6CrwqP&q=85&s=cd2a6b5cb1791fccea9c0ef85f4dfe6d" alt="غلاف CMS" width="1280" height="720" data-path="images/CMSWrapper-1.webp" />
</Frame>

متحكم قائمة منتجات مبني على DOM لـ Framer يضيف التصفّح الصفحي وترتيب الأسعار وفلتر المتغيرات فوق أي مجموعة Framer CMS — مع دعم التخطيط المتجاوب لأجهزة سطح المكتب والأجهزة اللوحية والهواتف المحمولة.

***

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

يلتف **غلاف 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. يمكن تفعيله بإلغاء التعليق على ضوابط الخصائص ذات الصلة في المصدر.