Construiți o temă Shopify cu motorul Liquid

Autor: Peter Berry

Data Creației: 14 Iulie 2021

Data Actualizării: 13 Mai 2024

Video: An Overview of Liquid: Shopify’s Templating Language

Conţinut

Fișiere și foldere tematice
Asocierea adreselor URL la șabloane
Lichid: elementele de bază
Înțelegerea produsului.lichid
Ieșire
Logică
Filtre
Ce urmeaza?
Resurse și inspirație suplimentare

În ultimele săptămâni, am construit tema Shopify pentru Viewport Industries, compania Elliot Jay Stocks și am format anul trecut. Am ales Shopify din mai multe motive:

Ne permite să vindem atât produse digitale, cât și produse fizice
Este găzduit complet, ceea ce înseamnă că nu există servere de care să vă faceți griji
Acceptă o serie de gateway-uri de plată care se integrează frumos cu banca noastră
Se bazează pe teme, ceea ce înseamnă că putem reutiliza cu ușurință site-urile HTML, CSS și JavaScript existente

Shopify folosește un motor de șabloane numit Liquid pentru a transmite date din magazinul dvs. în șabloanele dvs. Lichidul este probabil singurul ingredient al unei teme Shopify pe care nu l-ați folosit până acum și poate fi lansat. Dar vestea bună este că nu este chiar atât de greu să începi.

Dacă ați folosit vreodată Smarty, ERB sau Twig, ceea ce urmează vă va fi familiar. Dacă nu, nu vă faceți griji: este doar o chestiune de a învăța câteva reguli simple. După ce ați adăugat abilități Liquid în setul de instrumente de dezvoltare web, veți putea începe să creați teme pentru clienți în cel mai scurt timp.

Fișiere și foldere tematice

Temele Shopify nu sunt altceva decât un număr de fișiere (fișiere HTML cu o extensie .liquid, CSS, JS, imagini și așa mai departe) și foldere. Temele pot arăta și funcționa oricum doriți: într-adevăr nu există restricții. Iată structura de bază a unei teme:

active
config
machete
temă.lichid
fragmente
șabloane
404.lichid
articol.lichid
blog.lichid
coș.lichid
colecție.lichid
index.lichid
pagină.lichid
produs.lichid
căutare.lichid

Cu aceste fișiere, puteți crea cea mai de bază teme. Desigur, probabil că ați dori să adăugați în CSS, JavaScript și câteva imagini. Le-ați pune în dosarul de active. (Este demn de remarcat faptul că în prezent nu aveți permis subfoldere în dosarul dvs. de materiale.)

Pentru mai multe informații despre modul în care funcționează temele și pentru a afla despre folderele de configurare și fragmente, aș recomanda să citiți Tema din Scratch și Theme Settings de pe Shopify Wiki.

Alternativ, vă puteți înscrie la programul partener gratuit, puteți crea un magazin de testare și puteți inspecta una dintre numeroasele teme gratuite disponibile din zona de administrare a magazinului de testare - accesați editorul de teme din meniul Teme.

Asocierea adreselor URL la șabloane

Temele Shopify funcționează prin maparea adresei URL curente la un anumit șablon. De exemplu, dacă vizualizăm un produs care are următoarea adresă URL ...

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

... atunci Shopify va ști să vă folosească produs.lichid șablon. Din acest motiv, ar trebui să utilizați numai numele de fișiere enumerate mai sus pentru șabloanele dvs.

Pe lângă faptul că Shopify știe ce șablon să afișeze în raport cu adresa URL actuală, ne pune la dispoziție o serie de variabile foarte specifice. Acestea sunt cunoscute sub numele de „variabile șablon” și ne permit să afișăm date în șabloanele noastre.

De exemplu, în șablonul nostru product.liquid, avem acces la denumirea potrivită produs variabil. Aceasta înseamnă că putem afișa numele, descrierea, prețul și disponibilitatea produsului nostru în șablonul nostru. Vom folosi combinația de variabile Liquid și template pentru a completa șabloanele noastre cu date referitoare la produsele noastre.

Pentru o listă completă a variabilelor șablon disponibile, accesați Foaia de trucuri Shopify a lui Mark Dunkley.

Lichid: elementele de bază

Lichidul este aici pentru a ne ușura viața ca designeri de teme. Una dintre principalele modalități prin care face acest lucru este folosirea aspectelor. Aspectele sunt ideale pentru a include elemente de pagină obișnuite, cum ar fi antet, navigare principală, subsol și așa mai departe.

În structura mea de dosare de mai sus, veți observa un fișier numit temă.lichid în folderul de machete. Vă puteți gândi la theme.liquid ca la șablonul nostru principal. Toate celelalte șabloane ale noastre, cum ar fi product.liquid, sunt redate în interiorul acestui șablon principal. Puteți avea mai mult de un aspect dacă doriți, dar cel implicit ar trebui să fie numit întotdeauna theme.liquid.

Nu am văzut fișierul theme.liquid al United Pixelworkers, dar ți-ai putea imagina că conține marcajul pentru zonele prezentate în roșu mai jos.

Iată cum ar putea arăta un aspect tematic de bază: lichid:

! DOCTYPE html>
html>
cap>
{{content_for_header}}
titlu> Titlul paginii merge aici / titlul>
/ cap>
corp>
{{content_for_layout}}
/ corp>
/ html>

Veți observa două fraze înfășurate în bretele duble: {{content_for_header}} și {{content_for_layout}}. Acestea sunt primele noastre exemple de lichid în acțiune.

Shopify folosește adesea {{content_for_header}} pentru a adăuga fișiere specifice la secțiunea cap> a unui document: de exemplu, adăugarea unui cod de urmărire. {{content_for_layout}} este locul unde va apărea conținutul șablonului nostru mapat URL. De exemplu, dacă vizualizăm o pagină de produs, fișierul nostru product.liquid va înlocui {{content_for_layout}} în fișierul nostru de aspect.

Înțelegerea produsului.lichid

Acum că am parcurs elementele de bază ale aspectelor, este timpul să ne uităm la un șablon.Magazinele sunt despre produse, așa că haideți să ne uităm produs.lichid.

Iată un exemplu foarte simplu, dar funcțional, de șablon product.liquid.

h2> {{product.title}} / h2>
{{ descrierea produsului }}
{% if product.available%}
form action = "/ cart / add" method = "post">
selectați id = "product-select" name = ’id’>
{% pentru variantă în product.variants%}
value value = "{{variant.id}}"> {{variant.title}} - {variant.price} / option>
{% endfor%}
/ selectați>
input type = "submit" name = "add" value = "Add to cart" id = "purchase" />
/ form>
{% else%}
p> Acest produs nu este disponibil / p>
{% endif%}

Aici funcționează o serie de concepte cheie despre lichid. Să le privim în ordine.

Ieșire

Prima linie de cod conține expresia {{product.title}}. Când este redat, acesta va afișa titlul produsului, care, după cum știți acum, este determinat de adresa URL. În exemplul United Pixelworkers de mai jos, titlul produsului este pur și simplu „Indianapolis”.

Lichidul folosește formatul de sintaxă a punctelor. În acest caz, {{product.title}} echivalează cu variabila șablon de produs și atributul său de titlu. Putem scoate descrierea produsului în același mod folosind {{ descrierea produsului }}.

Acest lucru este cunoscut în termeni lichizi ca ieșire. Toată ieșirea este notată cu acolade duble, după cum urmează: {{your_output}}.

Logică

Pe următoarea linie a codului, veți observa o declarație într-o acoladă, urmată de un%: în acest caz, {% if product.available%}. Acesta este un alt concept important în Liquid cunoscut sub numele de logică. Mai jos, veți observa declarațiile {% else%} și, în cele din urmă, {% endif%}.

Acest afirmatie if ne permite să dictăm ce afișează șablonul nostru, pe baza uneia sau mai multor condiții: în acest caz, dacă produsul nostru este disponibil sau nu. În mod efectiv, aceasta se spune: „dacă produsul nostru este disponibil, arătați informațiile referitoare la acesta; în caz contrar, arătați un mesaj care să informeze utilizatorul că este epuizat ”.

Toate declarațiile logice din lichid utilizează notația procentuală a acoladei, adică {% dacă ...%}. Nu uitați să închideți declarațiile în mod corespunzător, altfel veți avea probleme. De exemplu:

{% if product.available%}
Afișează butonul Adaugă în coș aici
{% else%}
Afișați mesajul despre momentul în care următorul produs va fi disponibil
{% endif%}

Filtre

Lichidul ne permite să ne manipulăm rezultatele în mai multe moduri. Una dintre acestea este utilizarea filtrelor. Conținutul care intră în filtru va ieși la celălalt capăt modificat într-un mod specific.

Privind exemplul product.liquid de mai sus, veți observa {bani}. O variantă este un termen folosit pentru a descrie o variantă a unui produs: de exemplu, culori și dimensiuni diferite. Ceea ce este interesant aici este că folosim un filtru pentru a modifica prețul - în acest caz, folosind filtrul de bani. Acest lucru va duce la adăugarea simbolului valutar al magazinului în partea din față a prețului.

Alte filtre includ strip_html, care va elimina orice etichete HTML dintr-o anumită bucată de text și ucase, care îl va converti în litere mari.

De asemenea, puteți alătura filtrelor împreună. De exemplu:

{article.content}

În acest caz, luăm atributul de conținut al variabilei șablon articol și îl trecem la filtrul strip_html și în cele din urmă la filtrul trunchiat. Veți observa că filtrul trunchiat ne permite să specificăm cât timp vrem să fie ieșirea finală: în acest caz, 20 de caractere.

Filtrele ne permit, de asemenea, să lucrăm rapid la crearea de elemente de script și imagine în șabloane. Iată un mod foarte rapid de a utiliza un filtru pentru a afișa o imagine cu o etichetă alternativă asociată:

{asset_url}

Folosind acest lucru în tema noastră Shopify va rezulta redarea următoarei elemente img în șablonul nostru:

img src = "/ files / shops / your_shop_number / assets / logo.png" alt = "Logo-ul site-ului" />

asset_url filtrul este foarte util deoarece returnează calea completă către tema curentă active pliant. Utilizarea acestui filtru vă permite să vă aplicați tema pe mai multe magazine și să nu vă faceți griji cu privire la căi.

Ce urmeaza?

Sperăm că aceste câteva exemple v-au arătat că Liquid nu este atât de complicat. Bineînțeles, puteți face mult mai mult cu aceasta, dar stăpânind rezultatele, logica și filtrele, sunteți pe cale să înțelegeți cea mai mare parte din ceea ce veți avea nevoie pentru a construi o temă Shopify.