Dev preview
/book day cell — 3 variantes
Problema actual: la celda del día contiene 2 botones internos (+Day pass, +Half day) que parecen "submenús del día" cuando en realidad son add-to-cart. Comparativa de 3 niveles de fix.
Estado actual (referencia)
"+ Day pass" parece un toggle de tipo de día. En realidad añade al cart inmediatamente.
A · Solo cambio de copy ~10 min · cero riesgo
El precio (+22€, +17€) deja claro que es una compra, no un toggle.
B · Separación visual + chips ~30 min
+ Añadir
+ Añadir
+ Añadir
+ Añadir
+ Añadir
Border-top + label "+ Añadir" + chips redondeados separan visualmente la acción de selección (arriba) y la de compra (abajo).
C · Pills fuera de la celda — CTA bajo el calendario ~1-2h · más cambio
¿Quieres añadir un pase para el martes 4?
El día es lo único en la celda. Los CTAs viven SOLO bajo el calendario, contextuales al día activo. Más limpio pero requiere refactor del flow.
SKU picker — tabs en móvil
Feedback de Manuel: las 4 cards grandes (Day pass / Half day / Multi day / Bono 10) son incómodas en móvil. Propuesta: pestañas tipo navegador. Mucho más compacto vertically. Comparativa.
Actual — 4 cards
En mobile, las 4 cards ocupan ~700px verticales antes de llegar al form.
Pestañas estilo navegador — mobile first
[Aquí va el form del SKU seleccionado: fecha, monitor, datos cliente…]
Form actual sin tocar — solo cambia el selector arriba.
Compacto (~50px verticales). Mobile-native (scroll horizontal si no caben). El SKU activo se distingue con el border amarillo y peso semibold. El form abajo sigue exactamente igual.
Si te gusta, lo aplico al BuyForm real (`/day-pass`, `/buy`, `/half-day` etc.). ~1h de refactor.
Layout final propuesto (v2)
Revisión 2026-06-03: el precio sale del tab y se mueve al header del form (solo visible cuando la pestaña está seleccionada). Así cabe el nombre completo del producto en cada pestaña, sin truncar.
Desktop / Laptop (≥1024px) — pestañas laterales con continuidad
Day Pass
· €22Acceso completo a la jornada · 8:00–23:00 · cabinas no incluidas.
… resto de campos del form (datos cliente, checkbox legal, etc.) …
Pestañas laterales: la activa (Day Pass) tiene fondo blanco y se "abre" hacia el panel de la derecha (mismo fondo blanco, sin línea separadora). Las inactivas viven sobre el gris del contenedor. Mismo patrón mental que pestañas de navegador, pero en vertical.
Móvil (<1024px) — cuadrícula 2×2 con divisores
Day Pass
· €22Acceso completo a la jornada · 8:00–23:00 · cabinas no incluidas.
… resto del form …
Cuadrícula 2×2: los 4 nombres a la vista sin scroll horizontal. La pestaña activa (Day Pass, arriba-izquierda) tiene fondo blanco y se conecta con el panel del form abajo sin línea separadora.
¿OK para implementar este layout exacto en /buy, /day-pass, /es/comprar, /es/pase-de-dia? ~1h.
Resumen
| Variante | Ventaja | Esfuerzo |
|---|---|---|
| A Copy | Precios en pill = clarísimo que es compra | 10 min |
| B Chips separados | Separa selección de compra. Chips no parecen botones grandes | 30 min |
| C CTA bajo calendario | Flow más limpio. Pills contextuales al día activo | 1-2h |
Dime qué variante quieres y la implemento en /book. O combina dos (ej. A+C).