Utilizarea temei de dezvoltare Shopify

În primele două părți ale acestei serii, v-am prezentat platformei de e-commerce Shopify, am explicat conceptele sale cheie, am discutat cum sunt construite temele și apoi au fost mutate într-o privire detaliată asupra Lichidului - tematica Shopify.

În această parte finală vom analiza modul în care o cunoaștere mai profundă a lichidului vă va permite să vă faceți temele mai flexibile, permițându-vă să livrați design bogat și imaginativ al magazinului.

Să începem prin a examina modul în care putem folosi "machete alternative" pentru a avea un efect mare.

Modele alternative

Una dintre cele mai puternice caracteristici ale lichidului este fișierul de aspect pe care l-am privit în prima parte. Deseori descriu un fișier de aspect ca un "șablon de master". De obicei, acest fișier va include declarațiile noastre HTML, branding, navigare și subsol - în esență toate elementele comune ale site-ului nostru pe care dorim să le afișăm pe fiecare pagină.

Toate paginile redate într-o temă Shopify, dacă nu este specificată, se vor baza pe acest șablon principal. Implicit aceasta este theme.liquid fișier care se află în aspecte pliant. Micro template-urile noastre, situate în template-uri , va fi redat la punctul Shopify întâlnește content_for_layout Substituent lichid în fișierul nostru de aspect.

Pentru a-ți bloca memoria, aici este un exemplu de fișier foarte simplu:

  content_for_header   "screen.css" | asset_url | stilesheet_tag   content_for_layout   

Așa cum am menționat în prima parte, un fișier de aspect într-o temă Shopify trebuie să includă două etichete de ieșire lichide, content_for_header și content_for_layout. Primul este utilizat de Shopify pentru a adăuga codul pentru analiză și pentru a oferi acces rapid la zona de administrare a magazinului dvs. Al doilea, content_for_layout, va fi înlocuit de șablonul relevant din dosarul nostru de șabloane, de ex. product.liquid șablonul va fi injectat când vizionăm o pagină cu detaliile produsului.

Aspectul este o caracteristică excelentă și ne ajută să păstrăm teme frumoase și uscate. Cu toate acestea, vor exista momente în care elementele fișierului dvs. de aspect implicit trebuie să se schimbe. Poate că doriți să creați o pagină de tip splash care nu necesită branding și navigare "normale". Este posibil să fiți capabil să atingeți rezultatele dorite cu CSS, dar probabil veți dori să realizați marcare diferită. Iată în ce mod se pun în joc modele alternative.

Crearea unui aspect alternativ este foarte simplă. Primul lucru pe care trebuie să-l faceți este să creați un fișier nou și să îi oferiți un nume relevant și .lichid extensie. Numele fișierului depinde de dvs. Ceea ce este important este să îl salvați în aspecte din directorul tematic. În acest fișier puteți plasa orice HTML de care aveți nevoie (de ex., Declarații HTML, CSS, legături JS etc.) împreună cu cei doi substituenți discutați mai sus.

Pentru a utiliza acest fișier de aspect și pentru a suprascrie în mod efectiv implicit theme.liquid layout, folosim următoarea sintaxă lichidă în oricare dintre template-urile micro:

% layout "alternative"% 

Notă: nu trebuie să includeți .lichid extensie. Acum, când micro șablonul relevant este procesat de Shopify, acesta va fi redat cu alternative.liquid ca fișier de aspect.

Șabloane specifice produsului

În același mod în care putem dicta layout-uri specifice pentru a fi aplicate la template-urile noastre micro, putem folosi logica Liquid pentru a reda diferite șabloane de produs. Există o serie de modalități de a realiza acest lucru în lichid - metoda mea preferată este de a utiliza manerele de produse. Dacă ați folosit vreodată WordPress, vă puteți gândi la a mâner de produs în același mod ca a melc. Iată o adresă URL tipică a produsului de pe site-ul A Book Apart pentru a demonstra:

http://www.abookapart.com/products/responsive-web-design 

