Variation Picker
Desplegables, muestras, o muestras compactas para las tarjetas del catálogo. Las combinaciones que no llevan a nada se marcan, no se esconden — y el precio, el stock y los límites de cantidad siguen a la elección.
Por qué marcadas y no escondidas
Esconder una combinación que no existe hace pensar que uno se ha equivocado de clic. Marcarla dice «esta no está disponible», que es la respuesta de verdad.
Lo agotado se tacha, y se puede seguir eligiendo. Relativo a lo ya elegido: la talla 35 agotada en negro y no en blanco se tacha al elegir negro, y no antes. Al elegirla se ve su precio, dice que no hay stock y el botón se queda apagado —y un lector de pantalla oye «35, sin stock», no «no disponible»—. Una combinación que no existe, en cambio, se rechaza. Bajo pedido cuenta como disponible: se puede comprar, sólo tarda más.
La foto sigue a la elección antes de que esté completa. Elegir azul en una
sudadera que además pregunta «¿con logo?» enseña ya una sudadera azul; el precio,
el stock y el botón esperan a la segunda respuesta, porque un precio para media
elección sería adivinar. La foto sólo se mueve cuando lo elegido dice algo de
ella —la talla 38 de una zapatilla que viene en tres colores la deja quieta—, y
cuando aún caben dos fotos enseña la primera en el orden de los valores de tu
atributo. Al limpiar la elección vuelve la foto del producto. La que se mueve es
la marcada con data-fe-woo-variation-image, o la de la galería.
Props
| Prop | Tipo | Por defecto | Qué hace |
|---|---|---|---|
| Presentation | elección: select, swatches, compact | select | «Compacto» son las mismas muestras con los nombres de los atributos escondidos a la vista y las fichas más pequeñas — hecho para una tarjeta de producto en una rejilla, donde un selector a tamaño completo deja un hueco en cada tarjeta que no tiene variaciones. |
| Preselect the first available combination | elección: false, true | false | Apagado a propósito: elegir por quien compra arriesga que se lleve la variante equivocada sin darse cuenta. Nunca pisa los atributos por defecto del propio producto. |
| Show the selection message | sí / no | on | La línea que confirma lo elegido («Seleccionado. Precio: 18,00 $»). Quítala en una tarjeta de producto, donde el precio de al lado ya dice lo mismo — sigue siendo una región activa, así que un lector de pantalla la oye igual. Los problemas (agotado, combinaciones que no van juntas) se enseñan siempre, con esto o sin esto. |
| Colors → Selected outline | texto | var(--fe-woo-accent, #1f2937) | |
| Colors → Border | texto | var(--fe-woo-border, #d1d5db) | |
| Colors → Dropdown background | texto | var(--fe-woo-surface, #ffffff) | El desplegable se pintaba blanco pasara lo que pasara en la tienda, y su texto sí la seguía: en una oscura, blanco sobre blanco. |
| Colors → Label text | texto | var(--fe-woo-var-color, #111827) | El nombre de cada pregunta: «Color», «Talla». |
| Option buttons → Background | texto | transparent | Vacío por defecto, para que se vea la tienda de detrás. |
| Option buttons → Text | texto | var(--fe-woo-var-color, #111827) | |
| Option buttons → Border | texto | var(--fe-woo-var-border, #d1d5db) | El suyo, para que un botón con fondo pueda quedarse sin contorno sin llevarse el del desplegable. Sigue al «Border» de arriba hasta que se toca. |
| Option buttons → Hover background | texto | color-mix(in srgb, var(--fe-woo-var-selected, #1f2937) 8%, transparent) | Sólo donde hay puntero: en una pantalla táctil el hover se queda pegado después de tocar, y aquí tocar es elegir. |
| Option buttons → Selected background | texto | transparent | Lo que marca la elección es el anillo —forma y no color, así que se ve en escala de grises—. Esto es el relleno que algunas tiendas quieren encima, y por eso viene apagado. |
| Option buttons → Selected text | texto | var(--fe-woo-var-option-color, #111827) | Ponlo siempre que pongas un fondo oscuro para lo elegido: el texto no lo sigue solo, y así es como un elegido acaba negro sobre negro. |
| Option buttons → Sold-out opacity | texto | 1 | Cuánto se apaga una opción agotada: 1 es nada, 0,4 es como una que no existe. Por debajo de 1 su texto baja del 4,5:1 que WCAG AA pide a un control que todavía se puede elegir — el tachado, el borde discontinuo y el «sin stock» para lectores de pantalla ya la marcan. |
| Size → Control height | texto | 2.75rem | |
| Size → Swatch size | texto | 2.25rem | |
| Size → Corner radius | texto | var(--fe-woo-control-radius, 0.5rem) | Redondea a la vez los botones, el desplegable y la muestra de color. Con 999px quedan en forma de píldora. |
| Size → Button padding | texto | 0.25rem 0.63rem | El aire alrededor del texto. El botón nunca baja del alto de arriba, que es lo que lo mantiene cómodo de pulsar. |
| Size → Button text size | texto | var(--fe-woo-var-label-size, 0.88rem) | |
| Product id | texto | {this.fecommerce.id} | Viene del producto que se está enseñando. Dentro de un bucle sigue sola a cada producto si el elemento del bucle se llama «this»; con cualquier otro nombre, átala a ese nombre. |
Sus variables propias
| Variable | Por defecto | Qué controla |
|---|---|---|
--fe-woo-var-label-size | var(--fe-woo-text-m, 0.88rem) | El nombre del atributo — «Color», «Talla». |
--fe-woo-var-label-weight | 500 | Su grosor. |
--fe-woo-var-swatch-size | 2.25rem | Cuánto mide una muestra de color. |
--fe-woo-var-control | var(--fe-woo-var-control-size, 2.75rem) | La altura que toma de verdad un desplegable. Lee el tamaño de control; ponla para romper el empate a propósito. |
--fe-woo-var-face | var(--fe-woo-var-swatch-size, 2.25rem) | Lo mismo, para una muestra. |
--fe-woo-var-compact-scale | 0.73 | Cuánto encoge todo en la disposición compacta, la que va en una tarjeta de una rejilla. |
--fe-woo-var-compact-gap | 0.38rem | El hueco entre controles en el modo compacto, el de las tarjetas. |
--fe-woo-var-compact-label-size | 0.81rem | Y el tamaño del nombre de un grupo ahí — lo leen los lectores de pantalla, porque el modo compacto lo esconde de la vista. |
--fe-woo-var-selected | var(--fe-woo-accent, #1f2937) | El contorno de lo que está elegido. |
--fe-woo-var-option-bg | transparent | El fondo de un botón de opción: una talla, un material, un color con su nombre al lado. Vacío por defecto, para que se vea la tienda de detrás. |
--fe-woo-var-option-color | var(--fe-woo-var-color, #111827) | Su texto. |
--fe-woo-var-option-border | var(--fe-woo-var-border, #d1d5db) | Su borde, aparte para que un botón con fondo pueda quedarse sin contorno sin llevarse el del desplegable. Sigue al borde general hasta que se toca. |
--fe-woo-var-option-hover-bg | color-mix(in srgb, var(--fe-woo-var-selected, #1f2937) 8%, transparent) | Y su fondo bajo el puntero. Sólo donde hay puntero: en una pantalla táctil el hover se queda pegado después de tocar, y aquí tocar es elegir. |
--fe-woo-var-option-padding | 0.25rem 0.63rem | El aire alrededor de su texto. Nunca baja del alto del control, que es lo que lo mantiene cómodo de pulsar. |
--fe-woo-var-option-text-size | var(--fe-woo-var-label-size, 0.88rem) | Y el tamaño de ese texto, que sigue al del nombre del atributo salvo que digas otra cosa: es lo que encoge el modo compacto. |
--fe-woo-var-option-selected-bg | transparent | El fondo del elegido. Apagado por defecto: lo que lo marca es el anillo, y un anillo es forma y no color, así que se ve en escala de grises. |
--fe-woo-var-option-selected-color | var(--fe-woo-var-option-color, #111827) | Y su texto. Ponlo siempre que pongas un fondo oscuro arriba: no lo sigue solo, y así es como un elegido acaba negro sobre negro. |
--fe-woo-var-sold-out-opacity | 1 | Cuánto se apaga una opción agotada. 1 por defecto: se puede elegir, así que su texto tiene que pasar 4,5:1, y por debajo no lo pasa. |
--fe-woo-var-label-color | var(--fe-woo-var-color, #111827) | El color del nombre del atributo. |
--fe-woo-var-select-bg | var(--fe-woo-surface, #ffffff) | El fondo del desplegable. Antes era blanco pasara lo que pasara, y el texto sí seguía a la tienda: en una oscura, blanco sobre blanco. |
--fe-woo-var-unavailable-opacity | 0.4 | Cuánto se apaga una combinación que no lleva a ninguna parte. Marcada, nunca escondida: esconderla hace pensar que has fallado el clic. |
--fe-woo-var-status-size | var(--fe-woo-text-m, 0.88rem) | La línea que confirma lo elegido. |
--fe-woo-var-status-color | var(--fe-woo-muted, #4b5563) | Su color. |
--fe-woo-select-arrow | url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") | El chevron que se dibuja en un desplegable — el de ordenar y el del selector de variación por igual. Es nuestro y no del navegador, así que se ve igual en todos y va donde tú digas. |
--fe-woo-select-arrow-size | 0.7rem | Cuánto mide. El hueco que se le reserva sale de aquí, así que cambiar uno no descuadra el otro. |
--fe-woo-select-arrow-inset | 0.75rem | A qué distancia del borde va. Conviene subirlo con un radio de píldora, donde la curva se come la esquina. |