الانتقال إلى المحتوى الرئيسي
معاينة إجمالي عربة التسوق مكون إجمالي عربة التسوق في الوقت الفعلي لـ Framer يحسب ويعرض السعر المجمّع لجميع العناصر في عربة التسوق، مع رمز العملة والرمز الاختصاري الاختياريين.

ما الذي يفعله

يعرض السعر الإجمالي لعربة التسوق سطرًا واحدًا من النص يُظهر التكلفة الإجمالية لجميع العناصر الموجودة حاليًا في عربة التسوق. يضرب سعر كل عنصر في كميته، يجمعها، ويتحدث تلقائيًا كلما تغيرت عربة التسوق. السلوكيات الرئيسية:
  • يحسب الإجمالي — يجمع price.amount × quantity عبر جميع عناصر عربة التسوق ويعرض النتيجة.
  • يتحدث في الوقت الفعلي — يستمع لحدث cartUpdated على window ويعيد حساب الإجمالي فورًا كلما عُدِّلت عربة التسوق من قِبل أي مكون آخر.
  • رمز العملة والرمز الاختصاري — يعرض اختياريًا رمز العملة (مثال: ) قبل الإجمالي و/أو الرمز الاختصاري (مثال: INR) بعده. كلاهما مشتق من حقل currencyCode للعنصر الأول في عربة التسوق.
  • يعرض صفرًا افتراضيًا — يعرض 0 عندما تكون عربة التسوق فارغة.

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

جميع الضوابط متاحة في لوحة Framer اليمنى عند تحديد المكون. تُجمَّع في قسمين: Styles وFormat.

Styles

الخاصيةالنوعالافتراضيالوصف
Fontخط16pxالطباعة لنص السعر الإجمالي.
Colorلونلون نص السعر الإجمالي.

Format

الخاصيةالنوعالافتراضيالوصف
Show Symbolمنطقيfalseعند التفعيل، يعرض رمز العملة قبل الإجمالي (مثال: ، $). مشتق من currencyCode للعنصر الأول في عربة التسوق.
Show Codeمنطقيfalseعند التفعيل، يعرض الرمز الاختصاري للعملة بعد الإجمالي (مثال: INR، USD). مشتق من currencyCode للعنصر الأول في عربة التسوق.

ملاحظات

  • يُقرأ كلا رمز العملة والرمز الاختصاري من العنصر الأول في عربة التسوق. إذا كانت عربة التسوق تحتوي على عناصر بعملات مختلطة، ستُعرض فقط عملة العنصر الأول.
  • لا يُطبّق الإجمالي أي تنسيق عشري — يعرض الرقم المحسوب مباشرة. استخدم مكون سعر المنتج الديناميكي إذا كنت تحتاج التحكم في الكسور العشرية لكل متغير.
  • يجب على أي مكون يعدّل عربة التسوق إطلاق حدث cartUpdated على window بعد الكتابة في localStorage حتى يتحدث الإجمالي.
  • العملات المدعومة ورموزها: USD $، EUR ، GBP £، INR ، JPY ¥، CNY ¥، AUD A$، CAD C$، CHF CHF، SEK kr، NZD NZ$، SGD S$، HKD HK$، KRW ، ZAR R، RUB ، BRL R$، MXN MX$، AED د.إ، SAR .