Erstellen Sie mit der Liquid-Engine ein Shopify-Thema

Autor: Peter Berry

Erstelldatum: 14 Juli 2021

Aktualisierungsdatum: 13 Kann 2024

Video: How to use the Shopify CLI for Building Themes

Inhalt

Themendateien und Ordner
Zuordnen von URLs zu Vorlagen
Liquid: die Grundlagen
Product.liquid verstehen
Ausgabe
Logik
Filter
Was kommt als nächstes?
Weitere Ressourcen und Inspiration

In den letzten Wochen habe ich das Shopify-Thema für Viewport Industries erstellt, die Firma Elliot Jay Stocks und ich haben es letztes Jahr gegründet. Wir haben uns aus mehreren Gründen für Shopify entschieden:

Es ermöglicht uns, sowohl digitale als auch physische Produkte zu verkaufen
Es ist vollständig gehostet, sodass Sie sich keine Sorgen um Server machen müssen
Es unterstützt eine Reihe von Zahlungsgateways, die sich gut in unsere Bank integrieren lassen
Es ist themenbasiert, was bedeutet, dass wir HTML, CSS und JavaScript unserer vorhandenen Website problemlos wiederverwenden können

Shopify verwendet eine Vorlagen-Engine namens Liquid, um Daten aus Ihrem Geschäft in Ihre Vorlagen auszugeben. Flüssigkeit ist möglicherweise die einzige Zutat eines Shopify-Themas, die Sie zuvor noch nicht verwendet haben, und es kann abstoßend sein. Aber die gute Nachricht ist, dass es wirklich nicht so schwer ist, damit anzufangen.

Wenn Sie jemals Smarty, ERB oder Twig verwendet haben, ist Ihnen das Folgende bekannt. Wenn nicht, machen Sie sich keine Sorgen: Es geht nur darum, ein paar einfache Regeln zu lernen. Sobald Sie Ihrem Webentwicklungs-Toolkit Liquid-Kenntnisse hinzugefügt haben, können Sie in kürzester Zeit Themen für Kunden erstellen.

Themendateien und Ordner

Shopify-Themen sind nichts anderes als eine Reihe von Dateien (HTML-Dateien mit der Erweiterung .liquid, CSS, JS, Bilder usw.) und Ordnern. Themen können so aussehen und funktionieren, wie Sie möchten: Es gibt wirklich keine Einschränkungen. Hier ist die Grundstruktur eines Themas:

Vermögenswerte
config
Layouts
theme.liquid
Schnipsel
Vorlagen
404.liquid
article.liquid
blog.liquid
cart.liquid
collection.liquid
index.liquid
page.liquid
product.liquid
search.liquid

Mit diesen Dateien können Sie die grundlegendsten Themen erstellen. Natürlich möchten Sie wahrscheinlich CSS, JavaScript und einige Bilder hinzufügen. Sie würden diese in den Assets-Ordner legen. (Beachten Sie, dass Sie derzeit keine Unterordner in Ihrem Asset-Ordner zulassen.)

Um mehr über die Funktionsweise von Themen zu erfahren und mehr über die Ordner config und snippets zu erfahren, würde ich empfehlen, Theme from Scratch und Theme Settings im Shopify-Wiki zu lesen.

Alternativ können Sie sich für das kostenlose Partnerprogramm anmelden, einen Test-Shop erstellen und eines der vielen kostenlosen Themen überprüfen, die im Administrationsbereich Ihres Test-Shops verfügbar sind. Rufen Sie einfach den Themen-Editor im Menü Themen auf.

Zuordnen von URLs zu Vorlagen

Shopify-Designs funktionieren, indem die aktuelle URL einer bestimmten Vorlage zugeordnet wird. Wenn wir beispielsweise ein Produkt mit der folgenden URL anzeigen ...

http://www.unitedpixelworkers.com/products/indianapolis

... dann wird Shopify wissen, wie man Ihre verwendet product.liquid Vorlage. Aus diesem Grund sollten Sie für Ihre Vorlagen immer nur die oben aufgeführten Dateinamen verwenden.

Shopify weiß nicht nur, welche Vorlage in Bezug auf die aktuelle URL angezeigt werden soll, sondern stellt uns auch eine Reihe sehr spezifischer Variablen zur Verfügung. Diese werden als "Vorlagenvariablen" bezeichnet und ermöglichen es uns, Daten in unseren Vorlagen anzuzeigen.

