Shopify Theme Development weiterentwickeln

In den ersten beiden Teilen dieser Serie stellte ich Ihnen die E-Commerce-Plattform von Shopify vor, erläuterte die wichtigsten Konzepte, diskutierte, wie Themen erstellt werden, und widmete mich einem tieferen Einblick in Liquid - die Shopify-Templatiersprache.

In diesem abschließenden Teil werden wir uns ansehen, wie Sie durch ein wenig tieferes Wissen über Liquid Ihre Themen noch flexibler machen können, um ein reichhaltiges und einfallsreiches Store-Design zu liefern.

Beginnen wir mit einem Blick darauf, wie wir "alternative Layouts" mit großer Wirkung einsetzen können.

Alternative Layouts

Eine der mächtigsten Funktionen von Liquid ist die Layout-Datei, die wir uns im ersten Teil angesehen haben. Eine Layoutdatei beschreibe ich oft als "Master-Vorlage". Normalerweise enthält diese Datei unsere HTML-Deklarationen, Branding, Navigation und Fußzeile - im Wesentlichen alle allgemeinen Elemente unserer Website, die auf jeder Seite erscheinen sollen.

Alle gerenderten Seiten in einem Shopify-Design basieren, sofern nicht anders angegeben, auf dieser Master-Vorlage. Standardmäßig ist dies das Theme.liquid Datei, die sich in der Layouts Mappe. Unsere Mikroschablonen im Vorlagen Ordner, wird an dem Punkt gerendert, auf den Shopify trifft content_for_layout Flüssiger Platzhalter in unserer Layoutdatei.

Um Ihr Gedächtnis zu bewegen, ist hier ein Beispiel für ein grundlegendes Layout:

  content_for_header   "screen.css" | asset_url | stylesheet_tag   content_for_layout   

Wie in Teil 1 erwähnt, muss eine Layoutdatei in einem Shopify-Design zwei Liquid-Ausgabe-Tags enthalten, content_for_header und content_for_layout. Die erste wird von Shopify verwendet, um Code für Analysen hinzuzufügen und schnellen Zugriff auf den Admin-Bereich Ihres Shops zu gewähren. Der Zweite, content_for_layout, wird durch die entsprechende Vorlage aus unserem Vorlagenordner ersetzt, z. das Produkt.Liquid Die Vorlage wird eingefügt, wenn wir eine Produktdetailseite anzeigen.

Layouts sind eine großartige Funktion und helfen uns, die Themen schön und trocken zu halten. Es kann jedoch vorkommen, dass sich die Elemente Ihrer Standardlayoutdatei ändern müssen. Vielleicht möchten Sie eine Splash-Seite erstellen, die kein "normales" Branding und keine Navigation erfordert. Es ist möglich, dass Sie mit CSS die gewünschten Ergebnisse erzielen können. Wahrscheinlicher ist jedoch, dass Sie unterschiedliche Markups erstellen möchten. Hier kommen alternative Layouts ins Spiel.

Das Erstellen eines alternativen Layouts ist sehr unkompliziert. Als Erstes erstellen Sie eine neue Datei und geben ihr einen relevanten Namen und die .Flüssigkeit Erweiterung. Der Dateiname liegt bei Ihnen. Wichtig ist, dass Sie es im speichern Layouts Ordner in Ihrem Designverzeichnis. In dieser Datei können Sie beliebiges HTML (d. H. HTML-Deklarationen, CSS, JS-Links usw.) zusammen mit den beiden oben genannten Platzhaltern platzieren.

Um diese Layoutdatei zu verwenden, können Sie die Standardeinstellung wirksam überschreiben Theme.liquid Layoutdatei verwenden wir in allen Micro-Templates die folgende Liquid-Syntax:

% layout "alternative"% 

Hinweis: Sie müssen das nicht angeben .Flüssigkeit Erweiterung. Wenn nun die entsprechende Micro-Vorlage von Shopify verarbeitet wird, wird sie mit gerendert alternative.liquid als seine Layoutdatei.

