# Plantilla de card del widget Findalo

> Documentación para desarrolladores de Findalo (buscador SaaS para tiendas online). Versión HTML: https://findalo.io/devs/card-template/
> Contrato estable: los tokens, clases, variables y eventos documentados solo se amplían, nunca se renombran ni eliminan. Todo lo NO documentado es interno del widget y puede cambiar sin aviso.

HTML propio para la card de producto, editable en el panel (Apariencia → Avanzado → Plantilla de card) con preview en vivo. Límite 20.000 caracteres. **El servidor solo capa la longitud**: el saneo (`<script>`, `<style>`, `<iframe>`, atributos `on*=` y URLs `javascript:`) lo hace el **widget al renderizar**, y el preview del panel hace lo mismo. La plantilla se guarda tal cual, así que revísala como revisarías código. El botón «Añadir al carrito» se inyecta automáticamente tras el HTML si está activado. Variables sin valor → texto vacío (nunca rompe).

## Variables

| Variable | Contenido |
|---|---|
| `{{name}}` | Nombre del producto. |
| `{{url}}` | URL de la ficha del producto. |
| `{{image}}` | URL de la imagen principal. |
| `{{brand}}` | Marca. |
| `{{category}}` | Categoría principal. |
| `{{price}}` | Precio actual formateado. |
| `{{price_original}}` | Precio antes del descuento. OJO: si el producto NO está de oferta trae el mismo precio que {{price}}, no viene vacío — envuélvelo en {{#if on_sale}} si no quieres verlo repetido. |
| `{{sale_pct}}` | El NÚMERO del descuento, sin signo ni símbolo: «24», no «-24%». El formato lo escribes tú: -{{sale_pct}} %. Vacío si el producto no está de oferta. |
| `{{currency}}` | Símbolo/código de la moneda. |
| `{{reference}}` | Referencia interna (SKU). |

## Condicionales e iteración

- `{{#if campo}}…{{/if}}` — pinta el bloque solo si el campo tiene valor. Campos: `on_sale`, `available`, `image`, `brand`, `category`, `badges`, `sale_pct`, `name`, `url`, `price`, `price_original`, `currency`, `reference`. Sin anidamiento.
- `{{#each badges}}{{.}}{{/each}}` — itera las etiquetas del producto.

## Ejemplo

```html
<a class="mi-card" href="{{url}}">
  {{#if image}}<img src="{{image}}" alt="{{name}}" loading="lazy">{{/if}}
  {{#if brand}}<span class="mi-marca">{{brand}}</span>{{/if}}
  <h3>{{name}}</h3>
  <p>{{price}} {{#if on_sale}}<s>{{price_original}}</s> -{{sale_pct}} %{{/if}}</p>
  {{#each badges}}<span class="mi-badge">{{.}}</span>{{/each}}
</a>
```