> ## 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%20Item%20Counter.png)

مكون خفيف الوزن لـ Framer يعرض عدد العناصر الموجودة حاليًا في عربة التسوق من خلال القراءة من `localStorage` والتحديث في الوقت الفعلي عند تغيير عربة التسوق.

***

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

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

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

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

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

| الخاصية   | النوع | الافتراضي | الوصف                                            |
| :-------- | :---- | :-------- | :----------------------------------------------- |
| **Font**  | خط    | `12px`    | الطباعة لنص العداد (العائلة، الحجم، الوزن، إلخ). |
| **Color** | لون   | `#181A2C` | لون نص رقم العداد.                               |

## ملاحظات

* يعرض العداد عدد **عناصر السطر** في مصفوفة عربة التسوق، وليس الكمية الإجمالية. إذا أُضيف نفس المنتج مرتين كإدخالات منفصلة، سيُظهر العداد `2`.
* يجب تخزين عربة التسوق في `localStorage` تحت المفتاح `cart` كمصفوفة JSON. يجب على أي مكون يعدّل عربة التسوق إطلاق حدث `cartUpdated` على `window` بعد الكتابة في `localStorage` حتى يتحدث العداد — وإلا سيعكس فقط الحالة من تحميل الصفحة الأولي.
* لا يعرض المكون أي حالة احتياطية أو صفرية — إذا لم يكن هناك مفتاح `cart` في `localStorage`، لا يعرض العداد شيئًا.