Inhaltsverzeichnis

    Allgemeine Beispiele für DotLiquid

    Kommentare (comment)

    Kommentare sind die einfachste Funktion, sie verbergen einfach den Inhalt.

    Wir haben dieses Jahr die eine Millionen Euro-Grenze {% comment %} an Verlusten {% endcomment %} überschritten.
    
    #=> Der Satzteil  an Verlusten  wird bei der Ausgabe übersprungen.

    Rohcode (raw)

    Rohcode erlaubt die Verwendung von DotLiquid-Sonderzeichen innerhalb der Funktion, ohne dass diese durch den Parser laufen und vermeidet somit Konflikte in der Syntax.

    {% raw %}Dieser Tag {{ this }} würde HTML-Codes umgewandelt werden, aber dieser Code {{{ that }}} würde unangetastet bleiben.{% endraw %}
    
    #=> {% raw %}Dieser Tag {{ hier }} würde in HTML-Codes umgewandelt werden, aber dieser Code {{{ hier }}} würde unangetastet bleiben.{% endraw %}

    Abfragen (if - else)

    Wenn-Dann-Sonst-Abfragen sind vor allem aus Programmiersprachen und Tabellenkalkulationen bekannt, natürlich finden Sie auch in DotLiquid ihren berechtigten Platz.

    Ein paar Beispiele dazu:

    {% if user %}
      Hallo Herr {{ user.name }}.
    {% endif %}
    
    #=> Gibt den Benutzernamen aus, sofern vorhanden.
    {% if user.name == 'Mustermann' %}
      Hallo Herr Mustermann.
    {% elsif user.name == 'Musterfrau' %}
      Hallo Frau Musterfrau.
    {% endif %}
    
    #=> Gibt den ersten Satz für den "Mustermann" und den zweiten Satz für die "Musterfrau" aus.
    {% if user.name == 'Mustermann' or user.name == 'Musterfrau' %}
      Sehr geehrter Kunde,
    {% endif %}
    
    #=> Gibt den Satz Sehr geehrter Kunde, aus, wenn der Benutzername "Mustermann" oder "Musterfrau" lautet.
    {% if user.name == 'Musterfrau' and user.age > 45 %}
      Sehr geehrte Frau Musterfrau,
    {% endif %}
    
    #=> Wenn der Benutzer "Musterfrau" älter als 45 ist, wird der Satz ausgegeben.
    {% if user.name != 'Mustermann' %}
      Hallo zusammen,
    {% endif %}
    
    {% unless user.name == 'Mustermann' %}
      Hallo zusammen,
    {% endunless %}
    
    #=> Beide Beispiele geben den Satz aus, wenn der Benutzer ungleich "Mustermann" heißt.
    {% if user.creditcard != null %}
      Sie haben eine Kreditkarte hinterlegt.
    {% endif %}
    
    {% if user.creditcard %}
      Sie haben eine Kreditkarte hinterlegt.
    {% endif %}
    
    #=> Beide Abfragen dissen den Benutzer, wenn er keine Kreditkarte hat.
    {% if user.payments == empty %}
      Sie haben noch keine Zahlung geleistet!
    {% endif %}
    
    #=> Die Abfrage prüft, ob bereits eine Zahlung eingegangen ist.
    {% if user.age > 17 %}
      Einloggen
    {% else %}
      Eintritt erst ab 18 Jahren.
    {% endif %}
    
    #=> Die Eingabe prüft, ob der Benutzer Zugriff auf den gesperrten Bereich für Erwachsene hat.
    zahlen = 1,2,3
    
    {% if zahlen contains 2 %}
      Der Array enthält die Zahl 2.
    {% endif %}
    
    #=> Die Abfrage prüft, ob der Array Zahlen die Ziffer 2 enthält.
    string = 'Hallo Welt!'
    
    {% if string contains 'Hallo' %}
      Die Zeichenkette enthält 'Hallo'!
    {% endif %}
    
    #=> Die Abfrage prüft, ob das Wort Hallo in der Zeichenkette string enthalten ist.

    Auswahlwerkzeug (case)

    Wenn Sie mehr als eine Abfrage benötigen, bietet sich anstelle von verschachtelten If-Else-Abfragen das Case Statement an.

    Einige Beispiele dazu:

    {% case template %}
    {% when 'label' %}
     {{  label.title }} 
    {% when 'product' %}
     {{  produkt.haendler | link_zum_haendler }}  / {{  produkt.title }} 
    {% else %}
     {{ seite.title}} 
    {% endcase %}
    
    #=> Ist das Template ein Label, wird der Titel ausgegeben.
    #=> Handelt es sich um ein Produkt-Template, wird ein Link ausgegeben.
    #=> Trifft keine Bedingung zu, wird der Seitentitel ausgegeben.
    {% case Bedingung %}
    {% when 1 %}
     Anweisung 1
    {% when 2 or 3 %}
     Anweisung 2 oder 3
    {% else %}
     ... else ...
    {% endcase %}
    
    #=> Wenn die Bedingung den ersten Punkt erfüllt, wird die Anweisung 1 ausgeführt.
    #=> Wenn die Bedingung den zweiten oder dritten Punkt erfüllt, wird die Anweisung 2 oder 3 ausgeführt.

    Kreislauf (cycle)

    Häufig muss mehrfach zwischen verschiedenen Farben oder Aufgaben gewechselt werden. DotLiquid hat eine eingebaute Lösung für solche Funktionen, den cycle-Tag.

    Ein Beispiel dazu:

    {% cycle 'eins', 'zwei', 'drei' %}
    {% cycle 'eins', 'zwei', 'drei' %}
    {% cycle 'eins', 'zwei', 'drei' %}
    {% cycle 'eins', 'zwei', 'drei' %}
    
    #=> Das Beispiel resultiert in:
    
    #=> eins
    #=> zwei
    #=> drei
    #=> eins

    Wenn kein Name für die Gruppe der cycle-Elemente definiert wurde, geht DotLiquid davon aus, dass ein Cycle mit den selben Elementen eine Gruppe darstellt.

    Willst du allerdings zwei Gruppen mit identischen Inhalten parrallel nutzen, kannst du den Gruppen optional einen Namen vergeben. Der Name kann auch eine Variable sein.

    Ein Beispiel dazu:

    {% cycle 'Gruppe 1': 'eins', 'zwei', 'drei' %}
    {% cycle 'Gruppe 1': 'eins', 'zwei', 'drei' %}
    {% cycle 'Gruppe 2': 'eins', 'zwei', 'drei' %}
    {% cycle 'Gruppe 2': 'eins', 'zwei', 'drei' %}
    
    #=> Das Beispiel resultiert in:
    
    #=> eins
    #=> zwei
    #=> eins
    #=> zwei

    Tabellenzeilen (tablerow)

    Tablerow ist von der Funktion mit einer for-loop-Schleife identisch, der Unterschied besteht lediglich darin, dass diese Schleife, jeder Zeile spezielle HTML-Zeichen mit übergibt.

    Ein Beispiel dazu:

    <style>
     .col1 {color:blue;}
     .col3 {color:red;font-weight:bold;}
    </style>
    
    <table>
    {% tablerow product in Vorgang.Auftrag.Positionen cols:1 %}
     {{ product.Menge }}x </td><td> {{ product.Bezeichnung }} </td><td class="col3" align="right"> {{ product.BruttopreisGesamt | Nummer: 'N2' }}
    {% endtablerow -%}
    </table>

    Die Ausgabe könnte dann im Code so aussehen:

    <style>
     .col1 {color:blue;}
     .col3 {color:red;font-weight:bold;}
    </style>
    
    <table>
    <tr class="row1"><td class="col1"> 1x </td><td> Beliebtestes Fussball-Shirt XL </td><td class="col3" align="right"> 20,00
    </td></tr>
    <tr class="row2"><td class="col1"> 1x </td><td> Damentrikot Weltmeisterschaft S </td><td class="col3" align="right"> 89,99
    </td></tr>
    <tr class="row3"><td class="col1"> 1x </td><td> Klasse Herren Fussballschuhe Gr. 42 </td><td class="col3" align="right"> 89,99
    </td></tr>
    <tr class="row4"><td class="col1"> 1x </td><td> DHL Versand </td><td class="col3" align="right"> 4,95
    </td></tr>
    </table>

    Und im Browser würde dieses Ergebnis erscheinen:

    1x  Beliebtestes Fussball-Shirt XL  	20,00
    1x  Damentrikot Weltmeisterschaft S  	89,99
    1x  Klasse Herren Fussballschuhe Gr. 42 89,99
    1x  DHL Versand 			 4,95

    Schleifen (for loop)

    DotLiquid bietet ebenfalls die aus anderen Programmiersprachen bekannte Möglichkeit der Abfrage-Schleifen in Arrays mit mehreren Inhalten.

    {% for item in array %}
     {{ item }} 
    {% endfor %}
    
    #=> Die Schleife gibt nacheinander alle Inhalte des Arrays einmal aus.

    Auch mehrdimensionale Arrays, zum Beispiel bestehend aus einer Artikelnummer item[0], einem Artikelnamen item[1] und einer Artikelbeschreibung item[2] sind möglich.

    Ein Beispiel dazu:

    {% for item in hash %}
     {{ item[0] }} : {{ item[1] }} 
    {% endfor %}
    
    #=> Diese Schleife gibt die Artikelnummer und den Artikelnamen getrennt durch einen Doppelpunkt, für jedes Item des Arrays, aus.

    Während jeder Schleife existieren in DotLiquid folgende feste Hilfsvariablen, die für Styling- oder Steuerungsfunktionen sinnvoll einsetzbar sind:

    • forloop.length => Anzahl aller Items in der Schleife.
    • forloop.index => Aktuelle Position innerhalb der Schleife.
    • forloop.index0 => Aktuelle Position innerhalb der Schleife inkl. 0.
    • forloop.rindex => Wieviele Positionen innerhalb der Schleife folgen noch.
    • forloop.last => Hierbei handelt es sich um eine Abfrage, ob der aktuelle Eintrag der letzte in der Schleife ist.
    • forloop.rindex0 => Wieviele Positionen innerhalb der Schleife folgen noch inkl. 0.
    • forloop.first => Hierbei handelt es sich um eine Abfrage, ob der aktuelle Eintrag der erste in der Schleife ist.

    Über diverse zusätzliche Attribute einer Schleife, ist es möglich zu definieren, welche Inhalte bearbeitet und welche übersprungen werden sollen:

    • limit => Beschränkung wie viele Items aus dem Array maximal bearbeitet werden sollen.
    • offset => Das Offset bestimmt, wieviele Items in dem Array übersprungen werden sollen.
    • reversed => Wird ohne Wert übergeben und führt dazu, dass die Schleife rückwärts abgearbeitet wird.

    Dazu ein paar Beispiele:

    #array = [1,2,3,4,5,6]
    {% for item in array limit:2 offset:2 %}
     {{ item }},
    {% endfor %}
    
    #=> Diese Schleife würde als Ausgabe 3,4, erzeugen.
    {% for item in collection reversed %}
     {{ item }}
    {% endfor %}
    
    #=> Diese Schleife gibt alle Inhalte von collection in umgekehrter Reihenfolge aus.

    Es ist außerdem noch möglich, die Schleife so zu beeinflussen, dass sie sich nur in einem definierten Rahmen wiederholt. Der Rahmen kann fest oder durch eine Variable festgelegt werden.

    Dazu ein Beispiel:

    # Der Array Artikel enthält vier Elemente
    
    {% for i in (1..Artikel.quantity) %}
     {{ i }},
    {% endfor %}
    
    #=> Die Schleife resultiert in 1,2,3,4,.

    Eigene Variablen (assign)

    Sie können zudem Daten in selbst definierten Variablen ablegen. Die eigenen Variablen lassen sich dann wie normale DotLiquid-Variablen einsetzen. Der simpelste Weg zur eigenen Variable führt über den assign-Tag.

    Dazu ein Beispiel:

    {% assign Style = 'freestyle' %}
    
    {% if Style %}
     <p>Freestyle!</p>
    {% endif %}
    
    #=> Wenn Style den Wert "freestyle" hat, wird der HTML-Code ausgegeben.

    Außerdem ist es möglich, den Variablen Boolean-Werte zu übergeben, das heißt die eigene Variable kann True oder False sein:

    Dazu ein Beispiel:

    {% assign freestyle = false %}
    
    {% if t == 'freestyle' %}
     {% assign freestyle = true %}
    {% endif %}
    
    #=> Die Variable freestyle besitzt zu Beginn den logischen Wert False.
    #=> Ist der Wert von "t" dann zum Zeitpunkt der Abfrage "freestyle", wird die Variable freestyle auf den logischen Wert True gesetzt.
    
    {% if freestyle %}
     <p>Freestyle!</p>
    {% endif %}
    
    #=> Im weiteren Verlauf prüft die Abfrage, ob freestyle wahr ist und gibt im Erfolgsfall den HTML-Code aus.

    Filter anwenden

    Wenn Sie auf den Operanten einen Filter anwenden wollen, müssen Sie das Ergebnis des Filters zuerst in eine Variable schreiben, um damit die Abfrage durchzuführen.

    Der Operant ist zum Beispiel bei der if-else-Abfrage die linke Seite der Bedingung; also lautet bei {% if user.name == ‚Mustermann‘ %} der Operant user.name.

    In der folgenden if-else-Abfrage, die wir oben bereits verwendet haben, wird nur die Schreibweise „Mustermann“ beziehungsweise „Musterfrau“ erkannt. Eine andere Schreibweise wie „mustermann/musterfrau“ führt nicht dazu, dass der Satz „Hallo Herr Mustermann“ ausgegeben wird.

    {% if user.name == 'Mustermann' %}
      Hallo Herr Mustermann.
    {% elsif user.name == 'Musterfrau' %}
      Hallo Frau Musterfrau.
    {% endif %}
    
    #=> Gibt den ersten Satz für den "Mustermann" und den zweiten Satz für die "Musterfrau" aus.

    Wenn Sie die vorhandenen Schreibweise egalisieren wollen, können Sie den Filter „Kleinbuchstaben“ (downcase) verwenden und das Ergebnis in eine eigene Variable schreiben wie unter Eigene Variablen (assign) erklärt.

    {% assign nameDowncase =  user.name | downcase-%}
    {% if nameDowncase == 'mustermann' %}
     Hallo Herr Mustermann und Herr mustermann und MuSTERmann.
    {% elsif nameDowncase == 'musterfrau' %}
     Hallo Frau Musterfrau.
    {% endif %}
    
    
    #=> Gibt den Satz für den "Mustermann", "mustermann", "MuSTERmann" etc. und den zweiten Satz für die "Musterfrau", "musterfrau", "MuSTERfrau" etc. aus.

    Elemente verketten (capture)

    Wollen Sie eine größere Anzahl an Textelementen in einer Variable kombinieren, bietet sich das capture-Tag zum verketten von Textelementen an. Das capture-Tag ist ein Block-Tag, welches jeden Inhalt zwischen dem Start- und End-Tag des Elements wie bei einer Ausgabe behandelt. Der Inhalt wird allerdings nicht auf dem Bildschirm oder in einer Datei ausgegeben, sondern wird in einer neuen eigenen Variable abgelegt. Diese Variable kann dann an einer anderen Stelle im Programmcode abgerufen und verwendet werden.

    Dazu ein Beispiel:

    {% capture attribute_name %}
     {{ item.title | Upcase}}-{{ i }}-color
    {% endcapture %}
    
    #=> Hier speichern wir den item.title in Großbuchstaben sowie einen Farbcode i-color.

    Das Beispiel soll in einem HTML-Code ausgegeben werden:

    <label for="{{ attribute_name }}">Color:</label>
    <select name="attributes[{{ attribute_name }}]" id="{{ attribute_name }}">
     <option value="red">Red</option>
     <option value="green">Green</option>
     <option value="blue">Blue</option>
    </select>
    
    #=> Die Variable attribute_name könnte also Beispielsweise "FARBWAHL-3-color" lauten.