Ce este Shopify Lichid? O scurtă prezentare a elementelor de bază

Peste 4.4 milioane de euro Site-urile de comerț electronic sunt create folosind Shopify platformă. Este platforma de comerț electronic all-in-one care a zguduit web-ul de la începutul său în 2006. Comercianții aleg această platformă pentru a-și găzdui magazinele online din mai multe motive, de la configurarea simplă a plății la instrumente de marketing încorporate și multe altele. 

Dar unul dintre aspectele critice ale Shopify este generatorul său intuitiv de site-uri cu mii de teme și Shopify integrări de aplicații din care să alegeți. 

Cu toate acestea, în timp ce generator fără cod vă permite să creați site-uri web uimitoare și unice, există anumite limitări. De exemplu, atunci când începeți să vă construiți magazinul online, trebuie să alegeți o temă care să definească aranjamentul și nivelul de control pe care îl obțineți asupra conținutului dvs. Chiar dacă selectați o temă goală, adică una fără conținut - există totuși o arhitectură de cod subiacentă care predefinește modul în care este organizat conținutul.

Dar sunt vești bune. Dacă doriți să vă creați propriul dvs Shopify șablon pentru site-ul dvs. sau al altcuiva, există Shopify Lichid.

Interesat? Alătură-te mie în timp ce încerc să răspund la întrebarea: Ce este Shopify Lichid? Să ne scufundăm!

Ce este Shopify Lichid?

Interesant, Shopify Lichidul a existat de atunci Shopifyînceputul lui. Când ShopifyCreatorii lui au proiectat mai întâi platforma, au construit un proiect open-source care să servească drept limbaj șablon pentru toți Shopify template-uri. 

Pentru cei neinițiați, „limbaj de programare cu sursă deschisă” se referă la codul sursă al unui software care este disponibil gratuit pentru public, permițând oricui să utilizeze, să modifice și să distribuie codul în orice scop. 

Creat folosind Ruby, Shopify Lichid servește în esență ca substituent, astfel încât să puteți insera date într-un format predefinit format (mai multe despre asta mai jos).

Deci, cum funcționează?

Pentru a înțelege acest lucru, mai întâi trebuie să știți că site-urile web sunt de obicei statice sau dinamice. Magazinele statice sunt codificate pentru a afișa conținutul exact așa cum este scris, de exemplu, în HTML. În schimb, un site web dinamic poate afișa conținut diferit în funcție de modul în care utilizatorul interacționează cu acesta. 

Acum să presupunem că aveți un site web static; scheletul de bază al site-ului este prestabilit, dar doriți să redați conținut dinamic. Aici scrie Shopify Lichidul în codul HTML este util. Acest lucru se pretează ca substituent pentru conținut dinamic. 

Shopify Lichidul acționează ca un intermediar între magazinul dvs. și Shopifyserverul lui, permițând lui Liquid să extragă date din Shopifyserverul lui și livrați-l în magazinul dvs. Liquid poate solicita trei tipuri principale de date:

1. Obiecte
2. Tag-uri
3. Filtre

Mai jos, vom explora fiecare tip de date pe rând:

Obiecte lichide

Obiectele sunt similare cu o bibliotecă de funcții sau conținut; în cadrul fiecărui obiect, există diverse proprietăți. 

Dacă nu sunteți familiarizat cu conceptul de obiecte, iată o scurtă prezentare generală:

Un obiect este un concept fundamental în programare. Un obiect este format din două componente: 

1. Proprietăți care definesc starea obiectului
2. Funcții care definesc comportamentul obiectului

Pentru a ilustra mai bine cum funcționează, vom folosi un exemplu care nu are legătură cu codificarea. De exemplu, o mașină. Aici, mașina, adică obiectul, ar putea avea funcții precum „accelerează”, „întoarce” și „frânează”. În schimb, proprietățile ar putea fi „ferestrele” mașinii, „ușile” etc. 

Mai simplu spus, obiectele sunt importante concept în codificare deoarece ajută la organizarea sistemelor complexe în bucăți mai ușor de gestionat.

De exemplu, să presupunem că creați un personalizat Shopify temă și doriți să afișați a Titlu de Blog în șablonul dvs. Puteți folosi Liquid pentru a aduce astaformation din Shopifyserverul lui și afișați-l undeva pe pagină. În acest exemplu, aceasta este fragmentul de cod Liquid pe care l-ați folosi pentru a realiza acest lucru:

{{Blog.title}} 

Să descompunem acest lucru:

