{{= $myProduct.description }}
``` Die Template Engine interpretiert diese Platzhalter und ersetzt sie zur Laufzeit mit den entsprechenden Werten aus dem System. ### Standard-Escaping Die WEBSALE Template-Engine verfügt über ein integriertes Standard-Escaping, das automatisch auf alle dynamisch eingebundenen Inhalte angewendet wird. Dadurch wird sichergestellt, dass HTML- oder JavaScript-Code, der z. B. in Produktdaten oder CMS-Inhalten enthalten ist, nicht interpretiert, sondern als Klartext dargestellt wird. Viele Inhalte im Shop – z. B. Produktbeschreibungen, CMS-Artikel oder andere redaktionelle Texte – enthalten HTML zur Formatierung. Damit diese Inhalte nicht unbeabsichtigt als echter HTML-Code ausgeführt werden, wird bei der Ausgabe mit `{{= ... }}` ein automatisches Escaping angewendet. **Beispiel: Standard-Escaping aktiviert** ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {{= $product.description }} ``` **Inhalt in den Shopdaten:** ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}Super atmungsaktiv – ideal für Sport und Freizeit. Jetzt in der neuesten Generation erhältlich.
``` **Ausgabe im Browser:** ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} <p><strong>Super atmungsaktiv</strong> – ideal für Sport und Freizeit. Jetzt in der <em>neuesten Generation</em> erhältlich.</p> ``` Der HTML-Code wird **nicht interpretiert**, sondern als normaler Text angezeigt. Das schützt vor unbeabsichtigter Codeausführung. Wenn Inhalte bewusst als HTML ausgegeben werden sollen – z. B. weil Produkttexte oder CMS-Inhalte HTML enthalten und korrekt gerendert werden sollen – kann das Escaping gezielt deaktiviert werden. Dazu wird statt `=` ein Ausrufezeichen `!` verwendet: ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {{! $product.description }} ``` **Ausgabe im Browser:** ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}Super atmungsaktiv – ideal für Sport und Freizeit. Jetzt in der neuesten Generation erhältlich.
``` Jetzt wird der HTML-Code korrekt interpretiert und gerendert. **Wichtig:** Die Deaktivierung des Escapings sollte nur bei vertrauenswürdigen Inhalten erfolgen – z. B. bei Daten aus dem eigenen Produkt-Backend oder CMS. Inhalte, die z. B. über Formulareingaben von Kunden stammen, sollten nicht ungefiltert ohne Escaping ausgegeben werden. *** ## Variablen Mit der WEBSALE Template-Sprache können die Daten ausgegeben werden, die vom Shopsystem bereitgestellt werden. Jede Seite, die von der Template Engine gerendert wird, erhält so die benötigten Daten, um die angeforderten Inhalte anzuzeigen. Diese Daten werden in sogenannten Template-Variablen gespeichert. Alle Template-Variablen können über die Template-Sprache mit einem `$` gefolgt vom Variablennamen aufgerufen werden. Variablennamen können frei vergeben werden. Es gibt auch System-Variablen, die mit `$ws` beginnen und deren Namen vorgeben sind, z.B. `$wsProduct`, `$wsCategory` etc. Eine vollständige Übersicht der WEBSALE System-Variablen und mehr Informationen zu den Variablen allgemein finden Sie [hier](/frontend/referenz/variablen). ### Variablen setzen & verwenden **Beispiel: Neue Variable** ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {{ var $myProduct = $wsProduct.load('1234') }} ``` Neue Variablen werden immer mit dem **var-Keyword** definiert. In diesem Beispiel lädt die Funktion `$wsProduct.load('1234')` die Produktdaten des Produkts mit der Artikelnummer `1234`. Diese werden in der Variable `$myProduct` gespeichert und können später verwendet werden. **Beispiel: Verwendung der Variablen** ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {{ var $myProduct = $wsProduct.load('1234') }}{{= $myProduct.description }}
Preis: {{= $myProduct.price }} €
``` Einmal definierte Variablen können an beliebigen Stellen im Template genutzt werden. In diesem Fall: * Die Produktdaten werden in `$myProduct` gespeichert. * Der Produktname, die Beschreibung und der Preis werden dynamisch in das Template eingefügt. **Beispiel: Verschachtelte Variable** ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {{ var $myProduct = $wsProduct.load('1234') }}Diese Kategorie ist aktiv.
{{ /if }} ``` Variablen, die innerhalb von Bereichsanweisungen definiert werden, existieren nur innerhalb dieses Bereichs: ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {{ foreach $myProduct in $wsCategory.loadProducts('5678') }}{{= $myProduct.price }} €
{{ /foreach }}{{= $myProduct.name }}
-> $myProduct ist außerhalb der Schleife nicht gültig ``` *** ## Modifiers (Modifikatoren) Manchmal reicht es nicht aus, den Inhalt einer Variable einfach nur auszugeben – der Wert muss vorher verändern oder angepasst werden. Genau dafür gibt es die **Modifiers**. **Modifiers** können auf alle Variablen angewendet werden, um deren Inhalt zu verändern. Dazu hängen sie einfach ein `|` (Pipe-Zeichen) und den Modifiernamen an die entsprechende Variable an. Zusätzliche Parameter werden mit `:` hinzugefügt. **Beispiel: Kürzen der Produktbeschreibung** ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {{= $myProduct.description|truncate:120 }} ``` In diesem Beispiel wird der Modifikator `truncate` auf die Produktbeschreibung angewendet. Dieser kürzt den Text auf eine maximale Länge von 120 Zeichen. **Beispiele: Mehrere Modifikatoren auf eine Variable anwenden** Sie können auch mehrere Modifikatoren hintereinander auf eine Variable anwenden. Diese werden in der Reihenfolge verarbeitet, in der sie angegeben werden. Eine vollständige Liste aller Modifiers sowie deren Beschreibung finden Sie in der [Übersicht der Modifikatoren.](/frontend/referenz/modifiers) *** ## Bedingungen (Conditions) Die WEBSALE `{if}`-Bedingungen erlauben die selbe Flexibilität wie in PHP oder Javascript, bis auf ein paar Erweiterungen für die Template-Engine. Jedes `{if}` muss mit einem `{/if}` kombiniert sein. `{else}` und `{elseif}` sind ebenfalls erlaubt. Alle gängigen PHP Vergleichsoperatoren und Funktionen, wie `||`, `or`, `&&`, `and`, `is_array()`, etc. sind erlaubt. Mit den WEBSALE `{if}`-Bedingungen können Sie die Ausgabe in der Storefront abhängig von bestimmten Bedingungen variieren. Um zu entscheiden, was ausgegeben wird, können Sie eine **Bedingung** definieren, die eine Variable überprüft. Eine einfache Bedingung wird durch einen `{if}-`Block dargestellt, der eine Prüfung enthält. Dieser Block wird nur dann ausgeführt, wenn die Prüfung wahr (true) ist. **Beispiel:** ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {{ if $myProduct.description }} {{= $myPproduct.description }} {{ else }} {{= $myProduct.custom.shortdescr }} {{ /if }} ``` In diesem Beispiel prüfen wir, ob die Variable `$myProduct.description` Inhalt besitzt. Wenn ja, wird ihr Inhalt ausgegeben. Ist das nicht der Fall, wird der alternative Inhalt im **else**-Block gerendert. Hier verwenden die Kurzbeschreibung. Zusätzlich zu `if` und `else` können auch komplexere Bedingungen definiert, indem `{elseif}` hinzugefügt wird. Dadurch können mehrere Prüfungen in einer einzigen Bedingung kombiniert werden. **Beispiel: Begrüßung des Besuchers im Onlineshop** * Es wird eine persönliche Begrüßung angezeigt, wenn sich ein Bestandskunde eingeloggt. * Es wird eine andere Begrüßung angezeigt, wenn sich ein Neukunde eingeloggt. * Für alle nicht eingeloggte Besucher wird eine allgemeine Nachricht angezeigt. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {{ if $wsAccount.isLoggedIn }}Willkommen zurück, {{= $wsAccount.name }}!
{{ elseif $wsAccount.isLoggedIn.newUser }}Willkommen in unserem Onlineshop, {{= $wsAccount.name }}
{{ else }}Willkommen! Registrieren Sie sich.
{{ /if }} ``` **Beispiel: Komplexe Bedingungen mit Operatoren, z.B. für den Lagerbestand** Sie können unterschiedliche Operatoren verwenden, um komplexe Bedingungen zu erstellen, z. B.: * `>` oder `<` für Vergleiche der Stückzahl eines Produktes ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {{ if $myProduct.stock > 0 }}Dieses Produkt ist verfügbar.
{{ else }}Dieses Produkt nicht verfügbar.
{{ /if }} ``` Eine vollständige Übersicht der verfügbaren Operatoren und deren Verwendung finden Sie in der [Dokumentation der Bedingungen (Conditions)](/frontend/referenz/conditions). *** ## Loops (Schleifen) Schleifen ermöglichen es, durch ein Array zu iterieren, das mehrere Datensätze (z. B. Produkte) enthält, und automatisch Inhalte für jeden einzelnen Datensatz zu generieren. Damit können Sie wiederholende Strukturen wie Produktlisten, Bildergalerien oder ähnliche Inhalte effizient erstellen. Eine `foreach`-Schleife wird mit dem Tag `{{ foreach }}` geöffnet und mit `{{ /foreach }}` geschlossen. Der Name der Schleife (die sogenannte Laufvariable) kann frei definiert werden und darf Buchstaben, Zahlen sowie Unterstriche enthalten. Die `foreach`-Schleife durchläuft jedes Element des Arrays einmal und führt den eingeschlossenen Codeabschnitt für jedes Element aus. Mit jedem Durchlauf wird das aktuelle Element der Laufvariable zugewiesen. **Beispiel: Produktliste einer Kategorie** ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}{{= $myProduct.description }}
Preis: {{= $myProduct.price }} €
Keine Produkte in dieser Kategorie verfügbar.
{{ /foreach }}