Welche Liquid-Tags es gibt — und welche abbrechen

Genau ein eigenes Tag, dazu die von LiquidJS. Fünf Tags aus anderen Liquid-Welten brechen hier die Seite ab.

Für Entwickler

Voraussetzungen

  • Recht: website:write

Das einzige EIGENE Tag ist `{% section "name" %}`. Es rendert `sections/<name>.liquid` mitten in der laufenden Vorlage. Der Name ist der DATEINAME, nicht die Kennung eines Abschnitts in einer Vorlage. Benutzt wird es in `layout/theme.liquid` für Kopf- und Fussbereich.

Aus LiquidJS stehen unter anderem zur Verfügung: `{% if %}`, `{% unless %}`, `{% case %}`, `{% for %}`, `{% assign %}`, `{% capture %}`, `{% render %}`, `{% include %}`, `{% liquid %}` und `{% comment %}`.

Diese fünf Tags gibt es NICHT, und sie brechen die Seite mit einem Parse-Fehler ab: `{% schema %}`, `{% form %}`, `{% style %}`, `{% stylesheet %}` und `{% javascript %}`. Wer ein Theme von einem anderen Anbieter übernimmt, stolpert hier zuerst.

Der wichtigste Unterschied zu anderen Liquid-Welten: Das Schema eines Abschnitts steht hier NICHT als `{% schema %}`-Block in der `.liquid`-Datei, sondern in einer eigenen Datei `sections/<typ>.schema.json` daneben.

Für CSS und JavaScript legen Sie Dateien in `assets/` und binden sie mit `asset_url` ein — oder Sie schreiben ein gewöhnliches `<style>`- beziehungsweise `<script>`-Element in die Vorlage.

Codebeispiele

Die Tags von liquidjs, alle in einem Durchlauf
Liquid
{%- assign titel = restaurant.name | upcase -%}{%- capture anschrift -%}{{ restaurant.address_full }} · {{ restaurant.phone }}{%- endcapture -%}<h1>{{ titel }}</h1><p>{{ anschrift }}</p>{% for gericht in products limit: 2 %}  <li class="{% cycle 'gerade', 'ungerade' %}">{{ forloop.index }}. {{ gericht.title }}</li>{% endfor %}{% unless analytics.enabled %}<p>Messung ist abgeschaltet.</p>{% endunless %}{% comment %}Dieser Text erscheint nirgends.{% endcomment %}{% raw %}{{ das hier wird nicht ausgewertet }}{% endraw %}
Verfügbar sind unter anderem `if`, `elsif`, `else`, `unless`, `case`/`when`, `for`, `break`, `continue`, `cycle`, `tablerow`, `assign`, `capture`, `increment`, `decrement`, `echo`, `liquid`, `raw`, `comment`, `render` und `include`.
tablerow gibt es hier tatsächlich
Liquid
<table>
{% tablerow gericht in products cols: 2 %}{{ gericht.title }}{% endtablerow %}
</table>
Eines der wenigen Shopify-Tags, das liquidjs mitbringt. Es erzeugt `<tr>`- und `<td>`-Elemente samt Klassen `row1`, `col1` und so fort — die `<table>`-Hülle müssen Sie selbst setzen.
Diese sechs Tags brechen die Seite ab
AusschnittLiquid
{% schema %}{ "name": "Mein Abschnitt" }{% endschema %}{% style %}.hero { color: red; }{% endstyle %}{% stylesheet %}.hero { color: red; }{% endstylesheet %}{% javascript %}console.log('hallo'){% endjavascript %}{% form 'contact' %}{% endform %}{% paginate products by 12 %}{% endpaginate %}
Ausschnitt: läuft nicht für sich allein — er gehört an die passende Stelle einer bestehenden Vorlage.NICHT prüfbar, weil jede dieser Zeilen absichtlich abbricht: die Engine wirft „tag … not found" beim Zerlegen der Vorlage, also noch BEVOR irgendetwas gerendert wird. Die ganze Seite bleibt dann weiss, nicht nur der Abschnitt. Das Schema gehört hier in eine eigene Datei `sections/<typ>.schema.json`; für CSS und JavaScript nehmen Sie `assets/` mit `asset_url` oder ein gewöhnliches `<style>`- beziehungsweise `<script>`-Element.

Wo im Dashboard

/restaurant/[slug]/website/themes/[id]/code

Im Dashboard öffnen