Bauen e Shopify Thema mam Liquid Engine

Auteur: Peter Berry

Denlaod Vun Der Kreatioun: 14 Juli 2021

Update Datum: 13 Mee 2024

Videospiller: SPORTBIKE engine condition after 40,000 kilometers (24,800 mi) and 20 years of operation

Inhalt

Thema Dateien a Classeure
Mapping URLen op Templates
Flësseg: d'Basis
Produkt verstoen.flësseg
Ausgang
Logik
Filteren
Wat kënnt duerno?
Weider Ressourcen an Inspiratioun

Während de leschte Wochen hunn ech de Shopify Thema fir Viewport Industries gebaut, d'Firma Elliot Jay Stocks an ech hunn d'lescht Joer gegrënnt. Mir hu Shopify aus verschiddene Grënn gewielt:

Et erlaabt eis digital a kierperlech Produkter ze verkafen
Et ass voll gehostert, dat heescht keng Servere fir sech Suergen ze maachen
Et ënnerstëtzt eng Zuel vu Bezuelpaarten déi gutt mat eiser Bank integréieren
Et ass thema-baséiert, dat heescht datt mir eis existent Site HTML, CSS a JavaScript einfach benotze kënnen

Shopify benotzt e Schablounmotor genannt Liquid fir Daten aus Ärem Geschäft an Är Templates auszeginn. Flësseg ass vläicht deen eenzegen Zutat vun engem Shopify Thema deen Dir net virdru benotzt hutt an et kann ausgoen. Awer déi gutt Noriicht ass datt et wierklech net sou schwéier ass fir unzefänken.

Wann Dir jeemools Smarty, ERB oder Twig benotzt hutt, kënnt Dir Iech vir. Wann net, maach der keng Suergen: et geet just drëms e puer einfach Regelen ze léieren. Wann Dir Liquid Fäegkeeten zu Ärem Webentwécklungstoolkit bäigefüügt hutt, kënnt Dir Themen fir Clienten a kuerzer Zäit ufänken ze bauen.

Thema Dateien a Classeure

Shopify Themen sinn näischt méi wéi eng Zuel vu Dateien (HTML Dateien mat enger .liquid Extensioun, CSS, JS, Biller, a sou weider) a Classeure. Themen kënne kucken a funktionnéieren wéi Dir wëllt: et gi wierklech keng Restriktiounen. Hei ass d'Basisstruktur vun engem Thema:

Verméigen
configuréieren
Layouten
Thema.flësseg
Stécker
Schablounen
404. Flësseg
Artikel.flësseg
blog.flësseg
Weenchen.flësseg
collection.flësseg
index.flësseg
page.flësseg
product.flësseg
sichen.flësseg

Mat dësen Dateien kënnt Dir déi meescht Basis vun Themen erstellen. Natierlech wëllt Dir wahrscheinlech e puer CSS, JavaScript an e puer Biller bäifügen. Dir géift dës an de Verméigen Dossier setzen. (Et ass derwäert ze bemierken datt Dir am Moment keng Ënnerfolderen an Ärem Asset-Ordner erlaabt hutt.)

Fir méi iwwer wéi Themen funktionnéieren, a fir iwwer d'Config- a Snippets-Ordner erauszefannen, géif ech recommandéieren Thema aus Scratch an Theme-Astellungen op der Shopify Wiki ze liesen.

Alternativ kënnt Dir Iech um gratis Partnerprogramm umellen, en Testgeschäft erstellen an ee vun de ville gratis Themen verfügbar aus Ärem Admin Bereichsberäich iwwerpréiwen - gitt einfach an den Theme Editor deen am Themen Menu steet.

Mapping URLen op Templates

Shopify Themen funktionéieren andeems se déi aktuell URL op eng spezifesch Template mappelen. Zum Beispill wa mir e Produkt kucken dat folgend URL huet ...

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

... da weess Shopify Är ze benotzen product.flësseg Schabloun. Et ass aus dësem Grond datt Dir nëmmen déi Dateennamen uewe genannte fir Är Templates benotze sollt.

Nieft Shopify wësse wéi eng Schabloun a Relatioun mat der aktueller URL affichéiert, mécht et eng Rei vu ganz spezifesche Variabelen fir eis verfügbar. Dës si bekannt als 'Schablounvariabelen' an erméiglechen eis Daten an eise Schablounen ze weisen.

