> ## 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%20Product%20List.png)

مكون قائمة عناصر عربة التسوق التفاعلي بالكامل لـ Framer الذي يقرأ من `localStorage`، ويعرض كل عنصر مع صورته وعنوانه وخيارات متغيراته وسعره وضوابط الكمية، ويدعم زيادة الكمية وتقليلها وإزالة العناصر في الوقت الفعلي.

***

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

يعرض **قائمة منتجات عربة التسوق** جميع العناصر الموجودة حاليًا في عربة التسوق كبطاقات فردية. تُظهر كل بطاقة صورة المنتج والعنوان وخيارات المتغير المحدد والسعر ومحرك الكمية (+/−) وأيقونة سلة المهملات لإزالة العنصر. جميع التفاعلات تكتب مباشرة في `localStorage` وتطلق حدث `cartUpdated` لإبقاء مكونات عربة التسوق الأخرى متزامنة.

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

* **يقرأ عربة التسوق من** `localStorage` — عند التحميل، يقرأ المفتاح `cart` ويعرض بطاقة لكل عنصر.
* **زيادة/تقليل الكمية** — أزرار `+` و`−` تحدّث كمية العنصر. الحد الأدنى للكمية هو `1`؛ لا ينزل زر `−` دون ذلك.
* **إزالة العنصر** — أيقونة سلة المهملات تزيل العنصر من عربة التسوق بالكامل.
* **يكتب في** `localStorage` — كل إجراء تعديل أو حذف يحفظ العربة المحدَّثة في `localStorage` ويطلق حدث `cartUpdated` حتى يتحدث عداد العناصر ومتحكم الحالة وباقي مكونات عربة التسوق فورًا.
* **بيانات نموذجية آمنة للمعاينة** — عند خلو عربة التسوق (مثل على لوحة Framer)، يعرض المكون خمسة عناصر نموذجية حتى يبقى التخطيط مرئيًا أثناء التصميم.
* **يتحدث في الوقت الفعلي** — يستمع لأحداث `cartUpdated` من المكونات الأخرى حتى تبقى القائمة متزامنة إذا عُدِّلت عربة التسوق في مكان آخر في الصفحة.

***

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

جميع الضوابط متاحة في لوحة Framer اليمنى عند تحديد المكون. تُجمَّع في أربعة أقسام: **Outer Container**، **Card**، **Image**، و**Content**.

***

### Outer Container

| الخاصية               | النوع      | الوصف                                                 |
| :-------------------- | :--------- | :---------------------------------------------------- |
| **Gap between cards** | رقم (بكسل) | المسافة الرأسية بين بطاقات عناصر عربة التسوق الفردية. |

***

### Card

يتحكم في مظهر كل بطاقة عنصر في عربة التسوق.

| الخاصية           | النوع      | الافتراضي                          | الوصف                                           |
| :---------------- | :--------- | :--------------------------------- | :---------------------------------------------- |
| **Padding**       | حشو        | —                                  | المسافة الداخلية لكل بطاقة.                     |
| **Border**        | حدود       | `1px solid rgba(0,0,0,0.5)`        | نمط حدود كل بطاقة.                              |
| **Border Radius** | نصف القطر  | —                                  | استدارة زوايا كل بطاقة.                         |
| **Shadow**        | ظل         | `0px 1px 2px 0px rgba(0,0,0,0.25)` | الظل المطبق على كل بطاقة.                       |
| **Background**    | لون        | `#fff`                             | لون خلفية كل بطاقة.                             |
| **Gap**           | رقم (بكسل) | —                                  | المسافة الأفقية بين صورة المنتج ومنطقة المحتوى. |

***

### Image

يتحكم في صورة المنتج على الجانب الأيسر من كل بطاقة.

| الخاصية           | النوع      | الافتراضي | الوصف                                                           |
| :---------------- | :--------- | :-------- | :-------------------------------------------------------------- |
| **Width**         | رقم (بكسل) | `180`     | عرض صورة المنتج.                                                |
| **Height**        | رقم (بكسل) | `180`     | ارتفاع صورة المنتج.                                             |
| **Border Radius** | نصف القطر  | —         | استدارة زوايا صورة المنتج.                                      |
| **Type**          | قائمة      | `Contain` | كيفية ملء الصورة لمربعها. الخيارات: `Contain`، `Cover`، `Fill`. |

***

### Content

يتحكم في جميع النصوص والتخطيط والعناصر التفاعلية في منطقة المحتوى اليمنى من كل بطاقة.

***

#### Quantity

يتحكم في محرّك الكمية (− / القيمة / +).

**Container** — الحاوية الواحدة لجميع العناصر الثلاثة:

| الخاصية           | النوع      | الافتراضي                          | الوصف                             |
| :---------------- | :--------- | :--------------------------------- | :-------------------------------- |
| **Gap**           | رقم (بكسل) | `4`                                | المسافة بين الأزرار وقيمة الكمية. |
| **Background**    | لون        | `#000`                             | لون خلفية حاوية الكمية.           |
| **Padding**       | حشو        | —                                  | المسافة الداخلية لحاوية الكمية.   |
| **Border**        | حدود       | `1px solid rgba(0,0,0,0.5)`        | حدود حاوية الكمية.                |
| **Border Radius** | نصف القطر  | —                                  | استدارة زوايا حاوية الكمية.       |
| **Shadow**        | ظل         | `0px 1px 2px 0px rgba(0,0,0,0.25)` | الظل على حاوية الكمية.            |