• Aici, 'blogul' este obiectul. 
• Proprietatea pe care o dorim în aceasta bibliotecă este marcat de „titlu 
•  '' îi spune lui Liquid cum sunt legați acești doi biți de date. 
• Parantezele duble sunt sintaxa Liquid care definește {{conținutul/ieșirea pe care o doriți}} pe care o doriți din Shopify Server. 

Etichete lichide

Atunci când se utilizează Shopify Lichid, etichetele adaugă logică conținutului pe care îl solicităm de la Shopify server pentru a ajuta la definirea momentului în care conținutul ar trebui să fie vizibil pe pagină. De exemplu, să presupunem că vrem să afișăm o anumită grafică în postările noastre festive de blog. Adică, dorim ca acest grafic să apară numai atunci când este îndeplinită o anumită condiție. 

Iată cum ar putea arăta:

{% if blog.title == „sărbătoare” %}

**imagine HTML**

{% se încheie dacă %}

Acest lucru poate părea complex, dar dacă îl descompunem, este destul de simplu de înțeles:

• Etichetele folosesc o sintaxă ușor diferită față de obiectele care arată astfel  {%…%}.
• Prima etichetă {% if blog.title == „sărbătoare” %} îi spune lui Liquid ce condiție trebuie îndeplinită înainte de a solicita conținut de la server.
• Condiția pe care am cerut-o este definită de un declarația „dacă”.. Dacă sunteți familiarizat cu codarea, veți ști că declarațiile „dacă” funcționează prin compararea a două sau mai multe date între ele. Dacă se potrivesc, se va trece la următoarea linie din codul nostru. Aici,  dacă blog.title == „sărbătoare”, îi cerem lui Liquid să verifice dacă titlul blogului nostru conține cuvântul „sărbătoare”. Dacă se întâmplă, va merge la următoarea linie a codului nostru. Dacă nu, Liquid nu va returna niciun conținut.
• În acest exemplu, dacă avem un titlu de blog care conține cuvântul „sărbătoare”, Liquid va trage și va afișa HTML-ul imaginii noastre.
• Odată ce face acest lucru, trece la următoarea linie {% end if %}, care încheie programul nostru.

Acesta este doar un exemplu de ceea ce puteți face cu etichetele. Shopify Lichidul are etichete pentru:

• Mod de control când codul este executat
• Repeta/repetare (repetă) un bloc de cod
• Afişa anumite markupuri HTML
• Creați variabile noi.

Filtre de lichide

Filtrele sunt bucăți de cod care modifică sau modifică rezultatul unui obiect. De exemplu, pot schimba culoarea, fontul, dimensiunea sau aspectul elementelor site-ului web. 

Dar, pe lângă schimbarea aspectelor vizibile ale obiectului, pot îndeplini funcții asupra unui obiect. De exemplu, dacă doriți să afișați titlurile blogului dvs. cu majuscule, un filtru vă poate ajuta să realizați acest lucru fără a modifica manual toate titlurile blogului:

{{ blog.title | uppercase }}

• Sintaxa pentru filtre este {{…}}.
• Aici, proprietatea obiectului pe care o căutăm este „Titlu de Blog'.
• Filtrul pe care îl aplicăm este majuscule.
•  '|' separă intrarea și ieșirea codului nostru.

Acum, când un utilizator se uită la titlul blogului nostru, acesta va apărea cu majuscule.

beneficiile de Shopify Lichid

Să presupunem că sunteți designer sau dezvoltator de site. În acest caz, unul dintre cele mai importante beneficii ale Shopify Liquid este că nu aveți nevoie de datele din magazin (adică, înformatdespre magazin) pentru a crea sau modifica un site web. Acest lucru se datorează faptului că atunci când un utilizator face pentru prima dată un Shopify magazin, toate informationul este stocat pe Shopify server, ceea ce înseamnă că puteți utiliza Liquid pentru a prelua pur și simplu datele de care aveți nevoie. 

Cu toate acestea, dacă nu sunteți un dezvoltator web, ci sunteți doar un proprietar de magazin care dorește să vă îmbogățească magazinul, există beneficii și pentru dvs.:

• Ușor de învățat și utilizat: Liquid are o sintaxă simplă și este ușor de înțeles, făcându-l accesibil pentru dezvoltatori și non-dezvoltatori.
• Conținut dinamic: Liquid permite crearea de conținut dinamic
• personalizate: Cu Liquid, puteți crea șabloane și teme personalizate, oferindu-vă control complet asupra aspectului magazinului dvs. de comerț electronic.
• Performanta imbunatatita: Șabloanele lichide sunt compilate și stocate în cache, îmbunătățindu-se performanța și viteza site-ului comparativ cu alte motoare de șablon.
• Comunitate mare: Shopify are o comunitate mare de utilizatori, oferind acces la o mulțime de cunoștințe și asistență, facilitând găsirea de soluții la problemele comune legate de lichid.