Zum Beispiel haben wir in unserer Vorlage product.liquid Zugriff auf die passend benannte Vorlage Produkt Variable. Dies bedeutet, dass wir den Namen, die Beschreibung, den Preis und die Verfügbarkeit unseres Produkts in unserer Vorlage ausgeben können. Wir verwenden die Kombination aus Liquid- und Vorlagenvariablen, um unsere Vorlagen mit Daten zu unseren Produkten zu füllen.

Eine vollständige Liste der verfügbaren Vorlagenvariablen finden Sie im Shopify-Spickzettel von Mark Dunkley.

Liquid: die Grundlagen

Liquid ist hier, um unser Leben als Themendesigner zu erleichtern. Eine der wichtigsten Möglichkeiten hierfür ist die Verwendung von Layouts. Layouts eignen sich ideal zum Einfügen gängiger Seitenelemente wie Kopfzeile, Hauptnavigation, Fußzeile usw.

In meiner Ordnerstruktur oben sehen Sie eine Datei mit dem Namen theme.liquid im Layoutordner. Sie können sich theme.liquid als unsere Master-Vorlage vorstellen. Alle anderen Vorlagen, z. B. product.liquid, werden in dieser Master-Vorlage gerendert. Sie können mehr als ein Layout haben, wenn Sie möchten, aber das Standardlayout sollte immer theme.liquid heißen.

Ich habe die theme.liquid-Datei von United Pixelworkers noch nicht gesehen, aber Sie können sich vorstellen, dass sie die Markierung für die unten rot umrandeten Bereiche enthält.

So könnte ein grundlegendes Thema aussehen: Flüssiges Layout:

! DOCTYPE html>
html>
Kopf>
{{content_for_header}}
Titel> Seitentitel geht hierher / Titel>
/ head>
Körper>
{{content_for_layout}}
/ body>
/ html>

Sie werden zwei Sätze bemerken, die in doppelte geschweifte Klammern eingeschlossen sind: {{content_for_header}} und {{content_for_layout}}. Dies sind unsere ersten Beispiele für Liquid in Aktion.

Shopify verwendet häufig {{content_for_header}}, um dem Abschnitt head> eines Dokuments bestimmte Dateien hinzuzufügen, z. B. das Hinzufügen von Tracking-Code. In {{content_for_layout}} wird der Inhalt unserer URL-zugeordneten Vorlage angezeigt. Wenn wir beispielsweise eine Produktseite anzeigen, ersetzt unsere Datei product.liquid {{content_for_layout}} in unserer Layoutdatei.

Product.liquid verstehen

Nachdem wir uns nun mit den Grundlagen von Layouts befasst haben, ist es an der Zeit, sich eine Vorlage anzusehen.In den Geschäften dreht sich alles um die Produkte. Schauen wir uns das an product.liquid.

Hier ist ein sehr einfaches, aber funktionales Beispiel für eine product.liquid-Vorlage.

h2> {{product.title}} / h2>
{{ Produktbeschreibung }}
{% wenn product.available%}
form action = "/ cart / add" method = "post">
select id = "product-select" name = ’id’>
{% für Variante in product.variants%}
Optionswert = "{{Variante.ID}}"> {{Variante.Titel}} - {Variante.Preis} / Option>
{% endfor%}
/ wähle>
input type = "submit" name = "add" value = "In den Warenkorb" id = "purchase" />
/ form>
{% else%}
p> Dieses Produkt ist nicht verfügbar / p>
{% endif%}

Hier gibt es eine Reihe wichtiger Liquid-Konzepte. Schauen wir sie uns der Reihe nach an.

Ausgabe

Die erste Codezeile enthält die Phrase {{ Produktname }}. Beim Rendern wird der Titel des Produkts ausgegeben, der, wie Sie jetzt wissen, durch die URL bestimmt wird. Im folgenden Beispiel von United Pixelworkers lautet der Produkttitel einfach "Indianapolis".

Liquid verwendet das Punktsyntaxformat. In diesem Fall entspricht {{product.title}} der Produktvorlagenvariablen und ihrem title-Attribut. Wir können die Produktbeschreibung auf die gleiche Weise mit ausgeben {{ Produktbeschreibung }}.

