Findalo

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 attributi on*= 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.