Plantilla de card

Substitueix la card de producte pel teu propi HTML. S'edita al panell (Aparença → Avançat → Plantilla de card) amb vista prèvia en viu, i admet variables, condicionals i iteració sobre les etiquetes del producte.

Exemple

<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 class="mi-precio">
    {{price}}
    {{#if on_sale}}<s>{{price_original}}</s> -{{sale_pct}} %{{/if}}
  </p>
  {{#each badges}}<span class="mi-badge">{{.}}</span>{{/each}}
</a>

El botó «Afegeix a la cistella» s'injecta automàticament després del teu HTML si el tens activat — no cal incloure'l a la plantilla. Els estils de la teva card van al Custom CSS.

Variables

Variable	Contingut
{{name}}	Nom del producte.
{{url}}	URL de la fitxa del producte.
{{image}}	URL de la imatge principal.
{{brand}}	Marca.
{{category}}	Categoria principal.
{{price}}	Preu actual formatat.
{{price_original}}	Preu abans del descompte. OJO: si el producte NO és d'oferta porta el mateix valor que {{price}}, no ve buit — embolcalla'l en {{#if on_sale}} si no el vols repetit.
{{sale_pct}}	El NÚMERO del descompte, sense signe ni símbol: «24», no «-24%». El format l'escrius tu: -{{sale_pct}} %. Buit quan el producte no és d'oferta.
{{currency}}	Símbol/codi de la moneda.
{{reference}}	Referència interna (SKU).

Una variable sense valor per a un producte se substitueix per text buit — mai no trenca el render.

Condicionals i iteració

{{#if campo}}…{{/if}} pinta el bloc només si el camp té valor. Camps disponibles: on_sale · available · image · brand · category · badges · sale_pct · name · url · price · price_original · currency · reference. Sense niament de condicionals. El més útil de tots és {{#if price}}: en un cercador sense preu per a aquest comprador (B2B sense tarifa de grup, preu sota petició), un {{price}} solt no pinta res, però la maquetació del voltant sí — embolcalla'l i la card queda neta.

{{#each badges}}{{.}}{{/each}} itera les etiquetes del producte (oferta, esgotat, novetat…) segons el que hi hagi configurat al panell.

Límits i seguretat

Fins a 20.000 caràcters.
La plantilla NO es sanea al servidor: el servidor només comprova la mida i la desa tal com està. El saneig el fa el widget en renderitzar (i el preview del panell, amb el mateix codi): treu <script>, <style>, <iframe>, els atributs on*= amb qualsevol separador i tot atribut-URL l'esquema del qual no sigui de la llista blanca (http, https, mailto, tel, data:image i rutes relatives), abans i després de resoldre les variables. No és un sanitizer HTML complet: revisa la plantilla com revisaries codi que s'executarà a la teva botiga. El JS va al seu editor i el CSS al seu.
Si el comerç oculta els preus (catàlegs B2B), les variables de preu es buiden automàticament.