مكون قائمة عناصر عربة التسوق التفاعلي بالكامل لـ Framer الذي يقرأ من localStorage، ويعرض كل عنصر مع صورته وعنوانه وخيارات متغيراته وسعره وضوابط الكمية، ويدعم زيادة الكمية وتقليلها وإزالة العناصر في الوقت الفعلي.
ما الذي يفعله
يعرض قائمة منتجات عربة التسوق جميع العناصر الموجودة حاليًا في عربة التسوق كبطاقات فردية. تُظهر كل بطاقة صورة المنتج والعنوان وخيارات المتغير المحدد والسعر ومحرك الكمية (+/−) وأيقونة سلة المهملات لإزالة العنصر. جميع التفاعلات تكتب مباشرة فيlocalStorage وتطلق حدث cartUpdated لإبقاء مكونات عربة التسوق الأخرى متزامنة.
السلوكيات الرئيسية:
- يقرأ عربة التسوق من
localStorage— عند التحميل، يقرأ المفتاحcartويعرض بطاقة لكل عنصر. - زيادة/تقليل الكمية — أزرار
+و−تحدّث كمية العنصر. الحد الأدنى للكمية هو1؛ لا ينزل زر−دون ذلك. - إزالة العنصر — أيقونة سلة المهملات تزيل العنصر من عربة التسوق بالكامل.
- يكتب في
localStorage— كل إجراء تعديل أو حذف يحفظ العربة المحدَّثة فيlocalStorageويطلق حدثcartUpdatedحتى يتحدث عداد العناصر ومتحكم الحالة وباقي مكونات عربة التسوق فورًا. - بيانات نموذجية آمنة للمعاينة — عند خلو عربة التسوق (مثل على لوحة Framer)، يعرض المكون خمسة عناصر نموذجية حتى يبقى التخطيط مرئيًا أثناء التصميم.
- يتحدث في الوقت الفعلي — يستمع لأحداث
cartUpdatedمن المكونات الأخرى حتى تبقى القائمة متزامنة إذا عُدِّلت عربة التسوق في مكان آخر في الصفحة.
ضوابط الخصائص
جميع الضوابط متاحة في لوحة Framer اليمنى عند تحديد المكون. تُجمَّع في أربعة أقسام: Outer Container، Card، Image، وContent.Outer Container
Card
يتحكم في مظهر كل بطاقة عنصر في عربة التسوق.Image
يتحكم في صورة المنتج على الجانب الأيسر من كل بطاقة.Content
يتحكم في جميع النصوص والتخطيط والعناصر التفاعلية في منطقة المحتوى اليمنى من كل بطاقة.Quantity
يتحكم في محرّك الكمية (− / القيمة / +). Container — الحاوية الواحدة لجميع العناصر الثلاثة:
Buttons — أزرار
+ و− الفردية:
Text — قيمة الكمية المعروضة بين الزرين:
Trash Icon
يتحكم في زر إزالة العنصر.Title
Price
Variant
يتحكم في تسميات خيار المتغير (مثال:Color: Black) المعروضة تحت عنوان المنتج.
Key — اسم الخيار (مثال: Color، Size):
Value — قيمة الخيار (مثال:
Black، Large):
Spacing
ملاحظات
- يجب أن يتضمن كل عنصر في عربة التسوق في
localStorageالحقول:variantId،title،price.amount،quantity،selectedOptions، واختياريًاimage. إذا كانتimageمفقودة، تُعرض صورة عنصر نائب. - كل تفاعل (زيادة، تقليل، حذف) يطلق حدث
cartUpdatedعلىwindowبعد الحفظ فيlocalStorage، مما يُبقي عداد عناصر عربة التسوق ومتحكم حالة عربة التسوق متزامنَين تلقائيًا. - الحد الأدنى للكمية لكل عنصر هو
1. النقر على−عند الكمية1لا يفعل شيئًا. - عند خلو عربة التسوق، تُعرض خمسة عناصر نموذجية للمعاينة حتى يبقى التخطيط مرئيًا في لوحة Framer أثناء التصميم.