Mini carrito
Cart Count es el botón de la cabecera con el número de artículos; Mini Cart es el cajón que abre.
El número nunca viaja en el HTML, así que es seguro detrás de una caché de página, y el cajón pide su contenido cada vez que se abre por el mismo motivo.
El cajón está hecho sobre un <dialog> nativo: el foco queda atrapado dentro,
Escape lo cierra y el foco vuelve al botón que lo abrió.
Sus opciones
El botón de la cabecera y el cajón que abre son dos componentes. Éstas son las del cajón, Mini Cart; el botón tiene página propia.
Props
| Prop | Tipo | Por defecto | Qué hace |
|---|---|---|---|
| Show while editing | sí / no | on | Sólo afecta al lienzo de Etch, nunca al sitio. Un cajón cerrado es display:none, así que sería invisible e inseleccionable mientras montas la página; con esto se dibuja donde aparece de verdad — pegado al borde, a toda altura y con su anchura real. Apágalo cuando esté a tu gusto y deja de tapar la página que estás editando. |
| Quantity stepper in each line | sí / no | on | Deja cambiar cuántos quiere cada quien sin salir del cajón. Los límites los sigue poniendo la tienda: el selector se para en el stock, y un producto que se vende de uno en uno no lo lleva. |
| Open when a product is added | sí / no | off | Enseña el cajón solo después de añadir al carrito, como confirmación. Se lleva el foco y tapa la página, así que déjalo apagado en una tienda donde se añaden varias cosas seguidas — el contador ya se actualiza por su cuenta. |
| Title | texto | Your cart | |
| Close button label | texto | Close | |
| View cart label | texto | View cart | |
| Checkout label | texto | Checkout | |
| Subtotal label | texto | Subtotal | |
| Undo label | texto | Undo | |
| Colors → Background | texto | var(--fe-woo-surface, #ffffff) | |
| Colors → Text | texto | var(--fe-woo-color, #111827) | |
| Colors → Accent | texto | var(--fe-woo-accent, #1f2937) | Se usa para el botón de finalizar compra. |
| Colors → Button text | texto | var(--fe-woo-accent-color, #ffffff) | |
| Colors → Buttons on hover | texto | var(--fe-woo-accent-hover, color-mix(in srgb, var(--fe-woo-mc-accent, #1f2937) 85%, var(--fe-woo-mc-accent-color, #ffffff))) | |
| Colors → Button text on hover | texto | var(--fe-woo-accent-color-hover, var(--fe-woo-mc-accent-color, #ffffff)) | |
| Size → Drawer width | texto | 24rem |
Sus variables propias
| Variable | Por defecto | Qué controla |
|---|---|---|
--fe-woo-mc-width | 24rem | Cuánto mide de ancho el cajón. |
--fe-woo-mc-bg | var(--fe-woo-surface, #ffffff) | Su fondo. |
--fe-woo-mc-backdrop | rgb(17 24 39 / 45%) | Lo que oscurece la página detrás. |
--fe-woo-mc-badge-bg | var(--fe-woo-accent, #111d2e) | La insignia del botón de la cabecera. |
--fe-woo-mc-badge-color | var(--fe-woo-accent-color, #ffffff) | Su número. |
--fe-woo-mc-remove | #6b7280 | La × de cada línea. |
--fe-woo-mc-remove-active-color | #ffffff | Esa × cuando se pulsa. |
--fe-woo-mc-danger | var(--fe-woo-danger, #b91c1c) | Una línea que ya no se puede comprar. |
--fe-woo-mc-sale-bg | #fee2e2 | La insignia de una línea con descuento. |
--fe-woo-mc-sale-color | #b91c1c | Su texto. |
--fe-woo-mc-progress | #0f766e | La barra de un objetivo de envío gratis. |
--fe-woo-mc-track | var(--fe-woo-border, #e5e7eb) | La parte sin llenar de esa barra. |
--fe-woo-mc-image-size | 4.5rem | La foto del producto en cada línea. |
--fe-woo-mc-enter | 0.32s | Lo que tarda el cajón en entrar. |
--fe-woo-mc-leave | 0.2s | Y en salir — más corto a propósito: un cierre que se demora se siente lento. |