Zum Beispill an eisem product.liquid Template, hu mir Zougang zu der passend benannter Produit verännerlech. Dëst bedeit datt mir den Numm, d'Beschreiwung, de Präis an d'Disponibilitéit vun eisem Produkt an eiser Schabloun ausginn. Mir benotzen d'Kombinatioun vu Liquid a Schablounvariabelen fir eis Templates mat Daten ze bezéien déi op eis Produkter bezéien.

Fir eng komplett Lëscht vun de verfügbare Schablounvariablen, besicht de Mark Dunkley's Shopify Cheat Sheet.

Flësseg: d'Basis

Liquid ass hei fir eist Liewen als Theme Designer méi einfach ze maachen. Ee vun den Haaptmethoden wéi et dëst mécht ass mat der Benotzung vu Layouten. Layouten sinn ideal fir allgemeng Säitelementer wéi en Header, Haaptnavigatioun, Fousszeilen, asw.

A menger Dossierstruktur uewen, fannt Dir e Fichier genannt Thema.flësseg am Layoutendossier. Dir kënnt u Theme.liquid als eis Master Template denken. All eis aner Templates, wéi zB product.liquid, ginn an dësem Master Template gemaach. Dir kënnt méi wéi ee Layout hunn wann Dir wëllt, awer de Standard soll ëmmer thema genannt ginn. Flësseg.

Ech hunn d'Thema.liquid Datei vun der United Pixelworkers net gesinn, awer Dir kënnt Iech virstellen datt et d'Markéierung enthält fir déi gebitt rout ënnendrënner duergestallt.

Hei ass wat e Basisthema. Flëssege Layout kéint ausgesinn:

! DOCTYPE html>
html>
Kapp>
{{content_for_header}}
Titel> Säitentitel Gitt Hei / Titel>
/ Kapp>
Kierper>
{{content_for_layout}}
/ Kierper>
/ html>

Dir bemierkt zwee Sätze gewéckelt an duebel gekrauselt Klameren: {{content_for_header}} an {{content_for_layout}}. Dëst sinn eis éischt Beispiller vu Liquid an Aktioun.

Shopify benotzt dacks {{content_for_header}} fir spezifesch Dateien an de Kapp> Sektioun vun engem Dokument hinzuzufügen: zum Beispill, am Tracking Code derbäi. {{content_for_layout}} ass wou eis URL-gekaarte Schabloun d'Inhalter erschéngen. Zum Beispill, wa mir eng Produkter Säit kucken, gëtt eis product.liquid Datei {{content_for_layout}} an eiser Layoutdatei ersat.

Produkt verstoen.flësseg

Elo datt mir duerch d'Basis vun Layouten lafen, ass et Zäit eng Schabloun ze kucken.Geschäfter sinn alles iwwer d'Produkter, also kucke mer eis un product.flësseg.

Hei ass e ganz einfach awer funktionnelt Beispill vun engem Produkt.flësseg Schabloun.

h2> {{product.title}} / h2>
{{ Produkt beschreiwung }}
{% wann product.available%}
Form Action = "/ Wuerekuerf / add" Method = "Post">
wielt id = "product-select" name = ’id’>
{% fir Variant am Produkt.varianten%}
Option value = "{{variant.id}}"> {{variant.title}} - {variant.price} / option>
{% endfor%}
/ wielt>
Input Type = "ofginn" Numm = "add" value = "Add to cart" id = "purchase" />
/ Form>
{% soss%}
p> Dëst Produkt ass net verfügbar / p>
{% endif%}

Hei sinn eng Rei Schlësselflëssegkeetskonzepter op der Aarbecht. Loosst eis se an der Uerdnung kucken.

Ausgang

Déi éischt Zeil vu Code enthält de Saz {{product.title}}. Wann se renderéiert gëtt dëst den Titel vum Produkt aus, deen, wéi Dir elo wësst, vun der URL bestëmmt gëtt. Am United Pixelworkers Beispill hei ënnen ass de Produkttitel einfach 'Indianapolis'.

