Cart Count
El botón de la cabecera con el número de artículos. Abre el Mini carrito, y el número nunca viaja en el HTML, así que es seguro detrás de una caché de página.
Props
| Prop | Tipo | Por defecto | Qué hace |
|---|---|---|---|
| Accessible name | texto | Cart | Lo leen los lectores de pantalla antes de que el runtime sepa la cuenta; en cuanto la sabe, dice «Carrito: 3 artículos». Está aquí porque un botón sin nombre hasta que llega el JavaScript es una barrera de verdad, no un detalle. |
| Icon | imagen | el icono de fábrica | Cualquier SVG, de la biblioteca de medios o pegado como URI data:. Sus colores se cambian por el del icono, así que sigue a la paleta. |
| Hide badge when empty | sí / no | on | Un cero en una cabecera es ruido. La cuenta sigue en el nombre accesible del botón de todas formas, así que nadie pierde el dato. |
| Badge position | elección: after, before, over | after | «On the icon» es lo que quiere una cabecera apretada: el botón acaba midiendo lo que el icono y nada más. La insignia va en su esquina de arriba, fuera del asa del carrito para que la figura se siga reconociendo. |
| Colors → Icon | texto | currentColor | |
| Colors → Badge background | texto | var(--fe-woo-accent, #1f2937) | |
| Colors → Badge text | texto | var(--fe-woo-accent-color, #ffffff) | |
| Size → Icon size | texto | var(--fe-woo-icon-size, 1.5rem) | |
| Announce cart changes | sí / no | off | Apagado, porque todo lo que cambia el carrito ya lo dice: el botón de añadir, el selector, el mini carrito, el resumen del checkout y, en la página del carrito, los avisos de WooCommerce. Las regiones activas hacen cola en vez de interrumpir, así que una segunda hace que un lector de pantalla repita la misma noticia. Enciéndela sólo si has apagado las otras. |
Sus variables propias
| Variable | Por defecto | Qué controla |
|---|---|---|
--fe-woo-count-size | var(--fe-woo-icon-size, 1.5rem) | El icono del carrito. Lee --fe-woo-icon-size, el mismo que la lupa y el corazón. |
--fe-woo-count-stroke | var(--fe-woo-icon-stroke, 2) | El grosor de su línea. Lee --fe-woo-icon-stroke, el mismo que la lupa y el corazón. |
--fe-woo-count-hover | color-mix(in srgb, var(--fe-woo-accent, #111827) 12%, transparent) | El tinte de detrás con el ratón encima: el mismo que la lupa y el corazón. |
--fe-woo-count-badge-bg | var(--fe-woo-accent, #1f2937) | El círculo pequeño que lleva el número. |
--fe-woo-count-badge-color | var(--fe-woo-accent-color, #ffffff) | El número. |
--fe-woo-count-badge-size | 1.25rem | Cuánto mide ese círculo. |