Dies ist in flüssiger Form als bekannt Ausgabe. Alle Ausgaben werden wie folgt durch doppelte geschweifte Klammern gekennzeichnet: {{your_output}}.

Logik

In der nächsten Zeile des Codes sehen Sie eine Anweisung in geschweiften Klammern, gefolgt von einem%: In diesem Fall {% wenn product.available%}. Dies ist ein weiteres wichtiges Konzept in Liquid, bekannt als Logik. Weiter unten werden Sie die Anweisungen {% else%} und schließlich {% endif%} bemerken.

Diese if-Anweisung ermöglicht es uns, anhand einer oder mehrerer Bedingungen zu bestimmen, was in unserer Vorlage angezeigt wird: In diesem Fall, ob unser Produkt verfügbar ist oder nicht. Tatsächlich heißt das: „Wenn unser Produkt verfügbar ist, zeigen Sie die diesbezüglichen Informationen an. Andernfalls wird eine Nachricht angezeigt, die den Benutzer darüber informiert, dass sie nicht vorrätig ist. “

Alle logischen Anweisungen in Liquid verwenden die prozentuale Notation der geschweiften Klammer, d. H. {% If…%}. Denken Sie daran, Ihre Aussagen ordnungsgemäß zu schließen, da Sie sonst auf Probleme stoßen. Beispielsweise:

{% wenn product.available%}
Zeigen Sie hier die Schaltfläche In den Warenkorb
{% else%}
Zeigen Sie die Meldung an, wann das Produkt das nächste Mal verfügbar sein wird
{% endif%}

Filter

Liquid ermöglicht es uns, unsere Ausgabe auf verschiedene Arten zu manipulieren. Eine davon ist die Verwendung von Filtern. Der Inhalt, der in den Filter gelangt, wird am anderen Ende auf eine bestimmte Weise geändert.

Wenn Sie sich das obige Beispiel für product.liquid ansehen, werden Sie feststellen {Geld}. Eine Variante ist ein Begriff, der verwendet wird, um eine Variation eines Produkts zu beschreiben: zum Beispiel verschiedene Farben und Größen. Interessant ist hier, dass wir einen Filter verwenden, um die Preisausgabe zu ändern - in diesem Fall mithilfe des Geldfilters. Dies führt dazu, dass das Währungssymbol des Shops an der Vorderseite des Preises hinzugefügt wird.

Andere Filter umfassen strip_html, wodurch alle HTML-Tags aus einem bestimmten Textstück entfernt werden und ucase, Dadurch wird es in Großbuchstaben umgewandelt.

Sie können Filter auch miteinander verbinden. Beispielsweise:

{article.content}

In diesem Fall nehmen wir das Inhaltsattribut der Artikelvorlagenvariablen und übergeben es an den Filter strip_html und schließlich an den Filter zum Abschneiden. Sie werden feststellen, dass wir mit dem Kürzungsfilter festlegen können, wie lange die endgültige Ausgabe dauern soll: in diesem Fall 20 Zeichen.

Mithilfe von Filtern können wir auch schnell Skript- und Bildelemente in Vorlagen erstellen. Hier ist eine sehr schnelle Möglichkeit, mithilfe eines Filters ein Bild mit einem zugehörigen Alt-Tag auszugeben:

{asset_url}

Wenn Sie dies in unserem Shopify-Design verwenden, wird das folgende img-Element in unserer Vorlage gerendert:

img src = "/ files /shops / Ihre_Ladennummer / Assets / logo.png" alt = "Site-Logo" />

Das asset_url Der Filter ist sehr nützlich, da er den vollständigen Pfad zum aktuellen Thema zurückgibt Vermögenswerte Mappe. Mit diesem Filter können Sie Ihr Thema auf mehrere Shops anwenden und müssen sich nicht um Pfade kümmern.

Was kommt als nächstes?

Hoffentlich haben Ihnen diese wenigen Beispiele gezeigt, dass Liquid nicht so kompliziert ist. Natürlich können Sie noch viel mehr damit tun, aber wenn Sie Ausgabe, Logik und Filter beherrschen, sind Sie auf dem besten Weg, das meiste zu verstehen, was Sie zum Erstellen eines Shopify-Themas benötigen.