متحكم ترتيب الأسعار
مكون قائمة منسدلة لترتيب الأسعار لـ 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.