مكون إجمالي عربة التسوق في الوقت الفعلي لـ 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¥، AUDA$، CADC$، CHFCHF، SEKkr، NZDNZ$، SGDS$، HKDHK$، KRW₩، ZARR، RUB₽، BRLR$، MXNMX$، AEDد.إ، SAR﷼.