Card-Template
Ersetze die Produkt-Card durch dein eigenes HTML. Bearbeitet wird sie im Dashboard (Darstellung → Erweitert → Card-Template) mit Live-Vorschau, und sie unterstützt Variablen, Bedingungen und Iteration über die Badges des Produkts.
Beispiel
<a class="meine-card" href="{{url}}">
{{#if image}}<img src="{{image}}" alt="{{name}}" loading="lazy">{{/if}}
{{#if brand}}<span class="meine-marke">{{brand}}</span>{{/if}}
<h3>{{name}}</h3>
<p class="mein-preis">
{{price}}
{{#if on_sale}}<s>{{price_original}}</s> -{{sale_pct}} %{{/if}}
</p>
{{#each badges}}<span class="mein-badge">{{.}}</span>{{/each}}
</a> Der Button „In den Warenkorb“ wird automatisch nach deinem HTML injiziert, sofern du ihn aktiviert hast — du musst ihn nicht ins Template aufnehmen. Die Styles deiner Card gehören ins Custom CSS.
Variablen
| Variable | Inhalt |
|---|---|
| {{name}} | Produktname. |
| {{url}} | URL der Produktseite. |
| {{image}} | URL des Hauptbilds. |
| {{brand}} | Marke. |
| {{category}} | Hauptkategorie. |
| {{price}} | Aktueller Preis, formatiert. |
| {{price_original}} | Preis vor dem Rabatt. ACHTUNG: wenn das Produkt NICHT im Angebot ist, steht hier derselbe Wert wie in {{price}}, nicht leer — pack es in {{#if on_sale}}, wenn du es nicht doppelt sehen willst. |
| {{sale_pct}} | Die RABATT-ZAHL, ohne Vorzeichen und ohne Symbol: „24“, nicht „-24%“. Das Format schreibst du: -{{sale_pct}} %. Leer, wenn das Produkt nicht im Angebot ist. |
| {{currency}} | Symbol/Code der Währung. |
| {{reference}} | Interne Referenz (SKU). |
Eine Variable ohne Wert für ein Produkt wird durch leeren Text ersetzt — das Rendering bricht nie.
Bedingungen und Iteration
{{#if feld}}…{{/if}}
rendert den Block nur, wenn das Feld einen Wert hat. Verfügbare Felder:
on_sale · available · image · brand · category · badges · sale_pct · name · url · price · price_original · currency · reference.
Keine verschachtelten Bedingungen. Die nützlichste ist
{{#if price}}:
in einer Suche ohne Preis für diesen Käufer (B2B ohne Gruppentarif, Preis auf Anfrage) zeigt ein blankes
{{price}}
nichts an, das Markup darum herum aber doch — umschließe es, und die Karte bleibt sauber.
{{#each badges}}{{.}}{{/each}}
iteriert über die Badges des Produkts (Angebot, ausverkauft, Neuheit …), so wie im Dashboard konfiguriert.
Limits und Sicherheit
- Bis zu 20.000 Zeichen.
- Die Vorlage wird NICHT auf dem Server bereinigt: der Server prüft nur die Größe und speichert sie unverändert. Die Bereinigung passiert im Widget beim Rendern (und in der Panel-Vorschau, mit demselben Code): sie entfernt
<script>,<style>,<iframe>,on*=-Attribute mit beliebigem Trenner und jedes URL-Attribut, dessen Schema nicht auf der Whitelist steht (http, https, mailto, tel, data:image und relative Pfade), vor und nach dem Auflösen der Variablen. Es ist kein vollständiger HTML-Sanitizer: prüfe die Vorlage wie Code, der in deinem Shop läuft. Das JS hat seinen eigenen Editor und das CSS seinen. - Blendet der Shop die Preise aus (B2B-Kataloge), werden die Preis-Variablen automatisch geleert.