ملخص الطلب

تجريبي

احصل على Ritla UI

مجاميع السلة والدفع: المجموع الفرعي والتوصيل والضريبة والإجمالي، ورمز الخصم، وزرّ إتمام الشراء، وطرق الدفع المقبولة.

افتح في Figma

المعاينة

«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

أضف المكوّن
$ npx ritla add order-summary
ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/order-summary
الاعتماديات التي يضيفها
buttonfieldpayment-markprice
أو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

الاستخدام

order-summary.tsx

import { OrderSummary } from "@/components/ui/order-summary";<OrderSummary  lines={[    { label: "Subtotal (2 items)", amount: 640 },    { label: "Delivery", amount: 0 },    { label: "VAT (16%)", amount: 102.4 },  ]}  total={742.4}  onApplyPromo={applyPromo}  onCheckout={checkout}  payments={["visa", "mastercard", "apple-pay", "mada"]}/>

مرجع الخصائص

OrderSummary

الخاصية	النوع	الافتراضي	الوصف
`lines`	`{ label, amount?, value? }[]`	لا يوجد	الأسطر بالترتيب. `amount: 0` يُكتب «مجاني»، و`value` لأي نص آخر.
`total`	`number`	لا يوجد	الإجمالي، يُعلن بأدب حين يتغير.
`currency / fractionDigits`	`string / number`	`"JOD" / 2`	كما في Price.
`onApplyPromo`	`(code) => void`	لا يوجد	حقل رمز الخصم وزرّ «تطبيق». دونه لا يظهر الحقل.
`onCheckout / checkoutLabel`	`() => void / ReactNode`	لا يوجد	الزرّ الرئيسي («إتمام الشراء»). اتركه في صفحة الدفع نفسها، حيث للنموذج زرّ دفع.
`payments`	`PaymentMarkName[]`	لا يوجد	علامات الدفع المقبولة تحت الزرّ.
`note / title / headingLevel`	`…`	لا يوجد	سطر أخير، والعنوان ومستواه (افتراضيًا h2).

إمكانية الوصول

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Enter`	في حقل الرمز يطبّقه.

ARIA

aside باسم عنوانه، والأسطر قائمة وصف dl: كل اسم ومبلغه معًا.
الإجمالي منطقة aria-live="polite": تغيير الكمية في السلة يُسمع مرة واحدة.

ملاحظات العربية والاتجاه

ينعكس

الأسماء على اليمين والمبالغ على اليسار، وزرّ «تطبيق» بعد الحقل على اليسار.

لا ينعكس

المبالغ معزولة، وعلامات الدفع لا تنعكس أبدًا.

الأرقام: المبالغ تتبع numerals؛ النسبة في «ضريبة المبيعات (16%)» نص منك.
الخط العربي: body-18 Semibold للعنوان، numeric-16 Medium للمبالغ وnumeric-20 Semibold للإجمالي.