Wat is Shopify Vloeistof? 'n Vinnige oorsig van die basiese beginsels

oor 4.4 miljoen e-handelswebwerwe word gebou met behulp van die Shopify platform. Dit is die alles-in-een e-handelsplatform wat die web geruk het sedert sy begin in 2006. Handelaars kies hierdie platform om hul aanlynwinkels om baie redes te huisves, van maklike betalingsopstelling tot ingeboude bemarkingsinstrumente en nog baie meer. 

Maar een van die kritieke aspekte van Shopify is sy intuïtiewe webwerfbouer met duisende temas en Shopify app-integrasies om van te kies. 

Terwyl die geen-kode bouer kan jy pragtige en unieke webwerwe skep, daar is 'n paar beperkings. Wanneer jy byvoorbeeld jou aanlynwinkel begin bou, moet jy 'n tema kies wat die rangskikking en vlak van beheer wat jy oor jou inhoud kry, definieer. Selfs as jy 'n leë tema kies, dws een sonder inhoud, is daar steeds 'n onderliggende kode-argitektuur wat vooraf definieer hoe inhoud georganiseer word.

Maar daar is goeie nuus. As jy jou eie wil skep Shopify sjabloon vir jou webwerf of iemand anders s'n, daar is Shopify Vloeistof.

Stel u belang? Sluit by my aan terwyl ek poog om die vraag te beantwoord: Wat is Shopify Vloeistof? Kom ons duik in!

Wat is Shopify Vloeistof?

Interessant genoeg, Shopify Vloeistof bestaan ​​sedertdien Shopifyse ontstaan. Wanneer Shopifyse skeppers het eers die platform ontwerp, hulle het 'n oopbronprojek gebou om as die sjabloontaal vir almal te dien Shopify webwerf templates. 

Vir die oningewydes verwys 'oopbron-programmeertaal' na 'n sagteware se bronkode wat vrylik vir die publiek beskikbaar is, wat enigiemand toelaat om die kode vir enige doel te gebruik, te verander en te versprei. 

Geskep met behulp van Ruby, Shopify Liquid dien in wese as 'n plekhouer sodat jy data in 'n voorafbepaalde formaat kan invoeg (meer hieroor hieronder).

Hoe werk dit?

Om dit te verstaan, moet jy eers weet dat webwerwe tipies staties of dinamies is. Statiese winkels is hardkodeer om inhoud te wys presies soos dit geskryf is, byvoorbeeld in HTML. Daarteenoor kan 'n dinamiese webwerf verskillende inhoud vertoon, afhangende van hoe die gebruiker daarmee omgaan. 

Kom ons sê nou jy het 'n statiese webwerf; die basiese skelet van die webwerf is vooraf ingestel, maar jy wil dinamiese inhoud weergee. Dit is waar skryf Shopify Vloeistof in jou HTML-kode is handig. Dit leen hom as 'n plekhouer vir dinamiese inhoud. 

Shopify Vloeistof dien as 'n tussenganger tussen jou winkel en Shopifyse bediener, wat Liquid in staat stel om data van te trek Shopifyse bediener en lewer dit by jou winkel af. Vloeistof kan drie hooftipes data versoek:

1. voorwerpe
2. Tags
3. Filters

Hieronder sal ons elke datatipe om die beurt ondersoek:

Vloeibare voorwerpe

Voorwerpe is soortgelyk aan 'n biblioteek van funksies of inhoud; binne elke voorwerp is daar verskeie eienskappe. 

As jy nie vertroud is met die konsep van voorwerpe nie, hier is 'n kort oorsig:

'n Voorwerp is 'n fundamentele konsep in programmering. 'n Voorwerp bestaan ​​uit twee komponente: 

1. Eienskappe wat die toestand van die voorwerp definieer
2. Funksies wat die gedrag van die voorwerp definieer

Om beter te illustreer hoe dit werk, sal ons 'n nie-koderingverwante voorbeeld gebruik. Byvoorbeeld, 'n motor. Hier kan die motor, dit wil sê die voorwerp, funksies hê soos “versnel”, “draai” en “rem”. Daarteenoor kan die eienskappe die motor se "vensters", "deure", ens. 

Eenvoudig gestel, voorwerpe is 'n belangrike konsep in kodering omdat hulle komplekse stelsels help organiseer in meer hanteerbare stukke.

Kom ons sê byvoorbeeld dat jy 'n pasgemaakte skep Shopify tema en wil 'n vertoon blog titel in jou sjabloon. Jy kan Liquid gebruik om daardie inligting van te bring Shopifyse bediener en vertoon dit iewers op die bladsy. In hierdie voorbeeld is dit die stukkie Liquid-kode wat jy sal gebruik om dit te bereik:

{{Blog.title}} 

Kom ons breek dit af:

• Hier,'blog' is die voorwerp. 
• Die eiendom wat ons hierin wil hê biblioteek is gemerk deur 'titel' 
• Die  '. " vertel Liquid hoe hierdie twee stukkies data verwant is. 
• Die dubbele hakies is vloeibare sintaksis wat die {{inhoud/afvoer wat jy wil hê}} definieer wat jy van die Shopify bediener. 

Vloeibare etikette

By gebruik Shopify Liquid, Merkers voeg logika by die inhoud wat ons van die Shopify bediener om te help definieer wanneer inhoud op die bladsy sigbaar moet wees. Byvoorbeeld, kom ons sê ons wil 'n spesifieke grafika op ons feestelike blogplasings vertoon. Dit wil sê, ons wil hê dat hierdie grafika slegs moet verskyn wanneer aan 'n spesifieke voorwaarde voldoen word. 

Hier is hoe dit kan lyk:

{% if blog.title == 'viering' %}

**beeld HTML**

{% end if %}

Dit lyk dalk kompleks, maar as ons dit afbreek, is dit redelik eenvoudig om te verstaan:

• Merkers gebruik 'n effens ander sintaksis as voorwerpe wat so lyk  {%…%}.
• Die eerste merker {% if blog.title == 'viering' %} vertel Liquid watter voorwaarde nagekom moet word voordat inhoud vanaf die bediener versoek word.
• Die toestand waarvoor ons gevra het word gedefinieer deur 'n 'as' stelling. As jy vertroud is met kodering, sal jy weet dat 'as'-stellings werk deur twee of meer stukke data met mekaar te vergelyk. As hulle ooreenstem, sal dit na die volgende reël in ons kode beweeg. Hier,  if blog.title == 'viering,' ons vra Liquid om te kyk of ons blogtitel die woord 'viering' bevat. As dit wel gebeur, sal dit afgaan na die volgende reël van ons kode. As dit nie die geval is nie, sal Liquid geen inhoud terugstuur nie.
• In hierdie voorbeeld, as ons 'n blogtitel het wat die woord 'viering' bevat, sal Liquid ons beeld-HTML trek en vertoon.
• Sodra dit dit doen, gaan dit na die volgende reël {% end if %}, wat ons program beëindig.

Dit is net een voorbeeld van wat jy met etikette kan doen. Shopify Vloeistof het etikette vir:

• Beheer wanneer kode uitgevoer word
• Herhaal/iterasie (herhaal) 'n blok kode
• Wys sekere HTML-opmerkings
• Skep nuwe veranderlikes.

Vloeistoffilters

Filters is stukke kode wat die uitvoer van 'n voorwerp verander of wysig. Hulle kan byvoorbeeld webwerf-elemente se kleur, lettertipe, grootte of voorkoms verander. 

Maar, sowel as om die voorwerp se sigbare aspekte te verander, kan hulle funksies op 'n voorwerp verrig. As jy byvoorbeeld jou blogtitels in 'n nuwe geval wil wys, kan 'n filter jou help om dit te bereik sonder om al jou blogtitels handmatig te verander:

{{ blog.title | uppercase }}

• Die sintaksis vir filters is {{…}}.
• Hier is die voorwerpeienskap waarna ons soek 'blog.title'.
• Die filter wat ons toepas is uppercase.
• Die  '|' skei die invoer en uitvoer van ons kode.

Nou, wanneer 'n gebruiker na ons blogtitel kyk, sal dit in hoofletters verskyn.

Voordele van Shopify Liquid

Gestel jy is 'n werfontwerper of ontwikkelaar. In daardie geval, een van die belangrikste voordele van Shopify Vloeibaar is dat jy nie die winkeldata (dws inligting oor die winkel) nodig het om 'n webwerf te skep of te wysig nie. Dit is omdat wanneer 'n gebruiker eers 'n Shopify winkel, word al die inligting op die gestoor Shopify bediener, wat beteken dat u Liquid kan gebruik om eenvoudig die data wat u benodig, te herwin. 

As jy egter nie 'n webontwikkelaar is nie, maar eerder net 'n winkeleienaar is wat jou winkel wil opkikker, is daar ook voordele vir jou:

• Maklik om te leer en te gebruik: Liquid het 'n eenvoudige sintaksis en is maklik om te verstaan, wat dit toeganklik maak vir ontwikkelaars en nie-ontwikkelaars.
• Dinamiese inhoud: Vloeistof maak voorsiening vir dinamiese inhoudskepping
• aanpas: Met Liquid kan u pasgemaakte sjablone en temas skep, wat u volledige beheer gee oor die voorkoms en gevoel van u e-handelswinkel.
• Verbeterde prestasie: Vloeibare sjablone word saamgestel en gekas, wat verbeter webwerf prestasie en spoed in vergelyking met ander sjabloonenjins.
• Groot gemeenskap: Shopify het 'n groot gebruikersgemeenskap, wat toegang bied tot 'n magdom kennis en ondersteuning, wat die vind van oplossings vir algemene Vloeistofverwante probleme makliker maak.

Vereistes

So wat het jy nodig om te begin gebruik Shopify Vloeistof?

As jy reeds 'n Shopify stoor, Shopify Vloeistof sal beskikbaar wees vir jou om gratis te gebruik. Ons sal hieronder bespreek hoe u Liquid kan vind. Maar al wat u nou moet weet, is dat elke webwerf wat op geskep is Shopify is gebou met Liquid, sodat jy kan begin om hierdie kode handmatig te redigeer sodra jy 'n webwerf gemaak het.

As jy egter nie 'n Shopify winkel, sal jy een moet maak om met Liquid te begin rondspeel. 

1. Gaan eers na Shopify en kies 'n plan. Vul jou besonderhede in en skep jou rekening.
2. Van jou Shopify admin, klik op temas. Shopify verskaf outomaties 'n verstek tema. Jy kan dit laat soos dit is of 'n ander tema kies om van te begin.
3. Shopify het 'n kontrolelys waardeur u kan gaan om u winkel te voltooi. Jy sal al die basiese beginsels wil doen, soos om produkbladsye by te voeg, jou winkelfront te ontwerp, ens.

Noudat jy die basiese skelet van jou aanlynwinkel het, kan jy hierdie data uit die Shopify bediener en pas dit aan met Liquid (meer hieroor hieronder). 

Alhoewel jy geen koderingservaring nodig het om Liquid te begin gebruik nie, sal vertroudheid met basiese koderingbeginsels jou reis makliker maak. Maar vir die grootste deel kan u uitgebreide selfhelpdokumentasie en tutoriale oor die Shopify ontwikkelaarsportaal. Hier sal jy 'n hele afdeling vind wat gewy is aan Vloeistof basiese beginsels. 

Dit is raadsaam dat jy tyd spandeer om deur hierdie gidse te kyk voordat jy begin. Alhoewel Liquid 'n kragtige aanpassingsinstrument is, het dit ook die potensiaal om jou werf te breek as jy nie weet wat jy doen nie!

Aan die gang met Shopify Liquid

Dus, met behulp van wat ons tot dusver geleer het, kom ons kyk hoe ons te werk kan gaan om ons te redigeer Shopify tema met behulp van Liquid. 

Volg hierdie stappe om toegang tot Liquid te verkry:

1. Dupliseer jou tema: Om enige groot ongelukke te voorkom, is dit wys om 'n kopie van jou tema te maak voordat jy begin. Op dié manier, as jy enige foute maak, jou oorspronklike Shopify tema bly ongeskonde. Om dit te doen, navigeer na die temas-afdeling aan die regterkant van jou Shopify dashboard. Kies die tema wat jy wil wysig en klik aksies om die aftreklys te sien. Kies nou duplikaat.
2. Hernoem jou duplikaat: Wanneer jy 'n tema dupliseer, sal jy sien dat dit in jou lys temas verskyn. Jy kan jou kopie hernoem sodat jy nie die oorspronklike en die duplikaat verwar nie. Klik net weer op die aksies-knoppie en druk hernoem op die aftreklys. 
3. Voer die kode-redigeerder in: Kies nou weer aksies op jou duplikaat en kies wysig kode. Jy sal na die volledige lys kodes binne jou tema gelei word. Kyk na die dopgehou wat aan jou regterkant gelys is. Jy behoort 'n klomp dopgehou te sien wat verskillende aspekte van jou tema bevat, soos die uitleg, sjablone, afdelings, ens. Maak die sjabloongids oop. 
4. Kodering in vloeistof: Binne die templates-lêergids sal jy 'n lys lêers met die lêertipe .liquid sien. U kan ook 'n nuwe vloeibare lêersjabloon skep deur die plusknoppie op die sjabloongids te kies. Dit sal jou vra watter sjabloon jy wil maak, bv. bladsy, afdeling, blog, ens., en om die lêer te benoem. Om 'n lêer te wysig, dubbelklik op 'n sjabloonlêer, en dit sal in die koderedigeerder aan die regterkant oopmaak.