Cerinţe

Deci de ce aveți nevoie pentru a începe să utilizați Shopify Lichid?

Dacă aveți deja o Shopify stoca, Shopify Lichidul va fi disponibil pentru utilizare gratuit. Vom discuta mai jos despre cum puteți găsi Liquid. Dar tot ce trebuie să știi pentru moment este că fiecare site creat pe Shopify este construit cu Liquid, astfel încât să puteți începe editarea manuală a acestui cod de îndată ce ați creat un site.

Cu toate acestea, dacă nu aveți un Shopify magazin, va trebui să faci unul pentru a începe să te joci cu Liquid. 

1. În primul rând, du-te la Shopify și selectați un plan. Completează-ți datele și creează-ți contul.
2. De la tine Shopify admin, dați clic pe teme. Shopify furnizează automat o temă implicită. Puteți lăsa acest lucru așa cum este sau puteți alege o altă temă de la care să începeți.
3. Shopify are o listă de verificare pe care o puteți parcurge pentru a vă finaliza magazinul. Veți dori să faceți toate elementele de bază, cum ar fi adăugarea paginilor de produse, proiectarea vitrinei dvs. etc.

Acum că aveți scheletul de bază al magazinului dvs. online, puteți extrage aceste date din Shopify server și personalizați-l folosind Liquid (mai multe despre asta mai jos). 

Deși nu aveți nevoie de nicio experiență de codare pentru a începe să utilizați Liquid, familiaritatea cu principiile de bază de codare vă va face călătoria mai ușoară. Dar, în cea mai mare parte, puteți găsi documentație extinsă de autoajutorare și tutoriale pe Shopify portalul dezvoltatorilor. Aici veți găsi o întreagă secțiune dedicată Bazele lichidelor. 

Este recomandabil să petreceți ceva timp să vă uitați prin aceste ghiduri înainte de a începe. Deși Liquid este un instrument puternic de personalizare, are și potențialul de a vă distruge site-ul dacă nu știți ce faceți!

Noţiuni de bază Shopify Lichid

Deci, folosind ceea ce am învățat până acum, să vedem cum putem să ne edităm Shopify temă folosind Liquid. 

Pentru a accesa Liquid, urmați acești pași:

1. Duplicați-vă tema: Pentru a preveni orice accident major, este wise pentru a face o copie a temei înainte de a începe. În acest fel, dacă faci vreo greșeală, originalul tău Shopify tema rămâne intactă. Pentru a face acest lucru, navigați la secțiunea de teme din partea dreaptă a paginii dvs Shopify bord. Alegeți tema pe care doriți să o editați și faceți clic pe acțiuni pentru a vedea meniul drop-down. Acum, selectați duplicat.
2. Redenumiți duplicatul dvs.: Când duplicați o temă, o veți vedea în lista dvs. de teme. Puteți redenumi copia, astfel încât să nu confundați originalul și duplicatul. Doar faceți clic din nou pe butonul de acțiuni și apăsați Redenumiți din meniul drop-down. 
3. Intrarea în editorul de coduri: Acum, selectați din nou acțiunile pe duplicatul dvs. și selectați editați codul. Veți fi direcționat către lista completă de coduri din tema dvs. Aruncă o privire la folderele listate în dreapta ta. Ar trebui să vedeți o grămadă de foldere care conțin diferite aspecte ale temei dvs., cum ar fi aspectul, șabloanele, secțiunile etc. Deschideți folderul șabloane. 
4. Codare în lichid: În dosarul de șabloane, veți vedea o listă de fișiere cu tipul de fișier .liquid. De asemenea, puteți crea un nou șablon de fișier Liquid selectând butonul plus din folderul șablon. Vă va întreba ce șablon doriți să faceți, adică pagină, secțiune, blog etc., și să denumiți fișierul. Pentru a edita un fișier, faceți dublu clic pe un fișier șablon și acesta se va deschide în editorul de cod din dreapta.

În interiorul oricărui fișier Liquid, veți vedea un script HTML. Acesta este scheletul site-ului dvs. Puteți folosi limbajul Liquid din acest HTML pentru a preluaformation din Shopify Server. Atâta timp cât folosiți sintaxa corectă a Liquidului, adică parantezele, ar trebui să vă redați conținutul în consecință.

