Tienda ˚☕︎｡ Ideas para rediseño

Estos son los campos que rellenaría la persona que sube los productos. Los chips de empresa podrían generarse a partir del campo empresa: si apareciera una nueva, su chip aparecería sin tocar el diseño.

{
  "titulo": "20€ de descuento en cursos de HackBySecurity",
  "descripcion": "Con este cupón podrás conseguir cualquier curso online…",
  "imagen": "img/tienda/producto-hbs.webp",
  "categoria": "vales",
  "empresa": "HackBySecurity",
  "sticker": "chollazo",
  "precio": 100,
  "comoUsar": "Entra en la web https://academy.hackbysecurity.com/ y …"
}

Sería un criterio sencillo: qué recibe la persona al canjear sus Tempos. Para distinguir entre Descuentos y Vales bastaría con mirar cómo expresa la rebaja el producto: si la expresa en %, es Descuento; si la expresa en €, es Vale.

Un caso límite: los cupones de HackBySecurity dicen “20€ de descuento” en el título, pero expresan la rebaja en €, así que irían en Vales.

Sería una lista cerrada, de la que la persona que sube el producto elegiría uno. La categoría diría qué es el producto y el sticker, la ventaja o cómo llega: por ejemplo, los productos físicos se repartirían entre “Con envío” y “Recogida”. Texto blanco sobre colores de la paleta corporativa y el verde que se usa en los checks.

• Filtros combinados. Categoría + empresa + búsqueda se suman (AND). Los chips muestran cuántos productos quedarían si se pulsan; los que se quedan en 0 se desactivan.
• Chips dentro de la tarjeta. Son clicables y aplican el mismo filtro.
• Búsqueda. Mira en título, descripción y empresa, sin distinguir mayúsculas ni tildes.
• Ordenar por precio. “Orden de la tienda” (por defecto), ascendente o descendente. En empate se conserva el orden de la tienda.
• Cómo usar mi código. Abre un panel dentro de la tarjeta, con la imagen visible, scroll interno y una X. Se cierra con la X o con Esc. Solo hay uno abierto a la vez. La tarjeta no cambia de altura.
• Alturas. Todas las tarjetas de una fila miden lo mismo y el botón de comprar queda siempre abajo.
• Saldo de Tempos (simulado aquí con un desplegable). Si el usuario no llega, el botón se atenúa y dice “Te faltan X”. Al pulsarlo se le avisa de cuánto le falta.
• Sin resultados. Mensaje con botón “Limpiar filtros”.
• VBooks. En lugar de “Cómo usar mi código” llevan “Ver más”, que abre la ficha actual. Al volver se conservan los filtros y la posición.
• Móvil. Una columna. La fila de empresas hace scroll horizontal.

Al pulsar “Anotaciones para devs”, en la barra de filtros, aparecerían estos números sobre la página y, al pasar el ratón por cada zona, se vería su explicación.

Estas serían las erratas e inconsistencias que han salido al pasar los textos a la maqueta. Con las anotaciones activadas aparecen subrayadas en las tarjetas y, al pasar el ratón, se ve la sugerencia.