Binne enige Liquid-lêer sal jy 'n HTML-skrip sien. Dit is die skelet van jou webwerf. Jy kan die Liquid-taal binne hierdie HTML gebruik om inligting van die Shopify bediener. Solank jy die korrekte Liquid-sintaksis gebruik, dws die hakies, moet dit jou inhoud dienooreenkomstig weergee.

Om dit te illustreer, kom ons gaan deur 'n maklike voorbeeld:

Verander die grootte van prente met behulp van Shopify Liquid

Beelde is 'n noodsaaklike aspek van die meeste Shopify winkels. Maar as jy veelvuldige beelde gebruik, kan dit 'n nagmerrie wees om hulle almal korrek te grootte, sodat hulle netjies vertoon. Om dit reg te stel, kyk ons ​​na die img_url filter. Soos ander filters, is img_url ontwerp om die inhoud wat dit van die Shopify bediener. Jy kan hierdie filter gebruik om jou beelde se grootte, skaal, formaat en uitsny te verander. 

Dit is 'n uitstekende tegniek omdat die filter 'n bestaande beeld net tydelik wysig; dit skep nie elke keer 'n nuwe prent om jou sjabloon weer te gee nie, so dit sal nie jou werf se laaityd vertraag nie. 

So, hoe verander ons die grootte van 'n prent?

Eerstens moet ons besluit waar ons die veranderinge wil toepas. U kan die img_url filter na enige voorwerp met 'n beeldeienskap, insluitend:

• produkte
• Produkvariante
• Lynitems
• versamelings
• Artikels

Sodra jy besluit watter beelde jy wil wysig, moet jy weet watter eiendom jy wil teiken. Om uit te vind watter eienskappe 'n beeldkenmerk het, kyk na Shopifyse lys van voorwerpe en hul eiendomme. 

In hierdie voorbeeld sal ons ons blogartikelbeelde teiken.

Hier is die basiese kode:

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

Afbreek:

• Nuus is die voorwerp waarna ons soek, en ons wil die eiendom hê artikels, aangesien dit al die artikels in ons blog bevat. Ons wil spesifiek die beelde in ons blogartikels verander, daarom rig ons die beeld eiendom binne artikels.
• Nou pas ons die filter toe img_url. As ons dit gelaat het soos dit is, sal dit bloot 'n prent vertoon wat uit die URL verskaf word deur die Shopify bediener. Ons gaan egter ook 'n ekstra parameter gee: die beeldgrootte '100×100' (Let daarop dat Shopify gebruik pixels om groottereekse te bepaal).
• Laastens draai ons ons kode toe met behulp van die Liquid-dubbelhakie-sintaksis, wat vir filters gebruik word. 

En ons is klaar! Dit behoort uitset vir al ons blogprente terug te gee, wat hulle 100 by 100 pixels groot maak.

Wenke en wegneemetes

Ek hoop dat u, nadat u hierdie artikel gelees het, nou 'n antwoord het op die vraag: Wat is Shopify Vloeistof?

Soos jy kan sien, Shopify Liquid is 'n veelsydige hulpmiddel wat verskeie funksies kan dien wanneer 'n ontwerp of redigeer Shopify sjabloon. Alhoewel daar 'n bietjie van 'n leerkurwe is, sodra jy daaraan gewoond is, is dit redelik maklik om te gebruik - veral in vergelyking met ander meer komplekse koderingstale soos Javascript.

As jy belangstel om te gebruik Shopify Liquid, ons sal jou aanraai om hierdie wegneemetes te volg om die meeste daaruit te kry:

1. Begin met 'n goeie begrip van Liquid: 'n Sterk begrip van Liquid sal jou toelaat om meer komplekse pasgemaakte temas te bou. Met hierdie grondslag kan nuwe gebruikers die volle potensiaal van Shopify unieke en boeiende aanlynwinkels te skep.
2. Toets jou tema deeglik: Toetsing is noodsaaklik om te verseker dat jou pasgemaakte tema werk soos verwag oor verskillende blaaiers en toestelle. Deur versoenbaarheidskwessies vroeg op te spoor, vermy jy potensiële frustrasie vir jou kliënte.
3. Gebruik beskikbare gereedskap en hulpbronne: Shopify het 'n magdom hulpbronne beskikbaar om tema-ontwikkelaars te help, so gebruik dit! Wanneer dit gebruik word, kan dit die ontwikkelingsproses vinniger en makliker maak.

Met al hierdie punte gedek, dink ek dit is veilig om dit te sê Shopify Vloeistof kan 'n prettige en effektiewe manier wees om op te dateer of 'n meer innemende en dinamiese te skep Shopify winkel. 

Dis al van my af; oor na jou. Laat weet my van jou ervarings met Shopify Vloeistof in die kommentaar hieronder!