În acest exemplu, mânerul produsului este receptiv-web-design - ultimul element al adresei URL. Manerele pentru produse sunt create automat pentru dvs. atunci când adăugați un produs în administratorul Shopify și se bazează pe numele pe care îl introduceți; caracterele majuscule sunt înlocuite cu litere mici și spații cu liniuțe. Puteți, desigur, să le înlocuiți dacă aveți nevoie.

În mod prestabilit, de fiecare dată când Shopify redă o pagină cu detaliile produsului, va folosi product.liquid micro șablon. Să presupunem că dorim să servim o pagină de produs diferită doar pentru cartea lui Ethan, pentru ao sublinia cu adevărat. Pentru a face acest lucru, trebuie să facem câteva modificări la product.liquid șablon.

Cartea lui Ethan Marcotte "Responsive Web Design" pe site-ul Shop Shop A Book Apart

Dupa cum product.liquid șablon are acces la toate datele referitoare la produsul vizualizat în prezent, putem pune următoarea întrebare utilizând un lichid dacă afirmație:

% if product.handle == "responsive-web-design"% % include "responsive-web-design"% % else% [Cod HTML normal pentru product.liquid] 

Prin adăugarea în dacă , pe care am analizat-o în partea a doua a acestei serii, suntem capabili să controlam ce marcaj este redat. Pur și simplu pune, în cazul în care product.handle este egal cu "responsive-web-design" includem fișierul numit receptiv-web-design.liquid.  Cu toate acestea, dacă nu este, vom reda pur și simplu codul pe care îl avem deja în noi product.liquid șablon.

Puterea fragmentelor

Acest exemplu ne introduce în fragmente lichide. Fragmente trăiesc în numele potrivit fragmente de cod folder și sunt menționate fără .lichid atunci când utilizați eticheta lichidă % include %.

După cum sugerează și numele, folosind % include % va include literalmente o bucată de cod în fișierul dvs. micro șablon sau layout. În exemplul de mai sus, fișierul va conține marcajul alternativ necesar pentru a afișa cartea lui Ethan, inclusiv codul lichid necesar, pentru a extrage datele despre produs în șablon.

Desigur, ați putea specifica că acest șablon special va fi folosit pentru o altă carte în plus față de Ethan. Iată o modalitate de a realiza acest lucru:

% if product.handle == "responsive-web-design" SAU product.handle == "design-este-a-job"% % Cod HTML normal pentru product.liquid] % endif% 

În acest caz, vă recomandăm să redenumiți fragmentul dvs. la ceva mai adecvat, adică. produs-showcase.liquid.

Merită să rețineți că nu puteți creea dosare în directorul de fragmente. În consecință, am tendința de a prefixa fișierele mele cu funcția lor:

• produs-receptiv-web-design.liquid
• produs-showcase.liquid
• colecții books.liquid

Utilizarea acestei convenții de numire face ca fragmentarea să fie mult mai ușoară, mai ales pe măsură ce utilizările dvs. cresc.

Un exemplu despre cum am folosit fragmente pe site-ul 8 Faces pentru a separa preocupările logice

Când să utilizați fragmente

Am tendința să utilizez fragmente în două moduri diferite. Mai întâi, pentru a separa codul în bucăți ușor de gestionat și, în al doilea rând, pentru elementele unei pagini pe care trebuie să o refolosesc, cum ar fi un bloc de paginare.

Ca regulă generală, iată cum decid unde să adăugați codul:

• Apare pe fiecare pagină - fișierul de aspect
• Apare pe mai multe pagini - fișier fragment
• Apare pe o pagină - șablon micro

Micro șabloane ca controlori

Un alt truc pe care l-am folosit cu mare efect este de a trata un micro-șablon ca controlor de vedere - o idee pe care am luat-o de la multe dintre cadrele MVC pe care le-am folosit. Acesta ar putea fi un concept nou pentru dvs., așa că să aruncăm o privire mai detaliată.

În exemplele de mai sus, folosim logica lichidă pentru a verifica dacă un anumit produs este în mâner product.liquid micro șablon. Dacă răspunsul la întrebările noastre dacă declarația este adevărată include un fragment, altfel Shopify redă blocul HTML conținut între % else% și % endif% Etichete.

