salla-order-totals-card
A summary card with the order's price breakdown: items total, options total, discounts, cash on delivery cost, shipping, tax, paid and remaining amounts, the final total and a refunded amount when the
A summary card with the order's price breakdown: items total, options total, discounts, cash on delivery cost, shipping,
tax, paid and remaining amounts, the final total and a refunded amount when there is one. Use it on the order details
page. Rows for values that are missing in the data are skipped. The breakdown is rendered as a description list
(dl, dt, dd) under an h2 heading.
Use it
In HTML or JSX, use the tag <salla-order-totals-card> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaOrderTotalsCard } from '@salla.sa/twilight-components-react/order-totals-card';Client-only. On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.
Example
import { SallaOrderTotalsCard } from '@salla.sa/twilight-components-react/order-totals-card';
export function Example() {
return (
<SallaOrderTotalsCard order='{"sub_total":{"amount":100,"currency":"SAR"},"total":{"amount":115,"currency":"SAR"},"tax":{"percent":15,"amount":{"amount":15,"currency":"SAR"}}}' />
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
order | order | The order totals, as an object or a JSON string. Money values use the shape { amount: number, currency: string }. Read keys: sub_total, options (array; the options total row shows only when it is not empty), options_total, discounts (array of { name, discount }; discount is printed as is, not formatted as money), cod_cost, shipping_cost, tax ({ percent, amount }), paid_amount, remaining_amount, total and refund_amount. Nothing but an empty wrapper is rendered when it is missing or is invalid JSON. Changing it re-renders the card. | Order | string |
salla-order-summary
Lists the digital items of an order on a thank-you page: gift card codes with a copy button, and downloadable files with a download link.
salla-orders
The logged-in customer's orders page: a table of orders (number, status, total, date) that loads more rows with a "load more" button.