Liquid benotzt de Punkt Syntaxformat. An dëser Instanz entsprécht {{product.title}} der Variabel vun der Produktschabloun an hirem Titelattrib. Mir kënnen d'Produktbeschreiwung op déiselwecht Manéier ausginn mat {{ Produkt beschreiwung }}.

Dëst ass a flëssege Begrëffer bekannt als Ausgang. All Ausgang gëtt mat duebele gekrauselte Klamere bezeechent, wéi follegt: {{your_output}}.

Logik

Op der nächster Zeil vum Code bemierkt Dir eng Erklärung an enger gekrauselter Klammer gefollegt vun engem%: an dësem Fall, {% wann product.available%}. Dëst ass e weidert wichtegt Konzept a Liquid bekannt als Logik. Méi wäit erof gesitt Dir {% else%} a schliisslech déi {% endif%} Aussoen.

Dëst wann Ausso erméiglecht eis ze diktéieren wat eis Schabloun affichéiert, op Basis vun enger oder méi Konditiounen: an dësem Fall, ob eist Produkt verfügbar ass. Effektiv seet dat: „wann eist Produkt verfügbar ass, weist d'Informatioun doriwwer; soss eng Noriicht weisen, datt de Benotzer weess datt et net am Lager ass ".

All Logik Aussoen a Flësseg benotze déi gekrauselt Klammer Prozentsaz Notatioun, dh {% wann ...%}. Denkt just drun Är Aussoen passend zouzemaachen, soss lafen Dir an Ierger. Zum Beispill:

{% wann product.available%}
Weist Add to cart Knäppchen hei
{% soss%}
Weist eng Noriicht iwwer wéini de Produit als nächst verfügbar ass
{% endif%}

Filteren

Liquid erlaabt eis eis Ausgab op verschidde Weeër ze manipuléieren. Ee vun dësen ass Filteren ze benotzen. Den Inhalt deen an de Filter geet, wäert deen aneren Enn erausgoen op eng spezifesch Manéier geännert.

Kuckt d'Produkt.flëssegt Beispill hei uewen, Dir mierkt {Suen}. Eng Variant ass e Begrëff fir eng Variatioun vun engem Produkt ze beschreiwen: zum Beispill verschidde Faarwen a Gréissten. Wat hei interessant ass, ass datt mir e Filter benotze fir de Präisausgang z'änneren - an dësem Fall, andeems Dir de Suefilter benotzt. Dëst wäert dozou féieren datt de Währungssymbol vum Buttek un de Front vum Präis bäigefüügt gëtt.

Aner Filteren enthalen strip_html, déi all HTML Tags aus engem bestëmmten Text Text eraussträichen an Ucase, déi et an e grousse Bus ëmwandelen.

Dir kënnt och Filtere matmaachen. Zum Beispill:

{article.content}

An dëser Instanz huele mir d'Inhaltsattribut vun der Artikel Template Variabel a ginn et un de Strip_html Filter a schliisslech un den ofgeschniddene Filter. Dir wäert bemierken datt den ofgeschniddene Filter eis erlaabt ze spezifizéieren wéi laang mir déi lescht Ausgab wëlle sinn: an dësem Fall 20 Zeechen.

Filter erlaabt eis och séier ze schaffen fir Skript- a Bildelementer a Templates ze kreéieren. Hei ass e ganz schnelle Wee fir e Filter ze benotzen fir e Bild mat engem assoziéierten Alt Tag auszedrécken:

{asset_url}

Mat dësem an eisem Shopify Thema féiert dat folgend img Element an eiser Schabloun:

img src = "/ files / shops / your_shop_number / assets / logo.png" alt = "Site Logo" />

Den asset_url Filter ass ganz nëtzlech well et de komplette Wee op déi aktuell Themen zréckkënnt Verméigen Dossier. Mat dësem Filter ass et méiglech fir Äert Thema a méi Geschäfter anzewenden an Iech keng Suergen iwwer Weeër ze maachen.

Wat kënnt duerno?

Hoffentlech hunn dës puer Beispiller Iech gewisen datt Liquid net sou komplizéiert ass. Natierlech gëtt et vill méi mat deem Dir et maache kënnt, awer andeems Dir Output, Logik a Filtere beherrscht, sidd Dir gutt um Wee fir dat meescht ze verstoen wat Dir braucht fir e Shopify Thema ze bauen.