@lit-roa/tarjeta-producto

Tarjeta de producto, servicio o evento con imagen, nombre, una línea de detalle opcional (fecha, duración), precio (con precio anterior tachado si hay descuento) y botón opcional para agregar al carrito.

Con href, toda la tarjeta es clickeable y se levanta un poco al pasar el mouse. El botón sigue funcionando aparte (no abre la liga).

npm install @lit-roa/tarjeta-producto

import '@lit-roa/tarjeta-producto';

<lr-tarjeta-producto
  id-producto="cafe-250"
  nombre="Café de Chiapas 250 g"
  precio="189"
  precio-antes="220"
  imagen="https://…/cafe.jpg"
  href="/productos/cafe-250"
></lr-tarjeta-producto>

Atributos

| Atributo | Propiedad | Tipo | Por omisión | | --- | --- | --- | --- | | id-producto | idProducto | string | '' | | nombre | nombre | string | '' | | precio | precio | number | 0 | | precio-antes | precioAntes | number | — | | precio-texto | precioTexto | string | '' (ej. "Gratis", reemplaza al precio) | | detalle | detalle | string | '' (ej. fecha del evento o duración) | | moneda | moneda | string | 'MXN' | | imagen | imagen | string | '' | | href | href | string | '' | | agotado | agotado | boolean | false | | texto-boton | textoBoton | string | '' (sin texto no hay botón) |

Eventos

| Evento | detail | | --- | --- | | agregar-al-carrito | { id: string, cantidad: number } |

Slots

| Slot | Uso | | --- | --- | | etiqueta | Contenido sobre la imagen ("Nuevo", "Oferta"); acepta varias |

Variables CSS

| Variable | Uso | | --- | --- | | --lr-tarjeta-proporcion | Proporción de la imagen (por omisión 1; para servicios, 4 / 3) |

<!-- Servicio o evento -->
<lr-tarjeta-producto
  style="--lr-tarjeta-proporcion: 4 / 3"
  nombre="Taller de barismo"
  detalle="sábado 15 de noviembre, 10:00"
  precio-texto="Gratis"
  imagen="https://…/taller.jpg"
  href="/eventos/taller-barismo"
></lr-tarjeta-producto>

Desarrollo

npm run dev -w @lit-roa/tarjeta-producto