Produktspezifische Vorlagen

Auf die gleiche Weise, in der wir bestimmte Layouts vorgeben können, die auf unsere Mikrovorlagen angewendet werden sollen, können wir Liquid Logic verwenden, um verschiedene Produktvorlagen zu rendern. Es gibt mehrere Möglichkeiten, dies in Liquid zu erreichen - meine bevorzugte Methode ist die Verwendung von Produkthandles. Wenn Sie schon einmal WordPress verwendet haben, können Sie an eine Produktgriff auf die gleiche Weise wie ein Schnecke. Hier eine typische Produkt-URL von der A Book Apart-Website:

http://www.abookapart.com/products/responsive-web-design 

In diesem Beispiel lautet der Produkt-Handle sich anpassendes Webdesign - das letzte Element der URL. Produkt-Handles werden automatisch für Sie erstellt, wenn Sie ein Produkt im Shopify-Administrator hinzufügen. Sie basieren auf dem von Ihnen eingegebenen Namen. Großbuchstaben werden durch Kleinbuchstaben und Leerzeichen durch Bindestriche ersetzt. Sie können sie natürlich übersteuern, wenn Sie dies benötigen.

Standardmäßig wird jedes Mal, wenn Shopify eine Produktdetailseite anzeigt, die verwendet Produkt.Liquid Mikro-Vorlage. Nehmen wir an, wir möchten eine andere Produktseite anbieten, nur damit Ethans Buch sie wirklich hervorhebt. Dazu müssen wir einige Änderungen an der Datenbank vornehmen Produkt.Liquid Vorlage.

Ethan Marcottes Buch Responsive Web Design auf der Shopify-Website von A Book Apart

Als die Produkt.Liquid template hat Zugriff auf alle Daten, die sich auf das aktuell angesehene Produkt beziehen. Wir können die folgende Frage mit einem Liquid stellen ob Aussage:

% if product.handle == "responsive-web-design"% % include "responsive-web-design"% % else% [Normaler HTML-Code für product.liquid] % endif% 

Durch Hinzufügen in der ob Aussage, die wir uns in Teil zwei dieser Serie angesehen haben, können wir steuern, welche Markups gerendert werden. Einfach gesagt, wenn die Produkt.Handle ist gleich "responsive-web-design", wir schließen die aufgerufene Datei ein responsive-web-design.liquid.  Wenn nicht, rendern wir einfach den Code, den wir bereits in unserem haben Produkt.Liquid Vorlage.

Die Kraft der Schnipsel

Dieses Beispiel führt uns in Liquid Snippets ein. Schnipsel leben im passend benannten Schnipsel Ordner und werden ohne die referenziert .Flüssigkeit Erweiterung bei Verwendung des Liquid-Tags % include%.

Wie der Name schon sagt, mit % include% wird wörtlich ein Stück Code in Ihre Micro-Vorlage oder Layout-Datei einfügen. Im obigen Beispiel würde die Datei die alternative Markierung enthalten, die für das Präsentieren von Ethans Buch erforderlich ist, einschließlich des gesamten Liquid-Codes, um die Daten über das Produkt in die Vorlage zu ziehen.

Natürlich können Sie festlegen, dass diese bestimmte Vorlage zusätzlich zu Ethan's für ein anderes Buch verwendet wird. Hier ist eine Möglichkeit, dies zu erreichen:

% if product.handle == "responsive-web-design" ODER product.handle == "design-is-a-job"% % include "responsive-web-design"% % else% [ Normaler HTML-Code für product.liquid] % endif% 

In diesem Fall möchten Sie vielleicht Ihr Snippet in etwas passenderes umbenennen, d. H. produktschaukasten.liquid.

Es ist erwähnenswert, dass Sie keine Ordner in Ihrem Snippets-Verzeichnis verschachteln können. Daher neige ich dazu, meinen Dateien ihre Funktion voranzustellen:

• produktabhängiges web-design.liquid
• produktschaukasten.liquid
• collection-books.liquid

