Share
În prima parte a acestei serii (introducerea unui magazin Web), te-am prezentat în platforma Shopify commerce, am explicat o serie de concepte cheie și am ilustrat cum este structurată o temă Shopify.
Mergând înainte, acest tutorial se va concentra pe limbajul Liquid, limba șablonului Shopify. Ne vom uita la avantajele oferite de Liquid, vom discuta despre modul în care ne permite să tragem și să manipulăm datele din magazinele noastre și să prezentăm în cele din urmă o serie de caracteristici cheie pe care le veți găsi zilnic în dezvoltarea temei Shopify.
Dacă aveți nevoie de ajutor pentru fixarea și emiterea cu magazinul dvs. Shopify sau chiar setarea acestuia de la zero, puteți găsi un Expert Shopify pe Envato Studio gata să vă ajute. Aici sunt cateva exemple:
Acesta este un serviciu de bază excelent pentru a vă ajuta să vă configurați pe Shopify rapid și ușor. Iată ce include:
Dacă aveți nevoie de ajutor pentru a instala corect o temă, acest expert de la Shopify vă poate ajuta. Ei vor:
Serviciul de bază costă doar 50 de dolari, iar în cazul în care alegeți, sunt disponibile mai multe extra.
Ce se întâmplă dacă aveți nevoie de o temă particularizată? Acest furnizor vă oferă personalizarea temei existente Shopify pentru a se potrivi cu toate nevoile dvs..
Personalizările includ:
Căutați un pachet complex? Acest furnizor vă va instala și configura tema; adăugați logo-ul și branding-ul; personalizați culorile și fonturile; personalizați șabloanele lichide; adăugați scripturi și instalați aplicații pentru funcționalitate; configurarea etichetelor, variantelor și categoriilor de produse; adăugați sau importați produsele dvs., timp care să permită; și efectuați toate testele necesare.
Aceasta include până la 20 de ore de setare și timp de dezvoltare.
Există mult mai mulți experți Shopify care vă pot ajuta pe Envato Studio. Deci, navigați prin serviciile disponibile sau citiți mai departe pentru a afla mai multe despre utilizarea lichidului.
Dacă nu sunteți familiarizat cu conceptul de limbaj de șablon, îl descriu adesea ca o punte între datele din magazin și șabloanele HTML trimise către browser.
Prin utilizarea unor constructe simple (ușor de reținut) putem accesa datele din magazinul nostru (de exemplu, un titlu de produs, o descriere a colecției, un set de imagini de produs sau un post de blog) și putem transmite datele respective direct în șabloanele noastre . Unul dintre principalele avantaje este că nu avem nevoie de cunoștințe despre aceste date - mai degrabă trebuie să știm care sunt variabilele la care avem acces în fiecare șablon.
Un exemplu de șablon tipic de produs.liquid din SublimeText2 care prezintă evidențierea sintaxei lichideAșa cum am discutat în prima parte a acestei serii, Shopify decide ce șablon să trimită browserului pe baza adresei URL solicitate în prezent. De exemplu, dacă URL-ul este http://shopify-for-designers.myshopify.com/collections/cups Shopify va reda collections.liquid șablon.
Odată ce Shopify a elaborat șablonul relevant pentru a face, analizează șablonul (și fișierul său de aspect extern) căutând înlocuitori lichizi. Când acestea se întâlnesc, Shopify înlocuiește codul lichid cu datele relevante din magazin.
Un alt mod de a gândi despre limbile de șabloane este ca "găsi și înlocui" într-un editor de text. Platforma, în acest caz Shopify, caută toate pozițiile de substituție lichide și apoi le înlocuiește cu datele din magazin. Documentul final construit este apoi trimis în browser ca HTML.
S-ar putea să vă simțiți puțin străin de la început dacă aceasta este prima dvs. incursiune în templitare, dar în curând veți avea atârnat de ea.
A înlocuitor este o bucată de cod care va fi în cele din urmă înlocuit atunci când șablon este trimis la browser.
Există două tipuri de substituenți în lichid. Primul este parantezele duble pentru a denota producție iar al doilea este procentajul parantezelor %% pentru a denota logică.
Iată un exemplu rapid al unui producție placeholder pe care îl veți găsi în mod obișnuit product.liquid micro template:
product.title
Atunci când a fost redat, aceasta va afișa numele produsului curent vizualizat în locul lui , de exemplu:
Cupa de cafea a lui Keir
Ieșirea, dacă nu este manipulată cu un filtru (la care ne vom uita mai târziu) este pur și simplu un caz de înlocuire a substituentului cu text din magazinul dvs..
Pe lângă faptul că ne permite să obținem date din magazinul nostru și să le afișăm în șabloanele noastre, așa cum sa demonstrat mai sus, Liquid este, de asemenea, capabil să controleze exact ce este afișată în șabloanele noastre utilizând construcții logice și bucle.
De exemplu, putem alege să afișăm un fragment diferit de cod HTML, în funcție de faptul dacă produsul în prezent văzut sau nu este în stoc.
De asemenea, suntem capabili să folosim lichidul pentru a scoate aceeași bucată de cod de mai multe ori - de exemplu, o serie de imagini de produs. Utilizarea bucle ne permite să realizăm toate produsele asociate unui produs în câteva linii de cod Lichid.
Lichidul este foarte puternic și în timp ce ați putea crede că intrăm pe teritoriul de programare, sunt încrezător că o veți lua destul de repede.
Acum, că aveți o înțelegere de bază a modului în care funcționează lichide, să aruncăm o privire asupra a patru caracteristici cheie și a modului în care acestea lucrează în legătură cu dezvoltarea temelor.
Așa cum am menționat mai devreme parantezele duble în a .lichid dosar producție înlocuitor. Iată două exemple pe care le veți întâlni frecvent:
shop.name product.description
Ieșirea ne permite să extragem o anumită piesă de date din magazinul nostru în șablonul nostru și, după cum sugerează și numele, să îl scoatem în locul substituentului lichid.
Să spunem că magazinul meu era numit "Keir's Coffee Emporium". Dacă aș folosi shop.name lichid tag-ul Shopify ar apuca numele magazinului meu și va înlocui înlocuitorul lichid cu numele magazinelor mele direct în șablonul meu ca HTML.
La fel, dacă am fi folosit descrierea produsului în a noastră product.liquid șablon orice text introdus în editorul WYSIWYG pentru acel produs anume ar fi ieșit în loc de descrierea produsului înlocuitor.
Notă: Editorul WYSIWYG va emite HTML formatat, astfel încât să nu aveți nevoie să vă împachetați descrierea produsului cu orice elemente HTML, de ex. A .
Orice variabilă, indiferent dacă este o variabilă globală (disponibilă în fiecare șablon din temă) sau o variabilă de nivel de șablon (disponibilă numai pentru un anumit șablon), poate fi realizată în acest fel. Alte exemple includ:
shop.description product.title collection.title colecție.descriere
Pentru o listă completă a variabilelor pe care le puteți expune în temele dvs. vă recomandăm să marcați marcajul de înșelătorie al lui Mark Dunkley. Mă simt folosită zilnic.
Pentru a rezuma, producția de lichide este foarte asemănătoare cu "găsiți și înlocuiți". La redarea șablonului Shopify veți găsi toate exemplele de etichete de ieșire lichide și le veți înlocui cu datele relevante din magazinul dvs..
Veți observa, de asemenea, din aceste exemple că Liquid utilizează punct sintaxa pentru accesarea datelor. Elementul care precede punctul este variabila, în timp ce elementul după el este un atribut al acelei variabile. De exemplu, variabila magazinului nostru de mai sus are atât atributul de nume, cât și descrierea.
Site-ul de documentare Shopify prezintă exemple de cod și scenarii de screencast Să trecem pe logica lichidă. Cu toate că este ușor mai complicat pentru utilizatorii de etichete logice pentru prima dată, utilizatorii nu sunt atât de greu de înțeles după ce le-ați încercat.
În timp ce Liquid producție placeholders ne permit să apucăm datele și să le afișăm în șabloanele noastre Lichidă logică etichetele ne permit să controlam fluxul unui șablon. Spre deosebire de etichetele de ieșire, includerea de etichete logice în șabloanele dvs. nu are ca rezultat nimic redat direct, mai degrabă ele ne permit să controlam ce este redat.
Un exemplu tipic pe care îl folosesc pentru a ilustra modul în care se utilizează logica lichidă este evidențierea momentului în care un produs este vândut. Exemplul următor ar fi, de obicei, găsit în product.liquid micro template:
% if product.available% Acest produs este disponibil % else% Ne pare rău, acest produs este vândut % endif%
După cum veți vedea, sintaxa pentru logica lichidului este puțin diferită de ieșire. In loc de delimitatori pe care le folosim %%.
În exemplul de mai sus, controlam ceea ce se transmite șablonului folosind o simplă dacă, altfel, endif afirmație. In multe feluri dacă declarațiile sunt ca întrebări.
În exemplul de mai sus, dacă răspunsul la întrebarea noastră dacă întrebarea este Adevărat facem cuvintele "Acest produs este disponibil", dacă este fals șablonul nostru poartă și scoate textul următor % else% clauza - în acest caz "Ne pare rău, acest produs a fost vândut".
Veți găsi că vă folosiți dacă afirmă foarte mult în dezvoltarea temei Shopify. Iată un alt exemplu pentru a vă ajuta să înțelegeți:
% dacă cart.item_count> 0%Aveți cart.item_count articole în coșul dvs.
% else%Nu există nimic în coșul tău :( De ce să nu te uiți la gama noastră de produse
% endif%
Acest exemplu demonstrează o modalitate prin care puteți fie să afișați numărul de articole dintr-un coș de vizitatori, fie să afișați un link către produsele dvs..
Veți observa în acest exemplu că folosim mai mare decât > operator. Dupa cum cart.item_count variabila returnează numărul de elemente din coșul de utilizatori curent pe care îl putem verifica pentru a vedea dacă acesta este mai mare decât zero, adică are elemente în el.
Dacă aceasta se întoarce Nu există nimic în coșul tău :( De ce să nu te uiți la gama noastră de produseAdevărat putem transmite mesajul cu numărul curent de elemente, dacă nu putem ieși
Aveți acces la o gamă largă de operatori în lichid, dintre care mulți veți găsi în mod regulat:
Accentsconagua
== egal!= nu este egal> mai mare ca< mai puțin decât> = mai mare sau egal<= mai puțin sau egalsau asta ori aiași trebuie să fie așa și așaconține include subreversul dacă este folosit pe un șir, sau element dacă este utilizat într-o matriceApoi, să ne îndreptăm atenția asupra conceptului de bucle lichide.
Dacă ați făcut orice formă de programare de bază conceptul de looping peste date va fi foarte familiar pentru tine. Folosind o buclă, adesea cunoscută ca a pentru buclă, ne permite să ieșim din același cod de șabloane de câte ori este cunoscut.
Să aruncăm o privire la un exemplu dintr-o temă Shopify pentru a ajuta la consolidarea conceptului:
% pentru imagine în product.images%% endfor%
În acest exemplu, de obicei găsite în product.liquid micro șablon, folosim o buclă pentru a scoate fiecare imagine asociată produsului vizionat în prezent. Să o despărțim în pași pentru ao înțelege pe deplin.
Linia noastră de deschidere ne introduce la ideea colecțiilor din Liquid. Spre deosebire de colecții de produse pe care am privit-o în prima parte colecții în lichid sunt diferite. Este o convenție nefericită de numire în acest sens, așa că îmi place să mă refer la colecțiile din Liquid ca Colectări lichide pentru a evita confuzia.
O colecție de lichide în temele Shopify poate lua mai multe forme, dar un exemplu bun product.images așa cum s-a utilizat mai sus. O colecție de lichide este ușor de observat, deoarece în mod normal, ia forma plurală - ca în imagini de mai sus. În exemplul nostru avem de-a face cu o colecție lichidă a tuturor imaginilor asociate unui produs.
Un alt exemplu este product.variants. Acest lucru va returna un obiect care conține detalii despre toate variantele de produse gata de a le rupe în șablonul nostru. Dacă aveți nevoie de un grund pe variantele de produs, am discutat-o în prima parte.
De asemenea, veți observa că folosim cuvântul imagine pentru a indica elementul curent din buclă. De fiecare dată când ne apropiem de bucla noastră imagine ne va da acces la datele asociate cu fiecare imagine pe rând. Firește, acest lucru va fi diferit pe fiecare buclă.
De asemenea, merită remarcat faptul că nu trebuie să știm câte bucle vor apărea. După ce nu mai există nicio imagine pentru a trece peste Shopify va continua și va face următoarea parte a șablonului.
A doua linie a codului nostru este parte HTML și parte Liquid. Veți observa că src atributul este populate cu o etichetă de ieșire lichid. Vom analiza filtrele, marcate de | caracter, următoarea, dar această construcție scurtă va umple atributul src cu URL-ul complet calificat la versiunea "mică" a imaginii curente din bucla noastră.
Linia finală a exemplului nostru este închiderea noastră endfor afirmație. Acest lucru elimină în mod eficient orice cod care va fi redat în cadrul bucla.
Dacă am avea trei imagini în noi product.images obiect rezultatul final ar arata astfel:
Ciclurile de Fixare Pure utilizează bucle pentru a scoate numeroase variante de produse pentru roata lor AerospokeBuclele sunt foarte utile și ceva ce vă veți întâlni zilnic în dezvoltarea temelor. Afișarea imaginilor și a variantelor de produs sunt două exemple frecvent întâlnite.
Am menționat filtrele în legătură cu exemplul nostru de buclă mai devreme, așa că hai să intrăm într-un pic mai detaliat și să ne uităm la modul în care funcționează.
Filtrele sunt utilizate împreună cu o etichetă de ieșire. Scopul lor este să manipuleze datele într-un fel încât să se schimbe formatul. Un exemplu excelent este filtrul de date:
article.published_at | data: '% d% B% Y'
Fără filtrul Shopify s-ar emite pur și simplu data la care a fost publicat articolul blogului în formatul în care acesta este stocat în baza de date - care nu poate fi citit de om. Cu toate acestea, prin adăugarea în | și inclusiv filtrul de date putem manipula formatul noi înșine.
Începeți din stânga cu o bucată de date, în acest caz o dată, iar prin folosirea filtrului ieșim din cealaltă parte schimbată. Aceasta, în esență, este singurul scop al unui filtru. Este nevoie de o bucată de date și o manipulează cumva, astfel încât forma sa să se schimbe.
Cartea de înșelătoare a lui Mark Dunkley descrie toate filtrele lichide disponibileIată un alt exemplu:
'stil.css' | asset_url | stilesheet_tag
Aici folosim două filtre cu scopul final de a crea un element de stil complet format în fișierul nostru de aspect.
Începeți din stânga cu numele fișierului nostru CSS și aplicați mai întâi ASSET_URL filtru. Acesta este un filtru foarte util. Deoarece nu avem nicio idee în cazul în care fișierul nostru stil.css este localizat în rețeaua Shopify (altul decât în dosarul nostru de active din cadrul temei noastre), avem nevoie de o modalitate prin care Shopify să completeze calea spre fișier.
Acesta este scopul ASSET_URL filtru. Va lua numele fișierului nostru, style.css în acest exemplu, și prefixați calea completă la folderul de materiale al magazinului. Merită menționat că nu verifică dacă fișierul există.
Iată cum ar putea arăta că atunci când ieșirea:
//cdn.shopify.com/s/files/1/0222/9076/assets/style.css
Filtrul final din lanț, stylesheet_tag, ia această adresă URL și o înfășoară într-un element de stil care este apoi trimis în fișierul nostru de aspect. Iată rezultatul final:
Fiecare filtru duce ieșirea din filtrul precedent și, la rândul său, îl modifică. Atunci când nu există alte filtre pentru a transmite datele, rezultatul este afișat ca șablon HTML în șablon.
Există multe filtre cu adevărat utile, aici sunt doar câteva pe care le veți găsi folosind:
În acest tutorial am trecut destul de puțin. Ne-am uitat la Liquid și la relația sa cu șabloanele HTML și fișierele de aspect și am analizat patru concepte cheie - ieșire, logică, bucle și filtre.
Un pas mare următor ar fi să deschideți un cont gratuit pentru Shopify Partner și să începeți să disecați o temă pentru dvs. Multe dintre exemplele utilizate în acest tutorial sunt luate din tema mea de început de oase extrem de goale, care este disponibilă pe GitHub.
În pregătirea pentru partea a treia vă recomandăm să descărcați o copie și să o aplicați la un magazin de dezvoltare. Detalii complete despre încărcarea unei teme sunt disponibile în Documentele Shopify. Este literalmente la fel de simplu ca și încărcarea unui fișier ZIP. Faceți o redare cu editorul de șabloane în administrarea magazinelor de dezvoltare, schimbați câteva etichete, aplicați un filtru sau două și adăugați elemente în fișierul de aspect pentru a vedea cum se schimbă lucrurile.
În partea finală a acestei serii scurte vă voi prezenta câteva idei mai avansate care vor demonstra cât de flexibile pot fi lichidele și magazinele. Vom analiza modul în care vă permit să creați cu adevărat temele pe care le-ați cântat folosind exemple din proiectele mele și alte magazine cunoscute Shopify.
% endfor% 