Pentru a ilustra, haideți să trecem printr-un exemplu ușor:

Redimensionarea imaginilor folosind Shopify Lichid

Imaginile sunt un aspect esențial pentru majoritatea Shopify magazine. Dar dacă utilizați mai multe imagini, poate fi un coșmar să le dimensionați corect pe toate, astfel încât să apară frumos. Pentru a remedia acest lucru, ne uităm la img_url filtru. Ca și alte filtre, img_url este conceput pentru a modifica conținutul pe care îl preia din Shopify Server. Puteți utiliza acest filtru pentru a modifica dimensiunea, scara, format, și decuparea. 

Aceasta este o tehnică excelentă deoarece filtrul modifică doar temporar o imagine existentă; nu creează o nouă imagine de fiecare dată pentru a reda șablonul, așa că nu va încetini timpul de încărcare a site-ului. 

Deci, cum redimensionăm o imagine?

În primul rând, trebuie să decidem unde vrem să aplicăm modificările. Puteți aplica filtrul img_url la orice obiect cu o proprietate de imagine, inclusiv:

• Produse
• Variante de produs
• Elemente rând
• Colecţii
• Actualităţi

Odată ce decideți ce imagini doriți să editați, trebuie să știți ce proprietate aveți wish pentru a viza. Pentru a afla ce proprietăți au un atribut de imagine, priviți Shopifylista de obiecte a lui si proprietatile lor. 

În acest exemplu, vom viza imaginile articolelor din blogul nostru.

Iată codul de bază:

{{ blog.articles.image | img_url: ‘100×100' }}

Pană:

• Blog este obiectul pe care îl căutăm și dorim proprietatea bunuri, deoarece acesta conține toate articolele de pe blogul nostru. Mai exact, dorim să schimbăm imaginile din articolele de pe blog, așa că țintim imagine proprietate în cadrul articolelor.
• Acum aplicăm filtrul img_url. Dacă l-am lăsa așa cum este, ar afișa pur și simplu o imagine extrasă de la adresa URL furnizată de Shopify Server. Cu toate acestea, vom oferi și un parametru suplimentar: dimensiunea imaginii '100×100' (Rețineți că Shopify folosește pixeli pentru a determina intervalele de dimensiuni).
• În cele din urmă, împachetăm codul nostru folosind sintaxa cu paranteze duble Liquid, care este folosită pentru filtre. 

Și am terminat! Acest lucru ar trebui să returneze rezultate pentru toate imaginile blogului nostru, făcându-le 100 pe 100 de pixeli în dimensiune.

Sfaturi și la pachet

Sper că, după ce ați citit acest articol, aveți acum un răspuns la întrebarea: Ce este Shopify Lichid?

După cum puteți vedea, Shopify Lichid este un instrument versatil care poate servi diverse funcții atunci când proiectați sau editați a Shopify șablon. Deși există o curbă de învățare, odată ce te obișnuiești cu ea, este destul de ușor de utilizat – mai ales în comparație cu alte limbaje de codare mai complexe precum Javascript.

Dacă sunteți interesat să utilizați Shopify Liquid, vă sfătuim să urmați aceste recomandări pentru a beneficia la maximum de el:

1. Începeți cu o înțelegere solidă a lichidului: O înțelegere puternică a Liquid vă va permite să construiți teme personalizate mai complexe. Cu această bază, noii utilizatori pot valorifica întregul potențial al Shopify pentru a crea magazine online unice și captivante.
2. Testează-ți tema temeinic: Testarea este esențială pentru a vă asigura că tema dvs. personalizată funcționează conform așteptărilor pe diferite browsere și dispozitive. Prin detectarea timpurie a problemelor de compatibilitate, eviți potențiala frustrare pentru clienții tăi.
3. Utilizați instrumentele și resursele disponibile: Shopify are o mulțime de resurse disponibile pentru a ajuta dezvoltatorii de teme, așa că folosește-le! Când este utilizat, acest lucru poate face procesul de dezvoltare mai rapid și mai ușor.

Cu toate aceste puncte acoperite, cred că este sigur să spun asta Shopify Liquid poate fi o modalitate distractivă și eficientă de a actualiza sau de a crea un mod mai captivant și mai dinamic Shopify magazin. 

Asta e tot de la mine; este randul tau. Spune-mi despre experiențele tale cu Shopify Lichid în comentariile de mai jos!