Durch die Verwendung dieser Namenskonvention wird das Auffinden von Snippets erheblich vereinfacht, insbesondere wenn Sie sie häufiger verwenden.

Ein Beispiel dafür, wie ich auf der 8 Faces-Site Ausschnitte verwendet habe, um logische Bedenken zu trennen

Wann werden Snippets verwendet?

Ich benutze Schnipsel auf zwei verschiedene Arten. Zum einen, um Code in überschaubare Abschnitte zu unterteilen, und zum anderen für Elemente einer Seite, die ich wiederverwenden muss, beispielsweise einen Paginierungsblock.

Als Faustregel gilt, wie ich wähle, wo Code hinzugefügt werden soll:

• Erscheint auf jeder Seite - Layoutdatei
• Wird auf mehr als einer Seite angezeigt - Snippet-Datei
• Erscheint auf einer Seite - Mikroschablone

Micro Templates als Controller

Ein anderer Trick, den ich mit großem Erfolg angewendet habe, ist die Behandlung einer Mikrovorlage als View-Controller - eine Idee, die ich aus vielen MVC-Frameworks übernommen habe, die ich verwendet habe. Dies könnte ein neues Konzept für Sie sein, also schauen wir uns das genauer an.

In den obigen Beispielen verwenden wir Liquid Logic, um im Produkt nach einem bestimmten Produkt-Handle zu suchen Produkt.Liquid Mikro-Vorlage. Wenn die Antwort auf unsere ob Die Aussage ist wahr, wir fügen ein Snippet hinzu, andernfalls rendert Shopify den HTML-Block zwischen % else% und % endif% Stichworte.

Für manche mag dies etwas unordentlich erscheinen und kann im Laufe der Zeit schwer zu lesen sein, besonders wenn Sie Ihre Standardeinstellung verwenden Produkt.Liquid Markup wächst. Um die Verwaltung zu vereinfachen, können Sie einfach unser Standard-Markup aus der product.liquid-Vorlage entfernen und ein Snippet dafür erstellen - ich nenne das normalerweise product-default.liquid.

Nach diesem Ansatz könnte unsere product.liquid-Datei folgendermaßen geändert werden:

% if product.handle == "responsive-web-design"% % include "produkt-responsives-web-design"% % else% % include "product-default"% % endif%  

Wenn Ihre Anforderungen wachsen, kann diese Datei natürlich auch weitere Prüfungen und relevante Dateien enthalten, je nach den Ergebnissen. Die Optionen sind unbegrenzt.

Es ist erwähnenswert, dass nicht nur Produkte in Shopify behandelt werden, sondern auch Sammlungen und Seiten. Wenn wir den gleichen Ansatz für Sammlungen verwenden, können wir Folgendes in unserer Sammlungen Vorlage:

% if collection.handle == "css"% % include "collection-css"% % else% % include "collection-default"% % endif% 

Verwenden Fall Anstatt wenn sonst

Diese Methode funktioniert sehr gut, wenn wir nur nach einem bestimmten Handle suchen möchten, sei es ein Produkt oder eine Sammlung. Was aber, wenn wir das auf mehrere Produkte oder Sammlungen erweitern möchten?

Wir haben zwei mögliche Ansätze, der erste ist die Erweiterung unseres ob Anweisung mit elsif. Hier ist ein Beispiel:

% if product.handle == "responsive-web-design"% % include "produkt-responsive-web-design"% % elsif product.handle == "design-is-a-job"% % include "product-design-is-a-job"% % else% % include "Produkt-Standard"% % endif% 

In diesem Beispiel wird nach zwei Produkt-Handles gesucht. Nur wenn beide wahr sind, wird das gerendert product-default.liquid Schnipsel.

Es ist möglich, mehrere zu verwenden elsif Anweisungen in Liquid, aber es kann ein wenig ausführlich werden. Eine Alternative, und ich denke, ein sauberer Ansatz ist zu verwenden Fall. Hier ist das obige Beispiel überarbeitet:

% case product.handle% % when "responsive-web-design"% % include "produkt-responsives-web-design"% % when "design-is-a-job"% % include "product-design-is-a-job"% % else% % include "product-default"% % endcase% 

Wir können auch einen unschärferen Vergleich mit dem Liquid-Operator durchführen enthält. Angenommen, wir möchten, dass jedes Produkt, das das Wort im Griff hat, ein anderes Snippet verwendet. So können wir es mit einer einfachen Flüssigkeit angehen ob Aussage:

% falls product.handle "responsive"% % include "product-responsive"% % else% % include "product-default"% % endif% 

Die Verwendung dieser Methode würde bedeuten, dass wir unsere Vorlage nicht bearbeiten müssen, um eine neue hinzuzufügen elsif oder Fall für weitere Bücher, die im Titel "responsive" enthalten.

Diese Ansätze können auch innerhalb der Mikroschablonen Ihres Themas verwendet werden. Sie können es zum Beispiel verwenden, um Elemente programmatisch anzuzeigen und auszublenden. Beispiele hierfür können Verkaufsausweise, Sonderangebote und verwandte Produkte sein.

Nützliche CSS-Hooks erstellen

Handles können auch sehr nützlich sein, wenn Sie mit CSS und JavaScript arbeiten. Viele von uns verwenden die Body-Klasse für CSS- und JavaScript-Hooks. Wie in WordPress ist es ziemlich einfach, unserem Body-Element in Shopify eine Reihe nützlicher Klassen hinzuzufügen.

Hier sind ein paar Ideen:

Fügen Sie den aktuell gerenderten Vorlagennamen der Body-Klasse hinzu:

Beachten Sie, dass wir den Handle-Filter verwenden, um unsere Ausgabe zu bereinigen. Einige Beispiele dafür sind:

Darauf aufbauend möchten wir möglicherweise den aktuellen Produkt-Handle in unsere Body-Klasse aufnehmen. Um die Dinge sauber und ordentlich zu halten, können wir eine verwenden ob Anweisung, um das Produkt-Handle nur dann hinzuzufügen, wenn wir ein Produkt anzeigen:

Beachten Sie, wie ich den Platz vor dem einbeziehe product.handle Ausgabe-Tag.

Bei einigen Designs wird dem Hauptelement auch der aktuelle Seitentitel in Form von hinzugefügt Ich würde, Aufbauend auf dem obigen würde unser Code nun wie folgt aussehen:

Für ein gutes Maß könnten wir sogar einen Check für Sammlungen hinzufügen und das auch hinzufügen:

Es ist ziemlich einfach, diese Logik für Ihre eigenen Zwecke anzupassen.

Bisher haben wir untersucht, wie wir mit Liquid mehr als nur Daten ausgeben und den Fluss unserer Vorlagen steuern können. Schauen wir uns nun ein weiteres großartiges Feature von Shopify an - Designeinstellungen.

Themen Einstellungen

Mit Designeinstellungen können Designentwickler jedem Benutzer auf einfache Weise das Aussehen und Verhalten seines Shops anpassen, ohne HTML oder CSS ändern zu müssen. Dies macht die Themen sehr flexibel - ein Plus, wenn Sie jemals darüber nachdenken, ein Thema über den Shopify-Store oder Themeforest zu verkaufen.

Um Designeinstellungen in unserem Shopadministrator verfügbar zu machen, müssen Sie eine Datei mit dem Namen erstellen einstellungen.html und speichern Sie es im config-Ordner. Bitte beachten Sie die Erweiterung, dies ist die einzige Datei mit einem .html Erweiterung in Ihrem Shopify-Design.

Es gibt unendlich viele Verwendungsmöglichkeiten für Designeinstellungen, aber häufig wird die Hintergrundfarbe der gesamten Site geändert. Hier ist ein Codebeispiel, das wir besprechen können:

 
Farbeinstellungen
 
 
 
 
Hintergrund (Beispiel)
 
 
 
 
 
 

