Zgradite temo Shopify z motorjem Liquid

Vsebina

• Tematske datoteke in mape
• Preslikava URL-jev v predloge
• Tekočina: osnove
• Razumevanje product.liquid
• Izhod
• Logika
• Filtri
• Kaj je naslednje?
• Nadaljnji viri in navdih

V zadnjih nekaj tednih sem oblikoval temo Shopify za podjetje Viewport Industries, družbo Elliot Jay Stocks in sem ustanovil lani. Shopify smo izbrali iz več razlogov:

1. Omogoča nam prodajo digitalnih in fizičnih izdelkov
2. V celoti gosti, kar pomeni, da ni strežnikov, ki bi jih morali skrbeti
3. Podpira številne plačilne prehode, ki se lepo povezujejo z našo banko
4. Temelji na temah, kar pomeni, da lahko enostavno uporabimo HTML, CSS in JavaScript našega obstoječega spletnega mesta

Shopify uporablja mehanizem predlog, imenovan Liquid, za izhod podatkov iz vaše trgovine v vaše predloge. Tekočina je morda tista sestavina teme Shopify, ki je doslej še niste uporabljali in je lahko nadomestna. Ampak dobra novica je, da res ni tako težko začeti.

Če ste kdaj uporabljali Smarty, ERB ali Twig, vam bo v nadaljevanju znano. Če ne, ne skrbite: treba je le naučiti nekaj preprostih pravil. Ko v svoje orodje za spletni razvoj dodate znanje Liquid, boste lahko v hipu začeli graditi teme za stranke.

Tematske datoteke in mape

Teme Shopify niso nič drugega kot številne datoteke (datoteke HTML s končnico .liquid, CSS, JS, slike itd.) In mape. Teme lahko izgledajo in delujejo, kakor želite: omejitev res ni. Tu je osnovna struktura teme:

• sredstva
• konfig
• postavitve
• tema.tekočina
• delčki
• predloge
• 404. tekočina
• article.liquid
• blog.liquid
• voziček.tekočina
• zbiranje.tekočina
• indeks.tekočina
• stran.tekočina
• izdelek.tekočina
• search.liquid

S temi datotekami lahko ustvarite najosnovnejše teme. Seveda bi verjetno želeli dodati nekaj CSS-ja, JavaScript in nekaj slik. Te bi shranili v mapo sredstev. (Omeniti velja, da trenutno v mapi s sredstvi niste dovolili podmap.)

Če želite več informacij o tem, kako teme delujejo, in če želite izvedeti več o mapah config in snippets, priporočam branje teme iz nastavitev Praske in teme na Wiki Shopify.

Lahko se tudi prijavite v brezplačni partnerski program, ustvarite testno trgovino in si ogledate eno izmed številnih brezplačnih tem, ki so na voljo v skrbniškem območju vaše testne trgovine - pojdite v urejevalnik tem v meniju Teme.

Preslikava URL-jev v predloge

Teme Shopify delujejo tako, da preslikajo trenutni URL na določeno predlogo. Na primer, če si ogledujemo izdelek z naslednjim URL-jem ...

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

... potem bo Shopify znal uporabiti vaš izdelek.tekočina predloga. Iz tega razloga bi morali za predloge uporabljati zgoraj navedena imena datotek.

Poleg tega, da Shopify ve, katero predlogo je treba prikazati glede na trenutni URL, nam daje na voljo številne zelo specifične spremenljivke. Ti so znani kot „spremenljivke predloge“ in nam omogočajo prikaz podatkov v predlogah.

Na primer v naši predlogi product.liquid imamo dostop do primerno imenovanega izdelka spremenljivka. To pomeni, da lahko v našo predlogo vnesemo ime, opis, ceno in razpoložljivost našega izdelka. S kombinacijo spremenljivk Liquid in predloge bomo zapolnili predloge s podatki, ki se nanašajo na naše izdelke.

Za celoten seznam razpoložljivih spremenljivk predloge obiščite Shopify Cheat Sheet Marka Dunkleyja.

Tekočina: osnove

Liquid je tu, da nam olajša življenje oblikovalcev tem. Eden glavnih načinov, kako to počne, je uporaba postavitev. Postavitve so idealne za vključitev pogostih elementov strani, kot so glava, glavna navigacija, noga itd.

V moji zgornji strukturi map boste opazili datoteko z imenom tema.tekočina v mapi postavitev. Theme.liquid si lahko omislite kot našo glavno predlogo. Vse naše druge predloge, na primer product.liquid, so upodobljene znotraj te glavne predloge. Če želite, lahko imate več postavitev, vendar mora biti privzeta vedno tema.liquid.

Datoteke United. Pixelworkers ’theme.liquid nisem videl, vendar si lahko predstavljate, da vsebuje oznako za območja, navedena spodaj z rdečo.

Evo, kako bi lahko izgledala osnovna postavitev theme.liquid:

1. ! DOCTYPE html>
2. html>
3. glava>
4. {{content_for_header}}
5. title> Naslov strani gre sem / naslov>
6. / head>
7. telo>
8. {{content_for_layout}}
9. / telo>
10. / html>

Opazili boste dva stavka, zavita v dvojne zavite oklepaje: {{content_for_header}} in {{content_for_layout}}. To so naši prvi primeri tekočine v akciji.

