Todos los componentes (204)

Resumen del pedido

Comercio · OrderSummary · .amset-order

Qué es y cuándo usarlo

El resumen de un pedido o de un carrito: una fila por artículo con su cantidad y su importe, el subtotal, los ajustes (envío, cupones) y el total.

Cuándo usarlo

En el carrito, en el paso de pago y en la confirmación del pedido.
lines son los artículos (nombre, cantidad, precio por unidad y un detail opcional para la talla o el color); el importe de cada línea se calcula. currency es la moneda (EUR por defecto).
settings para lo que suma o resta al subtotal: un importe negativo es un descuento (se pinta como tal) y, con freeText, un importe cero se escribe con ese texto («Gratis»).
total cuando las cuentas las hace el servidor (impuestos, redondeos): se enseña ese número, no la suma que salga en el navegador.
hiddenTitle dentro de una Card que ya lleva el título: la tabla sigue teniendo nombre, pero no se ve dos veces.

Cuándo no

Pares sueltos de dato y valor (forma de pago, dirección, fecha): DataList.
Un listado de pedidos que se ordena, se filtra o se selecciona: Table.
Un precio suelto: Amount.

Teclado: no tiene nada que se pulse ni que se enfoque: es una tabla de lectura.

Accesibilidad: es una <table> de verdad. El title («Resumen del pedido» por defecto) es su <caption>, con el número de artículos (unidades, no líneas); las cabeceras «Artículo», «Cantidad» e «Importe» se oyen aunque no se vean; cada línea tiene su cabecera de fila, y el subtotal, los ajustes y el total van en el <tfoot>. Sin líneas no pinta una tabla vacía: dice el texto de empty («El carrito está vacío»).

Contexto: el idioma de LocaleProvider (o de AmsetProvider) decide cómo se escriben los importes; sin proveedor, es-ES.

Aspecto fino: variables CSS --amset-order-*: -detail, -font, -row-padding, -title, -total. El tamaño mueve el relleno de cada linea y los cuerpos de letra, incluido el del total.

Cómo se ve

Tu pedido3 artículos
Artículo	Cantidad	Importe
Camiseta tecnica	×2	49,80 €
Botella termica	×1	18,40 €
Subtotal		68,20 €
Total		68,20 €

<OrderSummary
  title="Tu pedido"
  lines={[
    { key: 'a', name: 'Camiseta tecnica', quantity: 2, price: 24.9 },
    { key: 'b', name: 'Botella termica', quantity: 1, price: 18.4 },
  ]}
/>

Props

Se importa con import { OrderSummary } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`lines`obligatoria	`readonly OrderLine[]`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`currency`	`string`	—
`empty`	`string`	—
`hiddenTitle`	`boolean`	El titulo solo para el lector de pantalla. Para cuando el resumen va dentro de una tarjeta que ya lo titula: la tabla necesita su nombre, pero verlo dos veces sobra.
`settings`	`readonly OrderAdjustment[]`	—
`size`	`"sm" \| "md" \| "lg"`	—
`title`	`string`	Titulo del bloque. Es lo que nombra la tabla.
`total`	`number`	Total dado desde fuera, cuando lo calcula el servidor (impuestos, redondeos).

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-order-row-padding`	`var(--amset-space-2) 0`
`--amset-order-title`	`var(--amset-text-base)`
`--amset-order-font`	`var(--amset-text-sm)`
`--amset-order-detail`	`var(--amset-text-xs)`
`--amset-order-total`	`var(--amset-text-lg)`

Cómo se cambia

.amset-order {
  --amset-order-row-padding: ...;
  --amset-order-title: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: