Készítsen Shopify témát a Liquid motorral

Tartalom

• Téma fájlok és mappák
• URL-ek hozzárendelése sablonokhoz
• Folyadék: az alapok
• A termék.folyadék megértése
• Kimenet
• Logika
• Szűrők
• Mi a következő lépés?
• További források és inspiráció

Az elmúlt hetekben építettem a Shopify témát a Viewport Industries, az Elliot Jay Stocks és tavaly létrehozott vállalat számára. A Shopify-t több okból is választottuk:

1. Ez lehetővé teszi számunkra, hogy digitális és fizikai termékeket is értékesítsünk
2. Teljesen házigazdája, vagyis nincsenek aggódó szerverek
3. Számos fizetési átjárót támogat, amelyek jól integrálódnak bankunkkal
4. Témaalapú, ami azt jelenti, hogy könnyedén felhasználhatjuk meglévő webhelyünk HTML-jét, CSS-jét és JavaScript-jét

A Shopify egy Liquid nevű sablonmotort használ az adatok tárolásához a boltból a sablonokba. A folyadék talán az egyetlen összetevője a Shopify-témának, amelyet még nem használt, és eredményes lehet. De a jó hír az, hogy valójában nem olyan nehéz elindulni.

Ha valaha is használta a Smarty-t, az ERB-t vagy a Twig-et, akkor a következők ismerősek lesznek Önnek. Ha nem, ne aggódjon: ez csak néhány egyszerű szabály megtanulásának kérdése. Miután hozzáadta a Liquid készségeket a webfejlesztési eszköztárához, pillanatok alatt elkezdheti az ügyfelek számára témák építését.

Téma fájlok és mappák

A Shopify témák nem mások, mint számos fájl (.liquid kiterjesztésű HTML-fájlok, CSS, JS, képek stb.) És mappák. A témák tetszés szerint nézhetnek ki és működhetnek: nincsenek korlátozások. Itt található a téma alapvető felépítése:

• eszközök
• konfig
• elrendezések
• téma.folyadék
• részleteket
• sablonok
• 404.folyadék
• cikk.folyadék
• blog.folyadék
• szekér.folyadék
• gyűjtemény.folyadék
• index.folyadék
• oldal.folyadék
• termék.folyadék
• keresés.folyadék

Ezekkel a fájlokkal létrehozhatja a legalapvetőbb témákat. Természetesen valószínűleg hozzá szeretne adni néhány CSS-t, JavaScript-et és néhány képet. Ezeket az eszközök mappájába helyezi. (Érdemes megjegyezni, hogy jelenleg nem engedélyezettek almappák az eszköz mappájában.)

Ha többet szeretne megtudni a témák működéséről, és meg szeretné tudni a konfigurációs és a kivonat mappákat, javasoljuk, hogy olvassa el a Témát a Scratch és a Téma beállításai közül a Shopify Wiki-n.

Alternatív megoldásként regisztrálhat az ingyenes Partner programra, létrehozhat egy tesztüzletet és megvizsgálhatja a tesztüzlet adminisztrációs területén rendelkezésre álló sok ingyenes téma egyikét - csak lépjen a Témák menüben található témaszerkesztőhöz.

URL-ek hozzárendelése sablonokhoz

A Shopify témák úgy működnek, hogy az aktuális URL-t hozzárendelik egy adott sablonhoz. Például, ha olyan terméket nézünk meg, amelynek a következő URL-je van ...

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

... akkor a Shopify tudni fogja, hogy használja a termék.folyadék sablon. Ezért soha nem szabad csak a fent felsorolt ​​fájlneveket használni a sablonjaihoz.

Amellett, hogy a Shopify tudja, melyik sablont kell megjeleníteni az aktuális URL-hez képest, számos nagyon specifikus változót tesz elérhetővé számunkra. Ezek „sablonváltozók” néven ismertek, és lehetővé teszik számunkra, hogy adatokat jelenítsünk meg sablonjainkban.

Például a product.liquid sablonban hozzáférünk az pontosan megnevezetthez termék változó. Ez azt jelenti, hogy a termék nevét, leírását, árát és elérhetőségét kiírhatjuk sablonunkba. Folyékony és sablonváltozók kombinációjával fogjuk felhasználni a sablonjainkat a termékeinkre vonatkozó adatokkal.

Az elérhető sablonváltozók teljes listáját a Mark Dunkley Shopify Cheat Sheet oldalán találja.

Folyadék: az alapok

A folyadék azért van itt, hogy megkönnyítse az életünket a téma tervezőként. Ennek egyik fő módja az elrendezések használata. Az elrendezések ideálisak általános oldalelemek, például fejléc, fő navigáció, lábléc stb.

A fenti mappastruktúrámban észrevesz egy nevű fájlt téma.folyadék az elrendezések mappában. Gondolhat a theme.liquid mint fő sablonunkra. Minden más sablonunk, például a product.liquid, ebben a fő sablonban jelenik meg. Ha kívánja, több elrendezéssel is rendelkezhet, de az alapértelmezettet mindig theme.liquid néven kell hívni.

Nem láttam a United Pixelworkers theme.liquid fájlt, de el tudná képzelni, hogy tartalmazza az alábbiakban a pirossal körvonalazott területek jelölését.

Így nézhet ki az alap theme.liquid elrendezés:

1. ! DOCTYPE html>
2. html>
3. fej>
4. {{content_for_header}}
5. cím> Az oldal címe ide megy / cím>
6. / fej>
7. test>
8. {{content_for_layout}}
9. / test>
10. / html>

Két, dupla göndör zárójelbe csomagolt mondatot fog észrevenni: {{content_for_header}} és {{content_for_layout}}. Ezek az első példáink a folyadék működéséről.

A Shopify gyakran használja a {{content_for_header}} fájlt bizonyos fájlok hozzáadásához a dokumentum fejrészéhez: például követőkód hozzáadásával. A {{content_for_layout}} oldalon jelenik meg az URL-hez rendelt sablonunk tartalma. Például, ha egy termékoldalt nézünk meg, a product.liquid fájlunk helyettesíti az {{content_for_layout}} elemet az elrendezési fájlban.

A termék.folyadék megértése

Most, hogy áttekintettük az elrendezés alapjait, itt az ideje, hogy megnézzünk egy sablont.A boltok a termékekről szólnak, ezért nézzük meg termék.folyadék.

Itt van egy nagyon egyszerű, de funkcionális példa a product.liquid sablonra.

1. h2> {{product.title}} / h2>
2. {{ termékleírás }}
3. {% if product.available%}
4. form action = "/ cart / add" method = "post">
5. select id = "product-select" name = ’id’>
6. {% a product.variants% változatához
7. option value = "{{variant.id}}"> {{variáns.cím}} - {vari.price} / opció>
8. {% endfor%}
9. / válassza a> lehetőséget
10. input type = "submit" name = "add" value = "Kosárba helyezés" id = "vásárlás" />
11. / form>
12. {% más %}
13. p> Ez a termék nem érhető el / p>
14. {% endif%}

Itt számos kulcsfontosságú folyékony fogalom működik. Nézzük őket sorrendben.

Kimenet

Az első kódsor tartalmazza a kifejezést {{product.title}}. Renderelt állapotban ez a termék címét adja ki, amelyet - amint most már tudja - az URL határoz meg. Az alábbi United Pixelworkers példában a termék neve egyszerűen ’Indianapolis’.

A Liquid a pont szintaxis formátumot használja. Ebben az esetben a {{product.title}} egyenlő a terméksablon változóval és annak címattribútumával. A termékleírást ugyanúgy adhatjuk ki a {{ termékleírás }}.

Ez folyékony kifejezéssel ismert Kimenet. Az összes kimenetet kettős göndör zárójel jelöli, az alábbiak szerint: {{your_output}}.

Logika

A kód következő sorában egy göndör zárójelben lévő állítást észlel, amelyet% követ, majd ebben az esetben {% ha product.available%}. Ez a Liquid másik fontos fogalma, az úgynevezett logika. Lentebb észreveszi a (z) {% else%} és végül az {% endif%} utasításokat.

Ez ha állítás lehetővé teszi számunkra, hogy meghatározzuk, mit jelenítsen meg a sablonunk, egy vagy több feltétel alapján: ebben az esetben függetlenül attól, hogy elérhető-e a termékünk. Ez azt jelenti, hogy „ha termékünk elérhető, mutassa meg a vele kapcsolatos információkat; egyébként mutasson egy üzenetet, amellyel tudatja a felhasználóval, hogy nincs raktáron ”.

A Liquid összes logikai állítása a göndör zárójel százalékos jelölését használja, azaz {% if…%}. Ne felejtse el megfelelően lezárni az állításokat, különben bajba kerül. Például:

1. {% ha product.available%}
2. Itt látható a Kosárba gomb megjelenítése
3. {% más %}
4. Üzenet megjelenítése arról, hogy a termék mikor lesz legközelebb elérhető
5. {% endif%}

Szűrők

A folyadék lehetővé teszi számunkra, hogy a kimenetünket többféle módon manipuláljuk. Ezek egyike a szűrők használata. A szűrőbe kerülő tartalom a másik végén egy meghatározott módon megváltozik.

A fenti product.liquid példát megnézve észreveszi { pénz }. A változat a termék variációjának leírására használt kifejezés: például különböző színek és méretek. Ami itt érdekes, hogy egy szűrőt használunk az árkimenet megváltoztatásához - ebben az esetben a pénzszűrő használatával. Ez azt eredményezi, hogy a bolt valutaszimbóluma az ár elejére kerül.

Egyéb szűrők közé tartozik strip_html, amely eltávolítja az esetleges HTML-címkéket egy adott szövegdarabról és ucase, ami nagybetűvé konvertálja.

Összekapcsolhatja a szűrőket is. Például:

1. {cikk.tartalom}

Ebben az esetben a cikk sablon változójának tartalmi attribútumát vesszük, és átadjuk a strip_html szűrőnek, végül pedig a csonka szűrőnek. Észre fogja venni, hogy a csonka szűrő lehetővé teszi számunkra, hogy meghatározzuk, mennyi ideig akarjuk a végső kimenetet: ebben az esetben 20 karakter.

A szűrők lehetővé teszik számunkra, hogy gyors munkát végezzünk a szkriptek és képelemek sablonokban történő létrehozásával. Itt van egy nagyon gyors módszer egy szűrő használatához, hogy képet hozzárendeljen egy hozzá tartozó alt címkével:

1. {asset_url}

Ennek használata a Shopify témánkban a következő img elem megjelenítését eredményezi a sablonban:

1. img src = "/ files / shop / your_shop_number / assets / logo.png" alt = "Webhely emblémája" />

A eszköz_url A szűrő nagyon hasznos, mivel visszaadja az aktuális téma teljes elérési útját eszközök mappába. A szűrő használata lehetővé teszi, hogy témáját több üzletben alkalmazza, és ne aggódjon az utak miatt.

Mi a következő lépés?

Remélhetőleg ez a néhány példa megmutatta, hogy a Liquid nem ilyen bonyolult. Természetesen sokkal többet tehet vele, de a kimenet, a logika és a szűrők elsajátításával jó úton jár ahhoz, hogy megértse a Shopify-téma felépítéséhez szükséges legtöbb dolgot.

További források és inspiráció

• Hasznos kezdő Shopify oktatóanyagok
• Mark Dunkley Shopify csalólapja
• Blankify: egy Shopify indító téma
• Oktatóanyag: Egy téma felépítése a semmiből
• A Shopify partnerprogram
• 40 inspiráló Shopify üzlet