> ## 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.

# متحكم ترتيب الأسعار

![معاينة مرتّب الأسعار](https://raw.githubusercontent.com/thedesignmvp/framerfy-assets/refs/heads/main/docs/Price%20Sort%20Controller.png)

# متحكم ترتيب الأسعار

مكون قائمة منسدلة لترتيب الأسعار لـ Framer يحفظ ترتيب الفرز النشط في `sessionStorage` ويبث حدث تخزين لمكون قائمة المنتجات لإعادة ترتيب نتائجه بشكل تفاعلي.

***

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

يعرض **متحكم ترتيب الأسعار** قائمة منسدلة أصلية منسقة (`<select>`) مع ثلاثة خيارات فرز ثابتة: الموصى به، السعر من الأدنى للأعلى، والسعر من الأعلى للأدنى. عند تغيير المستخدم للتحديد، يحفظ المكون القيمة في `sessionStorage` ويطلق حدث `storage` — مما يتيح لشبكة المنتجات في نفس الصفحة إعادة الترتيب بشكل تفاعلي دون إعادة تحميل الصفحة.

السلوكيات الرئيسية:

* **ثلاثة خيارات فرز** — الموصى به (الترتيب الافتراضي لـ CMS)، السعر: من الأدنى للأعلى، والسعر: من الأعلى للأدنى. هذه الخيارات ثابتة وغير قابلة للتخصيص.
* **يحفظ التحديد في** `sessionStorage` — تُحفظ قيمة الفرز النشط تحت المفتاح `priceSort` وتُستعاد عند تحميل الصفحة ضمن نفس جلسة المتصفح.
* **يبث أحداث التخزين** — يطلق حدث `storage` على `window` عند تغيير الفرز، حتى يتمكن مكون قائمة المنتجات من الاستماع وإعادة الترتيب بشكل تفاعلي.
* **أيقونة سهم مخصصة** — يُخفى سهم القائمة الأصلية ويُستبدل بسهم SVG مخصص يمكن تخصيص لونه وحجمه.
* **تسمية اختيارية** — يمكن عرض تسمية نصية فوق القائمة المنسدلة مع التحكم الكامل في الطباعة واللون.

***

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

جميع الضوابط متاحة في لوحة Framer اليمنى عند تحديد المكون. تُجمَّع في ستة أقسام: **Initial**، **Label**، **Container**، **Border**، **Text**، و**Icon**.

### Initial

| الخاصية     | النوع | الافتراضي     | الوصف                                                                                                                                                                                                          |
| :---------- | :---- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Initial** | قائمة | `Recommended` | ترتيب الفرز المحدد افتراضيًا عند التحميل الأول. الخيارات: `Recommended` (الترتيب الافتراضي لـ CMS)، `Low → High`، `High → Low`. إذا كانت قيمة محفوظة في `sessionStorage`، فإنها تأخذ الأولوية على هذا الإعداد. |

### Label

يتحكم في التسمية النصية المعروضة فوق القائمة المنسدلة.

| الخاصية   | النوع | الافتراضي | الوصف                                    |
| :-------- | :---- | :-------- | :--------------------------------------- |
| **Text**  | نص    | `Sort`    | نص التسمية المعروض فوق القائمة المنسدلة. |
| **Show**  | منطقي | `true`    | إظهار أو إخفاء التسمية.                  |
| **Font**  | خط    | `16px`    | الطباعة لنص التسمية.                     |
| **Color** | لون   | `#181A2C` | لون نص التسمية.                          |
| **Gap**   | رقم   | `4`       | المسافة بين التسمية والقائمة المنسدلة.   |

### Container

يتحكم في الصندوق الخارجي للقائمة المنسدلة.

| الخاصية        | النوع | الافتراضي | الوصف                                                                                 |
| :------------- | :---- | :-------- | :------------------------------------------------------------------------------------ |
| **Padding**    | رقم   | `8`       | المسافة الداخلية للقائمة المنسدلة. يتحكم أيضًا في الحشو الأيمن المحجوز لأيقونة السهم. |
| **Radius**     | رقم   | `8`       | يجعل زوايا القائمة المنسدلة مستديرة.                                                  |
| **Background** | لون   | `white`   | لون خلفية القائمة المنسدلة.                                                           |

### Border

يتحكم في الحدود حول القائمة المنسدلة.

| الخاصية   | النوع | الافتراضي          | الوصف                                                      |
| :-------- | :---- | :----------------- | :--------------------------------------------------------- |
| **Width** | رقم   | `1`                | سُمك الحدود بالبكسل. اضبط على `0` لإزالة الحدود.           |
| **Style** | قائمة | `Solid`            | نمط الحدود. الخيارات: `Solid`، `Dashed`، `Dotted`، `None`. |
| **Color** | لون   | `rgba(0,0,0,0.12)` | لون الحدود.                                                |

### Text

يتحكم في طباعة خيارات القائمة المنسدلة.

| الخاصية   | النوع | الافتراضي         | الوصف                                      |
| :-------- | :---- | :---------------- | :----------------------------------------- |
| **Font**  | خط    | خط النظام، `14px` | الطباعة للنص داخل خيارات القائمة المنسدلة. |
| **Color** | لون   | `#000000`         | لون نص خيارات القائمة المنسدلة.            |

### Icon

يتحكم في أيقونة السهم المخصصة على الجانب الأيمن من القائمة المنسدلة.

| الخاصية   | النوع | الافتراضي | الوصف                                            |
| :-------- | :---- | :-------- | :----------------------------------------------- |
| **Color** | لون   | `#000000` | لون تعبئة أيقونة السهم.                          |
| **Size**  | رقم   | `20`      | عرض وارتفاع أيقونة السهم بالبكسل. النطاق: 12–32. |

## ملاحظات

* تُحفظ قيمة الفرز في `sessionStorage` تحت المفتاح `priceSort`. تستمر طوال جلسة المتصفح لكنها تُمسح عند إغلاق التبويب.
* يطلق المكون حدث `storage` على `window` عند تغيير الفرز. يجب على مكون قائمة المنتجات الاستماع لهذا الحدث وقراءة `sessionStorage.getItem("priceSort")` لتطبيق الترتيب الجديد.
* خيارات الفرز الثلاثة (Recommended، Low → High، High → Low) مُشفّرة ثابتة ولا يمكن تغييرها من لوحة Framer.