Shopify pogosto uporablja {{content_for_header}} za dodajanje določenih datotek v razdelek head> dokumenta: na primer dodajanje kode za sledenje. {{content_for_layout}} bo tam, kjer bo prikazana vsebina naše preslikane URL-je. Na primer, če si ogledujemo stran izdelka, bo naša datoteka product.liquid nadomestila {{content_for_layout}} v naši datoteki postavitve.

Razumevanje product.liquid

Zdaj, ko smo prešli skozi osnove postavitev, je čas, da si ogledamo predlogo.Trgovine se nanašajo samo na izdelke, zato si oglejmo izdelek.tekočina.

Tu je zelo preprost, a funkcionalen primer predloge product.liquid.

1. h2> {{product.title}} / h2>
2. {{ opis izdelka }}
3. {% if product.available%}
4. obrazec action = "/ cart / add" method = "post">
5. izberite id = "product-select" name = ’id’>
6. {% za varianto v product.variants%}
7. option value = "{{variant.id}}"> {{variant.title}} - {variant.price} / option>
8. {% endfor%}
9. / izberite>
10. input type = "submit" name = "add" value = "Dodaj v košarico" id = "purchase" />
11. / obrazec>
12. {% else%}
13. p> Ta izdelek ni na voljo / p>
14. {% endif%}

Tu delujejo številni ključni koncepti Liquid. Poglejmo jih po vrsti.

Izhod

Prva vrstica kode vsebuje besedno zvezo {{product.title}}. Ko bo upodobljen, bo prikazan naslov izdelka, ki ga, kot zdaj že veste, določa URL. V spodnjem primeru United Pixelworkers je naslov izdelka preprosto „Indianapolis“.

Liquid uporablja zapis skladenj pik. V tem primeru je {{product.title}} enakovreden spremenljivki predloge izdelka in njenemu atributu naslova. Opis izdelka lahko na enak način prikažemo z uporabo {{ opis izdelka }}.

To je v tekočem smislu znano kot izhod. Ves izhod je označen z dvojnimi zavitimi oklepaji, kot sledi: {{vaš_izhod}}.

Logika

V naslednji vrstici kode boste v kodrasti oklepaji opazili izjavo, ki ji sledi%: v tem primeru {% if product.available%}. To je še en pomemben koncept v tekočini, znan kot logiko. Spodaj boste opazili izjave {% else%} in na koncu izjave {% endif%}.

To če izjava nam omogoča, da na podlagi enega ali več pogojev narekujemo, kaj prikazuje naša predloga: v tem primeru, ali je naš izdelek na voljo ali ne. To dejansko govori: »če je naš izdelek na voljo, pokažite informacije, povezane z njim; v nasprotnem primeru prikažite sporočilo, ki uporabniku sporoča, da ni na zalogi. "

Vsi logični stavki v Liquidu uporabljajo zapis odstotka zavitih oklepajev, tj. {% If ...%}. Ne pozabite primerno zapreti izjav, sicer boste naleteli na težave. Na primer:

1. {% if product.available%}
2. Pokaži gumb Dodaj v košarico tukaj
3. {% else%}
4. Prikažite sporočilo o tem, kdaj bo izdelek naslednjič na voljo
5. {% endif%}

Filtri

Tekočina nam omogoča, da z našo proizvodnjo manipuliramo na več načinov. Eden od teh je uporaba filtrov. Vsebina, ki gre v filter, bo na drugem koncu spremenjena na poseben način.

Če pogledate zgornji primer product.liquid, boste opazili {denar}. Varianta je izraz, ki se uporablja za opis različice izdelka: na primer različne barve in velikosti. Zanimivo je, da s filtrom spreminjamo izhodno ceno - v tem primeru z denarnim filtrom. To bo povzročilo, da bo na sprednji strani cene dodan simbol valute trgovine.

Drugi filtri vključujejo strip_html, ki bo iz določenega dela besedila odstranil vse oznake HTML in ucase, kar ga bo pretvorilo v velike črke.

Filtre lahko združite tudi skupaj. Na primer:

1. {article.content}

V tem primeru vzamemo atribut vsebine spremenljivke predloge članka in ga posredujemo filtru strip_html in nazadnje še filtru okrnjenega. Opazili boste, da nam filter obrezovanja omogoča, da določimo, kako dolgo naj bo končni izhod: v tem primeru 20 znakov.

Filtri nam omogočajo tudi hitro ustvarjanje elementov skriptov in slik v predlogah. Tukaj je zelo hiter način uporabe filtra za izpis slike s pripadajočo oznako alt:

1. {sredstvo_url}

Če bomo to uporabili v naši temi Shopify, bo v naši predlogi upodobljen naslednji element img:

1. img src = "/ files / store / your_shop_number / assets / logo.png" alt = "Logotip spletnega mesta" />

The sredstvo_url filter je zelo uporaben, saj vrne celotno pot do trenutne teme sredstva mapo. Uporaba tega filtra vam omogoča, da svojo temo uporabite v več trgovinah in vam ni treba skrbeti za poti.

Kaj je naslednje?

Upajmo, da vam je teh nekaj primerov pokazalo, da Liquid ni tako zapleten. Seveda lahko z njim naredite še veliko več, toda z obvladovanjem izhoda, logike in filtrov ste na dobri poti, da razumete večino tega, kar boste potrebovali za izdelavo teme Shopify.

Nadaljnji viri in navdih

• Uporabne uvodne vadnice Shopify
• Mark Dunkley's Shopify Cheat Sheet
• Blankify: začetna tema Shopify
• Vadnica: Ustvarjanje teme iz nič
• Partnerski program Shopify
• 40 navdihujočih trgovin Shopify