متحكم ترتيب الأسعار
مكون قائمة منسدلة لترتيب الأسعار لـ Framer يحفظ ترتيب الفرز النشط فيsessionStorage ويبث حدث تخزين لمكون قائمة المنتجات لإعادة ترتيب نتائجه بشكل تفاعلي.
ما الذي يفعله
يعرض متحكم ترتيب الأسعار قائمة منسدلة أصلية منسقة (<select>) مع ثلاثة خيارات فرز ثابتة: الموصى به، السعر من الأدنى للأعلى، والسعر من الأعلى للأدنى. عند تغيير المستخدم للتحديد، يحفظ المكون القيمة في sessionStorage ويطلق حدث storage — مما يتيح لشبكة المنتجات في نفس الصفحة إعادة الترتيب بشكل تفاعلي دون إعادة تحميل الصفحة.
السلوكيات الرئيسية:
- ثلاثة خيارات فرز — الموصى به (الترتيب الافتراضي لـ CMS)، السعر: من الأدنى للأعلى، والسعر: من الأعلى للأدنى. هذه الخيارات ثابتة وغير قابلة للتخصيص.
- يحفظ التحديد في
sessionStorage— تُحفظ قيمة الفرز النشط تحت المفتاحpriceSortوتُستعاد عند تحميل الصفحة ضمن نفس جلسة المتصفح. - يبث أحداث التخزين — يطلق حدث
storageعلىwindowعند تغيير الفرز، حتى يتمكن مكون قائمة المنتجات من الاستماع وإعادة الترتيب بشكل تفاعلي. - أيقونة سهم مخصصة — يُخفى سهم القائمة الأصلية ويُستبدل بسهم SVG مخصص يمكن تخصيص لونه وحجمه.
- تسمية اختيارية — يمكن عرض تسمية نصية فوق القائمة المنسدلة مع التحكم الكامل في الطباعة واللون.
ضوابط الخصائص
جميع الضوابط متاحة في لوحة Framer اليمنى عند تحديد المكون. تُجمَّع في ستة أقسام: Initial، Label، Container، Border، Text، وIcon.Initial
Label
يتحكم في التسمية النصية المعروضة فوق القائمة المنسدلة.Container
يتحكم في الصندوق الخارجي للقائمة المنسدلة.Border
يتحكم في الحدود حول القائمة المنسدلة.Text
يتحكم في طباعة خيارات القائمة المنسدلة.Icon
يتحكم في أيقونة السهم المخصصة على الجانب الأيمن من القائمة المنسدلة.ملاحظات
- تُحفظ قيمة الفرز في
sessionStorageتحت المفتاحpriceSort. تستمر طوال جلسة المتصفح لكنها تُمسح عند إغلاق التبويب. - يطلق المكون حدث
storageعلىwindowعند تغيير الفرز. يجب على مكون قائمة المنتجات الاستماع لهذا الحدث وقراءةsessionStorage.getItem("priceSort")لتطبيق الترتيب الجديد. - خيارات الفرز الثلاثة (Recommended، Low → High، High → Low) مُشفّرة ثابتة ولا يمكن تغييرها من لوحة Framer.