Share
Im ersten Teil dieser Serie (Einführung in Shopify durch einen Webdesigner) habe ich Ihnen die Handelsplattform von Shopify vorgestellt, eine Reihe der wichtigsten Konzepte erläutert und die Struktur eines Shopify-Themas erläutert.
Dieses Tutorial konzentriert sich auf Liquid, die Shopify-Vorlagensprache. Wir werden uns die Vorteile von Liquid ansehen, besprechen, wie wir Daten aus unseren Stores importieren und bearbeiten können, und schließlich einige der wichtigsten Funktionen vorstellen, die Sie täglich in Ihrer Shopify-Themenentwicklung verwenden werden.
Wenn Sie Hilfe bei der Behebung und Behebung von Problemen mit Ihrem Shopify-Shop benötigen oder sogar von Grund auf neu einrichten möchten, finden Sie einen Shopify-Experten von Envato Studio, der Ihnen helfen kann. Hier sind einige Beispiele:
Dies ist ein hervorragender Basis-Service, der Ihnen hilft, sich schnell und einfach bei Shopify einzurichten. Hier ist, was es beinhaltet:
Wenn Sie Hilfe bei der korrekten Installation eines Designs benötigen, kann dieser Shopify-Experte helfen. Sie werden:
Die Grundversorgung kostet nur 50 US-Dollar und weitere Extras sind verfügbar, wenn Sie dies wünschen.
Was ist, wenn Sie ein individuelles Thema benötigen? Dieser Anbieter bietet die Anpassung Ihres vorhandenen Shopify-Designs an alle Ihre Bedürfnisse.
Anpassungen umfassen:
Suchen Sie nach einem umfassenden Paket? Dieser Anbieter wird Ihr Design installieren und einrichten. fügen Sie Ihr Logo und Branding hinzu; Farben und Schriftarten anpassen; Passen Sie die flüssigen Vorlagen an. Hinzufügen von Skripts und Installieren von Apps für die Funktionalität; Produkt-Tags, Varianten und Kategorien einrichten; Fügen Sie Ihre Produkte hinzu oder importieren Sie sie. und führen Sie alle erforderlichen Tests durch.
Dies umfasst bis zu 20 Stunden Aufbau- und Entwicklungszeit.
Es gibt viele weitere Shopify-Experten, die Sie bei Envato Studio unterstützen können. Durchsuchen Sie die verfügbaren Dienste oder lesen Sie weiter, um mehr über die Verwendung von Liquid zu erfahren.
Wenn Sie mit dem Konzept einer Vorlagensprache nicht vertraut sind, beschreibe ich sie oft als eine Brücke zwischen den Daten in Ihrem Geschäft und den an den Browser gesendeten HTML-Vorlagen.
Durch die Verwendung von einfach zu lesenden (und leicht zu merkenden) Konstrukten können wir auf Daten aus unserem Shop zugreifen (z. B. einen Produkttitel, eine Beschreibung der Kollektion, eine Reihe von Produktbildern oder einen Blogbeitrag) und diese Daten direkt in unsere Vorlagen ausgeben . Einer der Hauptvorteile ist, dass wir nicht wissen müssen, um welche Daten es sich handelt. Vielmehr müssen wir nur wissen, auf welche Variablen wir in jeder Vorlage zugreifen können.
Ein Beispiel für eine typische product.liquid-Vorlage in SublimeText2 mit Hervorhebung der Liquid-SyntaxWie in Teil 1 dieser Serie beschrieben, entscheidet Shopify anhand des aktuell angeforderten URLs, welche Vorlage an den Browser gesendet werden soll. Wenn die URL zum Beispiel http://shopify-for-designers.myshopify.com/collections/cups lautet, wird Shopify das rendern Sammlungen Vorlage.
Nachdem Shopify die relevante Vorlage zum Rendern ausgearbeitet hat, analysiert es die Vorlage (und ihre äußere Layoutdatei) und sucht nach Platzhaltern in Liquidität. Wenn diese gefunden werden, ersetzt Shopify den Liquid-Code durch die relevanten Daten aus Ihrem Geschäft.
Eine andere Möglichkeit, über Vorlagensprachen nachzudenken, ist wie "Suchen und Ersetzen" in einem Texteditor. Die Plattform, in diesem Fall Shopify, sucht nach allen Liquid-Platzhaltern und ersetzt diese durch Daten aus Ihrem Geschäft. Das fertig erstellte Dokument wird dann als HTML an den Browser gesendet.
Es mag sich auf den ersten Blick ein wenig fremdartig anfühlen, wenn dies Ihr erster Vorstoß beim Templating ist, aber Sie werden bald den Dreh raus haben.
EIN Platzhalter ist ein Stück Code, der letztendlich ersetzt wird, wenn die Vorlage wird an den Browser gesendet.
Es gibt zwei Arten von Platzhaltern in Liquid. Die erste ist die doppelte Klammer bezeichnen Ausgabe und der zweite ist der Prozentsatz in Klammern %% bezeichnen Logik.
Hier ist ein schnelles Beispiel eines Ausgabe Platzhalter, die Sie normalerweise in finden Produkt.Liquid Mikroschablone:
Produktname
Nach dem Rendern würde der Name des aktuell angezeigten Produkts anstelle von angezeigt , zum Beispiel:
Keirs Kaffeetasse
Wenn Sie nicht mit einem Filter manipuliert werden (was wir später betrachten werden), müssen Sie lediglich den Platzhalter durch Text aus Ihrem Geschäft ersetzen.
Liquid ermöglicht es uns nicht nur, Daten aus unserem Geschäft abzurufen und in unseren Vorlagen anzuzeigen (wie oben gezeigt), sondern auch eine genaue Kontrolle Was wird in unseren Vorlagen mit logischen Konstrukten und Schleifen angezeigt.
Beispielsweise können wir ein anderes HTML-Snippet anzeigen, je nachdem, ob das aktuell angezeigte Produkt auf Lager ist oder nicht.
Wir können Liquid auch verwenden, um den gleichen Code mehrmals auszugeben - beispielsweise eine Serie von Produktbildern. Verwenden Schleifen ermöglicht es uns, alle mit einem Produkt verknüpften Produkte in wenigen Zeilen Liquid-Code auszugeben.
Liquid ist wirklich mächtig und obwohl Sie vielleicht denken, dass wir in den Programmierbereich kommen, bin ich zuversichtlich, dass Sie es ziemlich schnell finden werden.
Nun, da Sie ein grundlegendes Verständnis für die Funktionsweise von Liquid besitzen, werfen wir einen Blick auf vier Hauptmerkmale und deren Funktionsweise in Bezug auf die Themenentwicklung.
Wie bereits erwähnt, die doppelten Klammern in einem .Flüssigkeit Datei bezeichnen ein Ausgabe Platzhalter. Hier zwei Beispiele, auf die Sie häufig stoßen:
shop.name product.description
Die Ausgabe ermöglicht es uns, ein bestimmtes Datenelement aus unserem Geschäft in unsere Vorlage zu übernehmen und, wie der Name vermuten lässt, diese anstelle des Platzhalters "Liquid" auszugeben.
Nehmen wir an, mein Geschäft hieß "Keir's Coffee Emporium". Wenn ich das benutzen würde Laden Name liquid tag Shopify würde den Namen meines Shops übernehmen und den flüssigen Platzhalter durch den Namen meines Stores direkt in meine Vorlage als HTML ersetzen.
Gleichermaßen, wenn wir verwenden würden Produktbeschreibung in unserer Produkt.Liquid Template Jeder Text, der in den WYSIWYG-Editor für dieses bestimmte Produkt eingegeben wird, wird anstelle von angezeigt Produktbeschreibung Platzhalter.
Hinweis: Der WYSIWYG-Editor gibt formatiertes HTML aus, so dass Sie Ihre Dateien nicht einpacken müssen Produktbeschreibung mit beliebigen HTML-Elementen, z. ein .
Jede Variable, ob eine globale Variable (in jeder einzelnen Vorlage in Ihrem Design verfügbar) oder eine Ebenenvariable (nur für eine bestimmte Vorlage verfügbar), kann auf diese Weise ausgegeben werden. Andere Beispiele sind:
shop.description product.title collection.title collection.description
Für eine vollständige Liste der Variablen, die Sie in Ihren Designs ausgeben können, empfehle ich dringend, Mark Dunkleys Spickzettel mit Lesezeichen zu versehen. Ich finde mich täglich damit beschäftigt.
Zusammenfassend lässt sich sagen, dass der Flüssigkeitsausstoß sehr ähnlich ist wie "Suchen und Ersetzen". Beim Rendern der Vorlage sucht Shopify alle Instanzen von Liquid-Ausgabe-Tags und ersetzt sie durch die relevanten Daten aus Ihrem Geschäft.
Sie werden auch an diesen Beispielen feststellen, dass Liquid das verwendet Punktsyntax für den Zugriff auf Daten. Das Element vor dem Punkt ist die Variable, während das Element danach ein Attribut dieser Variablen ist. Zum Beispiel hat unsere Shopvariable oben sowohl einen Namen als auch ein Beschreibungsattribut.
Die Shopify-Dokumentationsseite enthält Codebeispiele und Screencasts Kommen wir zur Liquid-Logik. Logische Tags sind beim ersten Mal etwas komplizierter, wenn Sie sie einmal selbst ausprobiert haben.
Während flüssig Ausgabe Platzhalter ermöglichen es uns, Daten zu erfassen und in unseren Vorlagen anzuzeigen Flüssige Logik Mit Tags können wir den Fluss einer Vorlage steuern. Im Gegensatz zu Output-Tags führt die Aufnahme von Logik-Tags in Ihre Vorlagen nicht dazu, dass etwas direkt gerendert wird, sondern ermöglicht uns die Kontrolle Was ist gerendert.
Ein typisches Beispiel, um zu veranschaulichen, wie Liquid-Logik verwendet wird, ist das Hervorheben, wann ein Produkt ausverkauft ist. Das folgende Beispiel befindet sich normalerweise in der Produkt.Liquid Mikroschablone:
% if product.available% Dieses Produkt ist verfügbar. % else% Dieses Produkt ist leider ausverkauft. % endif%
Wie Sie sehen, unterscheidet sich die Syntax für Liquid Logic etwas von der Ausgabe. Anstatt der Trennzeichen verwenden wir %%.
In dem obigen Beispiel steuern wir, was in unserer Vorlage ausgegeben wird, mit einem einfachen ob, sonst, endif Aussage. Auf viele Arten ob Aussagen sind wie Fragen.
Im obigen Beispiel, wenn die Antwort auf unsere ob Aussagefrage ist wahr Wir machen die Wörter "Dieses Produkt ist verfügbar", wenn es ist falsch Unsere Vorlage führt den Text weiter und gibt ihn aus % else% Klausel - in diesem Fall "Sorry, dieses Produkt ist ausverkauft".
Sie werden sich selbst finden ob viele Aussagen in der Shopify-Themenentwicklung. Hier ein weiteres Beispiel, um Ihr Verständnis zu erleichtern:
% if cart.item_count> 0%Sie haben cart.item_count Artikel in Ihrem Warenkorb
% else%In Ihrem Warenkorb befindet sich nichts :( Schauen Sie sich unser Sortiment an
% endif%
Dieses Beispiel zeigt eine Möglichkeit, wie Sie entweder die Anzahl der Artikel in einem Besucherkorb anzeigen oder einen Link zu Ihren Produkten ausgeben können.
Sie werden in diesem Beispiel feststellen, dass wir das Größere als verwenden > Operator. Als die cart.item_count Variable gibt die Anzahl der Artikel im aktuellen Benutzer-Warenkorb zurück, die wir überprüfen können, um zu sehen, ob der Wert größer als Null ist, d. h. Artikel enthalten.
Wenn das zurückkommt In Ihrem Warenkorb befindet sich nichts :( Schauen Sie sich unser Sortiment anwahr Wir können die Nachricht mit der aktuellen Elementanzahl ausgeben, wenn nicht ausgegeben werden kann
Sie haben Zugriff auf eine Vielzahl von Betreibern in Liquid, von denen Sie regelmäßig wiederkommen werden:
Accentsconagua
== gleich!= nicht gleich> größer als< weniger als> = größer oder gleich<= weniger oder gleichoder Dies oder dasund muss dies und das seinenthält Enthält die Teilzeichenfolge, wenn sie für einen String verwendet wird, oder Element, wenn sie für ein Array verwendet wirdWenden wir uns nun dem Konzept der Liquid-Loops zu.
Wenn Sie eine grundlegende Programmierung vorgenommen haben, ist Ihnen das Konzept des Datenschleifens sehr vertraut. Verwenden einer Schleife, häufig als a bezeichnet für Schleife, ermöglicht es uns, den gleichen Code in bekannter Weise in unserer Vorlage auszugeben.
Schauen wir uns ein Beispiel aus einem Shopify-Design an, um das Konzept zu festigen:
% für Bild in product.images%% endfor%
In diesem Beispiel in der Regel gefunden Produkt.Liquid Micro Template verwenden wir eine Schleife, um jedes Bild auszugeben, das dem aktuell angezeigten Produkt zugeordnet ist. Lassen Sie uns es in Schritte unterteilen, um es vollständig zu verstehen.
Unsere Eröffnungslinie führt uns in die Idee der Kollektionen in Liquid ein. nicht wie Produktkollektionen was wir uns im ersten Teil angeschaut haben Sammlungen in Liquid sind anders. Es ist in dieser Hinsicht eine unglückliche Namenskonvention, daher beziehe ich mich auf Sammlungen in Liquid als Flüssige Sammlungen um Verwirrung zu vermeiden.
Eine Liquid-Sammlung in Shopify-Motiven kann viele Formen annehmen, aber ein gutes Beispiel ist dies Produktbilder wie oben verwendet. Eine Flüssigkeitssammlung ist leicht zu erkennen, da sie normalerweise die Pluralform annimmt - wie in Bilder über. In unserem Beispiel handelt es sich um eine Liquid-Sammlung aller mit einem Produkt verknüpften Bilder.
Ein anderes Beispiel ist Produktvarianten. Dies würde ein Objekt zurückgeben, das Details zu allen Produktvarianten enthält, die in unserer Vorlage zur Überarbeitung bereitstehen. Wenn Sie einen Primer für Produktvarianten benötigen, haben wir diesen in Teil 1 besprochen.
Sie werden auch feststellen, dass wir das Wort verwenden Bild um das aktuelle Element in der Schleife anzuzeigen. Jedes Mal gehen wir um unsere Schleife Bild Dadurch erhalten wir Zugriff auf die Daten, die jedem Bild zugeordnet sind. Natürlich ist dies in jeder Schleife anders.
Es ist auch erwähnenswert, dass wir nicht wissen müssen, wie viele Loops auftreten werden. Nachdem es keine weiteren Bilder zum Schleifen gibt, wird Shopify den nächsten Teil der Vorlage fortsetzen und rendern.
Die zweite Zeile unseres Codes ist Teil HTML und Teil Liquid. Sie werden feststellen, dass die src Das Attribut wird mit einem Liquid-Ausgabe-Tag gefüllt. Wir werden uns Filter ansehen, die durch das gekennzeichnet sind | Als nächstes wird mit diesem kurzen Konstrukt das src-Attribut mit der vollständig qualifizierten URL zur "kleinen" Version des aktuellen Bildes in unserer Schleife aufgefüllt.
Die letzte Zeile unseres Beispiels ist unser Abschluss Endefür Aussage. Dadurch wird jeglicher Code, der innerhalb der Schleife gerendert wird, effektiv geschlossen.
Wenn wir drei Bilder in unserem hatten Produktbilder Objekt die endgültige Ausgabe würde so aussehen:
Pure Fix Cycles verwendet Schleifen, um die zahlreichen Produktvarianten für ihr Aerospoke-Rad auszugebenLoops sind wirklich nützlich und etwas, auf das Sie täglich in Ihrer Themenentwicklung stoßen werden. Die Ausgabe von Bildern und Produktvarianten sind zwei häufig anzutreffende Beispiele.
Ich habe bereits früher Filter in Bezug auf unser Loop-Beispiel erwähnt, also gehen wir noch ein wenig näher auf ihre Funktionsweise ein.
Filter werden in Verbindung mit einem Ausgabe-Tag verwendet. Ihr Zweck ist es, die Daten auf irgendeine Weise so zu manipulieren, dass das Format geändert wird. Ein gutes Beispiel ist der Datumsfilter:
article.published_at | Datum: '% d% B% Y'
Ohne den Filter würde Shopify einfach das Datum ausgeben, an dem der Blog-Artikel veröffentlicht wurde, und zwar in dem Format, in dem er in der Datenbank gespeichert ist - was möglicherweise nicht für Menschen lesbar ist. Jedoch durch Hinzufügen in der | und einschließlich des Datumsfilters können wir das Format selbst bearbeiten.
Wir beginnen auf der linken Seite mit einem Datum, in diesem Fall mit einem Datum, und durch die Verwendung des Filters wird die andere Seite geändert. Dies ist im Wesentlichen der einzige Zweck eines Filters. Es nimmt ein Stück Daten und manipuliert es irgendwie so, dass sich seine Form ändert.
Mark Dunkleys Spickzettel umreißt alle verfügbaren FlüssigkeitsfilterHier ist ein anderes Beispiel:
'style.css' | asset_url | stylesheet_tag
Hier verwenden wir zwei Filter, um ein vollständig geformtes Stilelement in unserer Layoutdatei zu erstellen.
Wir beginnen auf der linken Seite mit dem Namen unserer CSS-Datei und wenden zuerst das an asset_url Filter. Dies ist ein unglaublich nützlicher Filter. Da wir nicht wissen, wo sich unsere style.css-Datei im Shopify-Netzwerk befindet (außer in unserem Assets-Ordner in unserem Design), benötigen wir eine Möglichkeit, mit der Shopify den Pfad zur Datei angeben kann.
Dies ist der Zweck des asset_url Filter. Es nimmt den Namen unserer Datei, style.css Fügen Sie in diesem Beispiel den vollständigen Pfad zum Ordner "Assets" Ihres Geschäfts hinzu. Es ist erwähnenswert, dass nicht geprüft wird, ob die Datei vorhanden ist.
So sieht das bei der Ausgabe aus:
//cdn.shopify.com/s/files/1/0222/9076/assets/style.css
Der letzte Filter in der Kette, stylesheet_tag, Nimmt diese URL in ein Style-Element ein, das in unserer Layout-Datei ausgegeben wird. Hier ist das Endergebnis:
Jeder Filter übernimmt die Ausgabe von seinem vorhergehenden Filter und ändert diese wiederum. Wenn keine weiteren Filter zum Übergeben von Daten vorhanden sind, wird das Ergebnis als HTML in die Vorlage ausgegeben.
Es gibt viele wirklich nützliche Filter, hier einige, die Sie selbst verwenden werden:
In diesem Tutorial haben wir einiges durchgemacht. Wir haben uns Liquid und seine Beziehung zu unseren HTML-Micro-Templates und Layout-Dateien sowie vier Schlüsselkonzepte angesehen - Ausgabe, Logik, Schleifen und Filter.
Ein guter nächster Schritt wäre, ein kostenloses Shopify-Partnerkonto zu eröffnen und ein Thema für sich selbst zu analysieren. Viele der Beispiele, die in diesem Tutorial verwendet werden, stammen aus meinem extrem knackigen Starter-Theme, das auf GitHub verfügbar ist.
Als Vorbereitung für den dritten Teil empfehle ich Ihnen, eine Kopie herunterzuladen und in einem Entwicklungs-Store anzuwenden. Ausführliche Informationen zum Hochladen eines Designs finden Sie in den Shopify-Dokumenten. Es ist buchstäblich so einfach wie das Hochladen einer ZIP-Datei. Spielen Sie mit dem Vorlagen-Editor in Ihrem Entwicklungs-Shop-Administrator, ändern Sie einige Tags, wenden Sie einen oder zwei Filter an und fügen Sie Elemente in die Layoutdatei ein, um zu sehen, wie sich die Dinge ändern.
Im letzten Teil dieser kurzen Serie werde ich Ihnen einige fortgeschrittenere Ideen vorstellen, die zeigen, wie flexibel Liquid und Shopify sein können. Wir werden prüfen, wie sie es Ihnen ermöglichen, Ihre Themen anhand von Beispielen aus meinen eigenen Projekten und anderen bekannten Shopify-Stores zum Singen zu bringen.
% endfor% 