Das wichtigste Element ist hier das Eingang. Beachten Sie, dass wir ihm ein ID- und Namensattribut von gegeben haben bg_color und eine Klasse von Farbe. Diese Klasse ist wichtig. Wenn wir unsere Theme-Einstellungen in der Admin-Ansicht anzeigen, wird Shopify anstelle unserer Eingaben einen praktischen Farbwähler darstellen.

Einmal gemasterte Theme-Einstellungen sind eine erstaunlich leistungsstarke Funktion der Shopify-Themes

Sie werden auch feststellen, dass ich bei unserer Eingabe einen Wert festgelegt habe #F F F. Wenn wir unsere Designeinstellungen in unserer CSS-Datei verwenden, wird dies der Standardwert. Ohne diesen Standardwert wird ein leerer Wert verwendet. Dies ist eine Sache, die ich oft sehe!

Theme-Einstellungen stehen uns weltweit zur Verfügung, sodass wir ihren Wert in all unseren Vorlagen und Layout-Dateien ausgeben können. Dies beinhaltet unsere CSS- und JavaScript-Dateien. Um auf eine Einstellung zu verweisen, in diesem Fall für unsere Hintergrundfarbe, verwenden wir folgende Syntax:

settings.bg_color 

Beachten Sie, dass wir das verwenden Ich würde der Eingabe, um seinen Wert herauszuziehen. Aus diesem Grund muss die ID jedes Eingangs eindeutig sein.

Theme-Einstellungen verwenden

Um Theme-Einstellungen in unserer CSS-Datei verwenden zu können, müssen wir sie anhängen .Flüssigkeit in unsere CSS-Datei. Wenn unsere Datei aufgerufen wird screen.css wir ändern es einfach zu screen.css.liquid.

Sobald wir das getan haben, können wir in unserer CSS-Datei Folgendes tun:

body background: settings.bg_color;  

Wenn Shopify unsere CSS-Datei bereitstellt, werden unsere Liquid-Ausgabe-Tags durch den in den Designeinstellungen des Shopify-Administrators angegebenen Wert ersetzt. Hoffentlich hebt dieses Beispiel hervor, dass der Wert als Standardwert festgelegt werden muss!

Neben der Eingabe von Text und numerischen Werten in Designeinstellungen können Sie Dateien hochladen, boolesche Werte mit Kontrollkästchen aufzeichnen und Auswahllisten zum Auswählen eines Werts aus einer Liste anbieten.

 
Startseite
 
Held
 
 
 
 
Held zeigen?
 
 
 
 
 
 

Das obige Beispiel stammt von der 8 Faces-Website, an der ich 2013 gearbeitet habe. Wir verwenden diese Einstellung, um die Logik auf der Startseite zu steuern.

% if settings.show_hero == true% [relevantes Banner-Code-Snippet für Helden] % endif% 

Das Hinzufügen von Dateien ist etwas komplizierter, also werfen wir einen kurzen Blick darauf. Das Markup ist jedoch ziemlich einfach:

 
Startseite
 
Held
 
 
 
Bild (in voller Größe)
 
 
 
 
 

Hier sind einige Dinge zu beachten, erstens das Namensattribut, das in unserem Beispiel lautet home-page-hero.jpg. Unabhängig vom Namen der hochzuladenden Datei wird sie umbenannt home-page-hero.jpg.

Das zweite, was es zu wissen gilt, ist in unserem Fall die Erweiterung .jpg. Unabhängig vom Dateityp, den Sie hochladen, versucht Shopify, die Datei in den angegebenen Typ zu konvertieren. Wenn dies nicht möglich ist, wird ein Fehler gemeldet. Im Gegensatz zu Produktbildern werden Dateien schließlich immer im Asset-Ordner des Themas gespeichert.

So können wir das Image unserer Homepage in unserer Vorlage darstellen:

Hier benutzen wir die asset_url filtern, um den vollständigen Pfad zum Image auf dem Shopify-CDN hinzuzufügen. Wenn Sie mit diesem Filter nicht vertraut sind, können Sie in Teil zwei dieser Serie mehr darüber erfahren.

Ich empfehle Ihnen dringend, ein oder zwei kostenlose Themen aus dem Shopify-Themenspeicher herunterzuladen und die Vorlageneinstellungsvorlage zu analysieren, da sie ein großartiger Baustein für Ihre eigene Themenentwicklung sind.

Shopify Toolkit

Es ist zwar fair zu sagen, dass Sie zum Erstellen von Themen wirklich nur einen Texteditor und einen Shopify-Partner-Account benötigen. Es gibt jedoch ein paar Goodies, die es wert sind, überlegt zu werden.

Wenn Sie die Serie verfolgt haben, haben Sie sich möglicherweise für ein kostenloses Shopify-Partnerkonto angemeldet. Ich empfehle immer, das "falsche Gateway" in Ihren Entwicklungsgeschäften einzurichten. Sie finden dies in der Registerkarte "Einstellungen" unter "Kasse" im Shopify-Administrator. Wenn Sie diese Option aktivieren, können Sie eine vollständige Transaktion präsentieren und alle zugehörigen E-Mail-Benachrichtigungen generieren, die generiert werden. Es lohnt sich zu bedenken, dass Sie all diese Liquid-Techniken auch in Ihren Benachrichtigungs-E-Mails effektiv einsetzen können.

Ein weiteres sehr nützliches Dienstprogramm ist der Shopify Desktop Theme Editor für Mac. Nach der Installation werden Ihre Dateiänderungen nahtlos mit Ihrem Entwicklungs- oder Live-Shop synchronisiert. Wenn Sie Mac, Windows oder Linux verwenden, können Sie auch das Befehlszeilenprogramm "Shopify" mit Gem-Befehlszeilenprogramm installieren, um Ihre lokalen Dateien mit Ihrem Entwicklungsspeicher zu synchronisieren.

Der Shopify Desktop Theme Editor für Mac ermöglicht die reibungslose Dateisynchronisierung zwischen Ihrem lokalen Dateisystem und Ihrem Geschäft

Wenn Sie ein TextMate-Benutzer oder ein Fan von SublimeText sind, möchten Sie möglicherweise eine Kopie der Liquid-Erweiterung installieren, die die Syntaxhervorhebung für Liquid behandelt.

Theme Inspiration

Der Shopify-Themenspeicher enthält zahlreiche kostenlose Themen, die Sie herunterladen und von denen Sie lernen können. Wenn Sie jedoch ein eigenes Thema starten möchten, bevorzugen Sie vielleicht etwas mehr als meine eigene Boilerplate, die auf GitHub verfügbar ist.

Ressourcen

Zum Abschluss finden Sie hier einige Auswahlmöglichkeiten, die Sie bei der Entwicklung Ihres Shopify-Themas unterstützen:

• Mark Dunkleys Spickzettel - Jede Vorlagenvariable und flüssige Logik, Filter und Ausgabe-Tag, die Sie jemals brauchen werden.
• Shopify-Themendokumentation - Kürzlich überarbeitet und ein hervorragender Bezugspunkt für das Erstellen von Themen
• E-Commerce-Foren von Shopify - Es werden viele Themen behandelt, die von der Einrichtung eines Geschäfts bis zum Erstellen von Themen reichen und Tipps und Hinweise für ein erfolgreiches Online-Geschäft enthalten

Nächste Schritte

Shopify ist eine großartige und lohnenswerte Plattform, für die Design entwickelt werden kann, mit dem zusätzlichen Vorteil, den Liquid in anderen Tools wie Mixture und SiteLeaf verbreitet findet. Wir haben viel über diese drei Tutorials berichtet. Ich hoffe vor allem, dass Sie es interessant und nützlich gefunden haben und dass die hier vorgestellten Ideen es Ihnen ermöglichen, großartige E-Commerce-Erfahrungen für Sie und Ihre Kunden aufzubauen.