مكون قائمة عناصر عربة التسوق التفاعلي بالكامل لـ 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) | الظل على حاوية الكمية. |
+ و− الفردية:
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
| Padding | حشو | — | المسافة الداخلية لكل زر. |
| Border | حدود | 1px solid rgba(0,0,0,0.5) | حدود كل زر. |
| Border Radius | نصف القطر | — | استدارة زوايا كل زر. |
| Background | لون | #fff | لون خلفية كل زر. |
| Icon Color | لون | #000 | لون أيقونتي الجمع والطرح. |
| Icon Size | رقم (بكسل) | 16 | حجم أيقونتي الجمع والطرح. |
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
| 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 | لون نص تسميات مفتاح المتغير. |
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 أثناء التصميم.