Home / Shopify / Was ist Liquid von Shopify? 

Liquid ist eine Ruby-basierte Vorlagensprache, die von Shopify entwickelt wurde. Es ist derzeit als ein Open-Source-Projekt auf GitHub verfügbar und wird von einer Vielzahl von Softwareprojekten und Unternehmen verwendet. Das Rückgrat aller Shopify-Themen ist Liquid, mit dem dynamische Inhalte auf Online-Shop-Seiten geladen werden. 

Ist Liquid eine Programmiersprache oder eine Engine?

Liquid wird von einigen als Template-Sprache und von anderen als Template-Engine bezeichnet. Es spielt keine Rolle, welches Etikett Sie verwenden; beide Begriffe sind in vielerlei Hinsicht korrekt. Ich bezeichne es lieber als Template-Sprache. Es verfügt über Syntax (wie herkömmliche Programmiersprachen), Ausgabe, Logik und Schleifen und interagiert mit Variablen (Daten) auf die gleiche Weise wie eine webzentrierte Sprache wie PHP. 

Website-Designer und -Entwickler können eine Vorlagensprache verwenden, um Webseiten mit sowohl statischem als auch dynamischem Inhalt zu erstellen, der sich von einer Seite zur nächsten ändert. Eine Vorlagensprache ermöglicht es Ihnen, die statischen Teile, aus denen das Layout einer Webseite besteht, wiederzuverwenden, während Sie sie dynamisch mit Daten aus Ihrem Shopify-Shop füllen. 

Die statischen und dynamischen Elemente sind in HTML bzw. Liquid geschrieben. Wenn der Code in der Datei kompiliert und an den Browser übertragen wird, werden die Liquid-Komponenten in der Datei durch Daten aus dem Shopify-Store ersetzt, in dem das Theme installiert ist. 

Liquid Syntax

Liquid verfügt über eine Syntax, interagiert mit Variablen und enthält Konstrukte wie Ausgabe und Argumentation, genau wie herkömmliche Programmiersprachen. Flüssige Konstrukte sind aufgrund ihrer verständlichen Syntax leicht zu erkennen und können durch die folgenden Sätze von Trennzeichen von HTML getrennt werden: 

Trennzeichen mit doppelten geschweiften Klammern {{ }} zeigen eine Ausgabe an. 

Prozentuale Trennzeichen in geschweiften Klammern {% %} zeigen Logik und Kontrollfluss an. 

Objekte

Flüssige Objekte sind Objekte, die Daten von einem Shopify-Admin ausgeben. Objekte werden in einer Designvorlage in doppelte geschweifte Klammern eingeschlossen und sehen so aus: {{ product.title }} 

Produkt ist das Objekt im obigen Beispiel und Titel ist eine Eigenschaft dieses Objekts. Mit jedem Artikel ist eine Eigenschaftsliste verbunden. Weitere Informationen zu den Eigenschaften des Produktobjekts finden Sie in der Liquid-Referenz. 

Tags

Vorlagenlogik und Kontrollfluss werden mit Liquid Tags erstellt. Wenn die Startseite gerendert wird, erzeugen die geschweiften Prozenttrennzeichen %% und der Text, den sie umgeben, keine sichtbare Ausgabe. Auf diese Weise können Sie Variablen zuweisen, Bedingungen und Schleifen erstellen, ohne dass auf der Seite Liquid-Logik angezeigt wird. 

Abhängig davon, ob ein Produkt verfügbar ist oder nicht, können Sie beispielsweise Liquid-Tags verwenden, um unterschiedliche Inhalte auf der Produktseite anzuzeigen: 

{% if product.available %} 

<h2>Preis: 99,99 $</h2> 

{% anders %} 

<h2 class=“sold-out“>Dieses Produkt ist leider ausverkauft.</h2> 

{% endif %} 

Wenn das Produkt verfügbar ist, lautet die Ausgabe: 

Preis: 99,99 $ 

Wenn das Produkt nicht verfügbar ist, lautet die Ausgabe: 

Dieses Produkt ist bereits ausverkauft. 

Filter

Zahlen, Zeichenfolgen, Objekte und Variablen können alle mit Flüssigkeitsfiltern modifiziert werden. Sie werden durch ein Pipe-Zeichen gekennzeichnet und innerhalb eines Output-Tags platziert. 

Wenn Sie mehr über E-Commerce-Entwicklungsplattformen oder Apps erfahren möchten, lesen Sie unsere Lexika für Shopify und Shopware. Unser engagiertes Outsourcing-Team kann Ihr Partner im E-Commerce sein.   

Arrange a free consultation now!