Template della card
Sostituisci la card prodotto con il tuo HTML. Si modifica nel pannello (Aspetto → Avanzato → Template della card) con anteprima in tempo reale, e ammette variabili, condizionali e iterazione sulle etichette del prodotto.
Esempio
<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> Il pulsante «Aggiungi al carrello» viene iniettato automaticamente dopo il tuo HTML se lo hai attivato — non serve includerlo nel template. Gli stili della tua card vanno nel Custom CSS.
Variabili
| Variabile | Contenuto |
|---|---|
| {{name}} | Nome del prodotto. |
| {{url}} | URL della scheda prodotto. |
| {{image}} | URL dell'immagine principale. |
| {{brand}} | Marca. |
| {{category}} | Categoria principale. |
| {{price}} | Prezzo attuale formattato. |
| {{price_original}} | Prezzo prima dello sconto. ATTENZIONE: se il prodotto NON è in offerta vale lo stesso di {{price}}, non è vuoto — avvolgilo in {{#if on_sale}} se non lo vuoi ripetuto. |
| {{sale_pct}} | Il NUMERO dello sconto, senza segno e senza simbolo: «24», non «-24%». Il formato lo scrivi tu: -{{sale_pct}} %. Vuoto quando il prodotto non è in offerta. |
| {{currency}} | Simbolo/codice della valuta. |
| {{reference}} | Riferimento interno (SKU). |
Una variabile senza valore per un prodotto viene sostituita con testo vuoto — non rompe mai il render.
Condizionali e iterazione
{{#if campo}}…{{/if}}
disegna il blocco solo se il campo ha un valore. Campi disponibili:
on_sale · available · image · brand · category · badges · sale_pct · name · url · price · price_original · currency · reference.
Niente condizionali annidati. Il più utile di tutti è
{{#if price}}:
in un motore di ricerca senza prezzo per quell'acquirente (B2B senza tariffa di gruppo, prezzo su richiesta), un
{{price}}
da solo non dipinge nulla, ma l'impaginazione intorno sì — avvolgilo e la card resta pulita.
{{#each badges}}{{.}}{{/each}}
itera le etichette del prodotto (offerta, esaurito, novità…) secondo quanto configurato nel pannello.
Limiti e sicurezza
- Fino a 20.000 caratteri.
- Il template NON viene sanificato sul server: il server controlla solo la dimensione e lo salva così com'è. La sanificazione avviene nel widget al render (e nel preview del pannello, con lo stesso codice): rimuove
<script>,<style>,<iframe>, gli attribution*=con qualsiasi separatore e ogni attributo-URL il cui schema non sia nella lista bianca (http, https, mailto, tel, data:image e percorsi relativi), prima e dopo aver risolto le variabili. Non è un sanitizer HTML completo: rivedi il template come rivedresti codice che girerà nel tuo negozio. Il JS ha il suo editor e il CSS il suo. - Se il negozio nasconde i prezzi (cataloghi B2B), le variabili di prezzo si svuotano automaticamente.