Pentru unii, acest lucru poate părea un pic dezordonat și poate, în timp, să devină greu de citit, mai ales dacă implicit product.liquid marcajul crește. Pentru a face mai ușor de gestionat, putem pur și simplu să luăm marcajul nostru implicit din șablonul product.liquid și să creăm un fragment pentru el - am tendința de a apela acest lucru produs-default.liquid.

În urma acestei abordări, fișierul nostru product.liquid ar putea fi refactat la următoarele:

% if product.handle == "responsive-web-design"% % include "product-responsive-web-design"% % else% %%  

Desigur, pe măsură ce cresc nevoile dvs., acest fișier ar putea crește pentru a include alte verificări și fișiere relevante incluse în funcție de rezultate. Opțiunile sunt nelimitate.

Merită să ne amintim că nu sunt doar produse care au mânere în Shopify, colecții și pagini, de asemenea. Folosind aceeași abordare pentru colecții am putea face următoarele în cadrul nostru collections.liquid șablon:

% dacă colecția.handle == "css"% % include "collection-css"% % else% % include "collection-default"% % endif% 

Utilizarea caz In loc de dacă altfel

Această metodă funcționează foarte bine dacă vrem doar să verificăm un anumit mâner, fie că este vorba despre un produs sau de o colecție, dar ce se întâmplă dacă dorim să extindem acest lucru la mai multe produse sau colecții?

Avem două abordări posibile, prima este prin extinderea noastră dacă declarație prin utilizarea elsif. Iată un exemplu:

% if product.handle == "responsive-web-design"% % include "product-responsive-web-design"% % elsif product.handle == "design-is-a-job" % include "product-design-is-a-job"% % else% % include "product-default" 

Acest exemplu verifică în schimb două mânere de produse și numai dacă nici una dintre ele nu este adevărată, va face acest lucru produs-default.liquid fragment.

Este posibil să utilizați mai multe elsif afirmațiile din "Liquid", dar poate deveni puțin verbose. O alternativă, și cred că trebuie să folosim o abordare mai neîngrădită caz. Iată exemplul de mai sus refactored:

% case product.handle% % când "responsive-web-design"% % include "design-web-design-responsiv" includeți "product-design-is-a-job"% % else% % include "product-default"% % endcase% 

De asemenea, putem face o comparație mai fuzzy utilizând operatorul Liquid conține. Să presupunem că vrem ca orice produs care are cuvântul receptiv în mâner să folosească un fragment diferit. Iată cum ne-am putea aborda folosind un lichid simplu dacă afirmație:

% if product.handle conține "responsive"% % include "product-responsive"% % else% % include "product-default"% % endif% 

Utilizarea acestei metode ar însemna că nu ar trebui să editați șablonul pentru a adăuga un nou elsif sau caz pentru alte cărți care conțin "răspuns" în titlul lor.

Aceste abordări pot fi de asemenea utilizate în cadrul temelor micro-tematice. De exemplu, ați putea să o utilizați pentru a arăta și a ascunde elementele în mod programatic. Exemple de acest lucru ar putea fi ecusoane de vânzare, oferte speciale și produse conexe.

Crearea cârligelor CSS utile

Mânerele pot fi, de asemenea, foarte accesibile atunci când se lucrează cu CSS și JavaScript. Mulți dintre noi folosesc clasa corporală pentru cârligele CSS și JavaScript și, la fel ca în WordPress, este destul de ușor să adăugăm o serie de clase utile elementului nostru corporal în Shopify.

Iată câteva idei:

Adăugați numele șablonului redat în prezent la clasa corpului:

Rețineți că folosim filtrul de mâner pentru a ne dezinstala producția. Câteva exemple de acest lucru în acțiune sunt:

Pe baza acestui lucru am dori să adăugăm mânerul produsului curent și la clasa corpului nostru. Pentru a păstra lucrurile ordonate și ordonate, putem folosi un dacă declarație pentru adăugarea condiționată a mânerului produsului numai atunci când vizionăm un produs:

Rețineți cum includ spațiul înainte de product.handle ieșire tag.

Unele teme adaugă, de asemenea, titlul paginii curente la elementul corpului sub forma unui id, bazându-ne pe cele de mai sus, codul nostru ar arăta acum după cum urmează:

Pentru o măsură bună, am putea chiar să adăugăm un cec pentru colecții și să adăugăm și asta:

Este destul de ușor să ajustați această logică pentru propriile dvs. scopuri.

Până acum, ne-am uitat la modul în care putem folosi lichidul pentru a merge dincolo de transmiterea de date și controlul fluxului de șabloane noastre. Acum, să ne întoarcem să aruncăm o privire la o altă caracteristică grozavă a setărilor Shopify - temă.

Setari tema

Setările temei permit dezvoltatorilor de teme să ofere o modalitate ușoară pentru orice utilizator de a personaliza aspectul magazinului fără a fi nevoit să modifice niciun cod HTML sau CSS. Acest lucru face ca temele să fie foarte flexibile - un plus dacă vreți să vindeți vreodată o temă prin magazinul tematic Shopify sau Themeforest.

Pentru a expune setările temei în administratorul magazinului nostru, trebuie să creați un fișier numit settings.html și salvați-l în dosarul config. Rețineți extensia, acesta este singurul fișier cu a .html extensie în tema Shopify.

Există utilizări infinite pentru setările temelor, dar una comună este schimbarea culorii de fundal a întregului site. Iată un exemplu de cod pe care îl putem discuta:

 
Setări de culori
 
 
 
 
Context (exemplu)
 
 
 
 
 
 

Cel mai important element este aici intrare. Rețineți că i-am dat un atribut id și nume de bg_color și o clasă de culoare. Această clasă este importantă; când vedem setările temelor din adminul Shopify, vom face un picker de culoare la îndemână în locul introducerii.

Setările temei, o dată stăpânite, reprezintă o caracteristică uimitor de puternică a temelor Shopify

Veți observa, de asemenea, că am stabilit o valoare pentru contribuția noastră #fff. Dacă alegem să folosim setările temei în fișierul nostru CSS, aceasta este valoarea care va deveni implicită. Fără această valoare implicită se va utiliza o valoare goală. Acesta este un gotcha Vad foarte mult!

Setările tematice sunt disponibile la nivel global, ceea ce înseamnă că le putem extrage valoarea în toate șabloanele și fișierele de aspect. Acestea includ fișierele noastre CSS și JavaScript. Pentru a face referire la o setare, în acest caz culoarea de fundal, folosim următoarea sintaxă:

settings.ro_color 

Rețineți că folosim id din intrare pentru a-și scoate valoarea. Din acest motiv, id-ul fiecărei intrări trebuie să fie unic.

Utilizarea setărilor temei

Pentru a utiliza setările de temă în fișierul nostru CSS trebuie să adăugăm .lichid la fișierul nostru CSS. Dacă fișierul nostru este sunat screen.css noi pur și simplu schimbăm screen.css.liquid.

Odată ce am făcut acest lucru putem face următoarele în fișierul CSS:

corp fond: settings.ro_color;  

Atunci când Shopify servește fișierul nostru CSS, el va înlocui etichetele de ieșire lichide cu valoarea specificată în setările temei din administratorul Shopify. Sperăm că acest exemplu evidențiază necesitatea de a nu respecta valoarea!

Pe lângă introducerea valorilor textului și a valorilor numerice în setările temelor, puteți încărca fișiere, puteți înregistra valori booleene cu casetele de selectare și puteți selecta drop down-uri pentru a alege o valoare dintr-o listă.

 
Pagina principala
 
Erou
 
 
 
 
Arătați eroul?
 
 
 
 
 
 

Exemplul de mai sus este luat de pe site-ul Web 8-uri pe care am lucrat în 2013. Folosim această setare pentru a controla logica pe pagina de pornire, iată cum:

% if settings.show_hero == true% [Fragment de cod pentru banner-erou relevant] % endif% 

Adăugarea fișierelor este ceva mai complicată, așa că să ne uităm la ea. Marcajul este totuși simplu:

 
Pagina principala
 
Erou
 
 
 
Imagine (dimensiune completă)
 
 
 
 
 