**Buttons** — أزرار `+` و`−` الفردية:

| الخاصية           | النوع      | الافتراضي                   | الوصف                     |
| :---------------- | :--------- | :-------------------------- | :------------------------ |
| **Padding**       | حشو        | —                           | المسافة الداخلية لكل زر.  |
| **Border**        | حدود       | `1px solid rgba(0,0,0,0.5)` | حدود كل زر.               |
| **Border Radius** | نصف القطر  | —                           | استدارة زوايا كل زر.      |
| **Background**    | لون        | `#fff`                      | لون خلفية كل زر.          |
| **Icon Color**    | لون        | `#000`                      | لون أيقونتي الجمع والطرح. |
| **Icon Size**     | رقم (بكسل) | `16`                        | حجم أيقونتي الجمع والطرح. |

**Text** — قيمة الكمية المعروضة بين الزرين:

| الخاصية   | النوع | الافتراضي | الوصف                |
| :-------- | :---- | :-------- | :------------------- |
| **Font**  | خط    | —         | الطباعة لرقم الكمية. |
| **Color** | لون   | `#fff`    | لون نص رقم الكمية.   |

***

#### Trash Icon

يتحكم في زر إزالة العنصر.

| الخاصية           | النوع      | الافتراضي | الوصف                                     |
| :---------------- | :--------- | :-------- | :---------------------------------------- |
| **Background**    | لون        | `#000`    | لون خلفية حاوية أيقونة سلة المهملات.      |
| **Color**         | لون        | `#fff`    | لون أيقونة سلة المهملات.                  |
| **Size**          | رقم (بكسل) | `16`      | حجم أيقونة سلة المهملات.                  |
| **Padding**       | حشو        | —         | المسافة الداخلية حول أيقونة سلة المهملات. |
| **Border Radius** | نصف القطر  | —         | استدارة زوايا حاوية أيقونة سلة المهملات.  |

#### Title

| الخاصية   | النوع | الافتراضي | الوصف                  |
| :-------- | :---- | :-------- | :--------------------- |
| **Font**  | خط    | —         | الطباعة لعنوان المنتج. |
| **Color** | لون   | `#000`    | لون نص عنوان المنتج.   |

#### Price

| الخاصية       | النوع | الافتراضي | الوصف                                                                                  |
| :------------ | :---- | :-------- | :------------------------------------------------------------------------------------- |
| **Font**      | خط    | —         | الطباعة لسعر المنتج.                                                                   |
| **Color**     | لون   | `#000`    | لون نص سعر المنتج.                                                                     |
| **Alignment** | قائمة | `Center`  | المحاذاة الرأسية للسعر نسبة إلى العنوان. الخيارات: `Center`، `Flex Start`، `Flex End`. |

#### Variant

يتحكم في تسميات خيار المتغير (مثال: `Color: Black`) المعروضة تحت عنوان المنتج.

**Key** — اسم الخيار (مثال: `Color`، `Size`):

| الخاصية   | النوع | الافتراضي | الوصف                          |
| :-------- | :---- | :-------- | :----------------------------- |
| **Font**  | خط    | —         | الطباعة لتسميات مفتاح المتغير. |
| **Color** | لون   | `#000`    | لون نص تسميات مفتاح المتغير.   |

**Value** — قيمة الخيار (مثال: `Black`، `Large`):

| الخاصية   | النوع | الافتراضي | الوصف                 |
| :-------- | :---- | :-------- | :-------------------- |
| **Font**  | خط    | —         | الطباعة لقيم المتغير. |
| **Color** | لون   | `#000`    | لون نص قيم المتغير.   |

#### Spacing

| الخاصية      | النوع | الوصف                                                                                                                   |
| :----------- | :---- | :---------------------------------------------------------------------------------------------------------------------- |
| **Padding**  | حشو   | المسافة الداخلية لمنطقة المحتوى بأكملها.                                                                                |
| **Gap**      | مسافة | المسافة بين العنوان وتسميات المتغير والسعر.                                                                             |
| **Main Gap** | مسافة | المسافة بين كتلة المحتوى العلوية (العنوان والمتغيرات والسعر) وضوابط التحكم السفلية (محرّك الكمية وأيقونة سلة المهملات). |

## ملاحظات

* يجب أن يتضمن كل عنصر في عربة التسوق في `localStorage` الحقول: `variantId`، `title`، `price.amount`، `quantity`، `selectedOptions`، واختياريًا `image`. إذا كانت `image` مفقودة، تُعرض صورة عنصر نائب.
* كل تفاعل (زيادة، تقليل، حذف) يطلق حدث `cartUpdated` على `window` بعد الحفظ في `localStorage`، مما يُبقي عداد عناصر عربة التسوق ومتحكم حالة عربة التسوق متزامنَين تلقائيًا.
* الحد الأدنى للكمية لكل عنصر هو `1`. النقر على `−` عند الكمية `1` لا يفعل شيئًا.
* عند خلو عربة التسوق، تُعرض خمسة عناصر نموذجية للمعاينة حتى يبقى التخطيط مرئيًا في لوحة Framer أثناء التصميم.