> ## 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/Cart%20State%20Controller.png)

مبدّل رؤية واعٍ بعربة التسوق لـ Framer يعرض أحد مكونين اعتمادًا على ما إذا كانت عربة التسوق تحتوي على عناصر أم فارغة.

***

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

يعرض **متحكم حالة عربة التسوق** بشكل مشروط أحد مكونين فرعيين بناءً على حالة عربة التسوق الحالية. صُمِّم لحالات الاستخدام كإظهار أيقونة عربة تسوق ممتلئة عند وجود عناصر وأيقونة عربة تسوق فارغة عند مسحها — أو تبديل أقسام UI كاملة بناءً على حالة عربة التسوق.

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

* **يتبدل بين حالتين** — يعرض فتحة **Filled** عندما تحتوي عربة التسوق على عنصر واحد أو أكثر، وفتحة **Empty** عندما تكون عربة التسوق فارغة أو لم تُحمَّل بعد.
* **يقرأ عربة التسوق من** `localStorage` — عند التحميل، يقرأ المفتاح `cart` من `localStorage` لتحديد الحالة الأولية.
* **يتحدث في الوقت الفعلي** — يستمع لحدث `cartUpdated` المخصص على `window`. عندما يطلق أي مكون آخر هذا الحدث بعد تعديل عربة التسوق، يتبدل المتحكم في حالته المعروضة فورًا دون إعادة تحميل الصفحة.
* **يمد المكون الفرعي للملء** — يعيّن تلقائيًا عرض وارتفاع أول عنصر فرعي إلى `100%` حتى يملأ الحاوية بغض النظر عن حجم المكون الفرعي نفسه.

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

| الخاصية    | النوع     | الوصف                                                              |
| :--------- | :-------- | :----------------------------------------------------------------- |
| **Filled** | نسخة مكون | مكون Framer المعروض عندما تحتوي عربة التسوق على عنصر واحد أو أكثر. |
| **Empty**  | نسخة مكون | مكون Framer المعروض عندما تكون عربة التسوق فارغة.                  |

## ملاحظات

* تقبل كلتا الفتحتين أي مكون Framer — متغيرات الأيقونة وأقسام UI الكاملة والعناصر المتحركة، إلخ.
* يعتمد التبديل على عدد **عناصر السطر** في مصفوفة عربة التسوق، وليس الكمية الإجمالية. مصفوفة بإدخال واحد تُعدّ ممتلئة حتى لو كانت كميتها أكبر من `1`.
* يجب على أي مكون يعدّل عربة التسوق إطلاق حدث `cartUpdated` على `window` بعد الكتابة في `localStorage` حتى يتفاعل المتحكم — وإلا سيعكس فقط الحالة من تحميل الصفحة الأولي.
* حتى تُقرأ `localStorage` عند التحميل، تكون `items` فارغة وتُعرض فتحة **Empty** افتراضيًا.