Există câteva lucruri pe care trebuie să le menționăm aici, în primul rând atributul de nume care este în exemplul nostru home-page-hero.jpg. Indiferent de numele fișierului pe care îl încărcați, acesta va fi redenumit home-page-hero.jpg.

Cel de-al doilea lucru care merită cunoscut este extensia, în cazul nostru .jpg. Indiferent de tipul de fișier pe care îl încărcați, Shopify va încerca să îl convertească la tipul specificat. Dacă nu poate, va raporta o eroare. În cele din urmă, spre deosebire de imaginile produsului, încărcările de fișiere vor fi întotdeauna salvate în dosarul de materiale al temei.

Iată cum putem face imaginea eroului paginii de pornire în șablonul nostru:

Aici folosim ASSET_URL filtrați pentru a adăuga calea completă la imaginea de pe ShopNet CDN. Dacă nu sunteți familiarizat cu acest filtru, puteți citi mai multe despre el în partea a doua a acestei serii.

Vă recomandăm cu insistență să descărcați o temă sau două gratuite de la magazinul tematică Shopify și să disecați șablonul setărilor temelor, deoarece acestea reprezintă un bun element de construcție pentru dezvoltarea propriei tematici.

Shopify Toolkit

Deși este corect să spun că tot ceea ce aveți nevoie pentru a începe să dezvoltați teme este un editor de text și un cont de partener Shopify există câteva bunătăți acolo care merită luate în considerare.

Dacă ați urmat seria, probabil că v-ați înscris pentru un cont de partener Shopify gratuit. Un lucru pe care īl recomand īntotdeauna este să īnființez "gateway-ul fals" īn magazinele de dezvoltare. Veți găsi acest lucru în fila de setări la checkout din administratorul Shopify. Activarea acestui lucru vă va permite să prezentați o tranzacție completă și veți genera toate notificările asociate prin e-mail care sunt generate. Merită să vă amintiți că puteți utiliza toate aceste tehnici Liquid în e-mailurile de notificare pentru a avea un efect mare.

Un alt utilitar foarte util este editorul tematica Shopify Desktop pentru Mac. Odată instalat, acesta va sincroniza perfect fișierele cu fișierele de dezvoltare sau cu magazinul live. De asemenea, dacă utilizați Mac, Windows sau Linux, puteți instala instrumentul de linie de comandă Geniul Shopify pentru a sincroniza fișierele locale cu magazinul de dezvoltare.

Editorul temei Desktop Shop pentru Mac permite sincronizarea fără sincronizare a fișierelor între sistemul de fișiere local și magazinul dvs.

În cele din urmă, dacă sunteți un utilizator TextMate sau un fan al SublimeText, vă recomandăm să instalați o copie a extensiei Liquid care se ocupă de evidențierea sintaxei pentru Liquid.

Tema Inspirație

Magazinul Temă Shopify este plin de teme gratuite pe care le puteți descărca și de a învăța de la. Cu toate acestea, atunci când vine vorba de a începe propria temă s-ar putea prefera ceva mai mult dezbrăcat înapoi ca boilerplate meu proprii disponibile pe GitHub.

Resurse

În sfârșit, iată câteva resurse alese pentru a vă ajuta în dezvoltarea temei Shopify:

• Marcajul lui Mark Dunkley - fiecare variabilă de șablon și logica lichidului, filtrul și eticheta de ieșire pe care o veți avea vreodată nevoie.
• Achiziționați documentația tematică - Recent reproiectată și un punct de referință excelent pentru tematică
• Cumpărați forumuri de comerț electronic - o mulțime de subiecte acoperite, de la crearea unui magazin până la construirea temelor și sugestii și sfaturi despre desfășurarea unei afaceri online de succes

Pasii urmatori

Shopify este o platformă excelentă și plină de satisfacții pentru a proiecta pentru cu bonusul adăugat că Liquid devine larg adoptat în alte instrumente cum ar fi Mixture și SiteLeaf. Am acoperit foarte mult aceste trei tutoriale. Înainte de toate sper că ați găsit interesant și util și că ideile prezentate aici vă permit să construiți experiențe de comerț electronic excelente pentru dvs. și clienții dvs..