مبدّل رؤية واعٍ بعربة التسوق لـ Framer يعرض أحد مكونين اعتمادًا على ما إذا كانت عربة التسوق تحتوي على عناصر أم فارغة.
ما الذي يفعله
يعرض متحكم حالة عربة التسوق بشكل مشروط أحد مكونين فرعيين بناءً على حالة عربة التسوق الحالية. صُمِّم لحالات الاستخدام كإظهار أيقونة عربة تسوق ممتلئة عند وجود عناصر وأيقونة عربة تسوق فارغة عند مسحها — أو تبديل أقسام UI كاملة بناءً على حالة عربة التسوق. السلوكيات الرئيسية:- يتبدل بين حالتين — يعرض فتحة Filled عندما تحتوي عربة التسوق على عنصر واحد أو أكثر، وفتحة Empty عندما تكون عربة التسوق فارغة أو لم تُحمَّل بعد.
- يقرأ عربة التسوق من
localStorage— عند التحميل، يقرأ المفتاحcartمنlocalStorageلتحديد الحالة الأولية. - يتحدث في الوقت الفعلي — يستمع لحدث
cartUpdatedالمخصص علىwindow. عندما يطلق أي مكون آخر هذا الحدث بعد تعديل عربة التسوق، يتبدل المتحكم في حالته المعروضة فورًا دون إعادة تحميل الصفحة. - يمد المكون الفرعي للملء — يعيّن تلقائيًا عرض وارتفاع أول عنصر فرعي إلى
100%حتى يملأ الحاوية بغض النظر عن حجم المكون الفرعي نفسه.
ضوابط الخصائص
| الخاصية | النوع | الوصف |
|---|---|---|
| Filled | نسخة مكون | مكون Framer المعروض عندما تحتوي عربة التسوق على عنصر واحد أو أكثر. |
| Empty | نسخة مكون | مكون Framer المعروض عندما تكون عربة التسوق فارغة. |
ملاحظات
- تقبل كلتا الفتحتين أي مكون Framer — متغيرات الأيقونة وأقسام UI الكاملة والعناصر المتحركة، إلخ.
- يعتمد التبديل على عدد عناصر السطر في مصفوفة عربة التسوق، وليس الكمية الإجمالية. مصفوفة بإدخال واحد تُعدّ ممتلئة حتى لو كانت كميتها أكبر من
1. - يجب على أي مكون يعدّل عربة التسوق إطلاق حدث
cartUpdatedعلىwindowبعد الكتابة فيlocalStorageحتى يتفاعل المتحكم — وإلا سيعكس فقط الحالة من تحميل الصفحة الأولي. - حتى تُقرأ
localStorageعند التحميل، تكونitemsفارغة وتُعرض فتحة Empty افتراضيًا.