Mi Shopify Folyékony? Az alapok gyors összefoglalója

Több, mint 4.4 millió Az e-kereskedelmi webhelyek a Shopify felület. Ez az all-in-one e-kereskedelmi platform, amely 2006-os indulása óta megrázta az internetet. A kereskedők számos okból választják ezt a platformot online üzleteik elhelyezésére, az egyszerű fizetési beállítástól a beépített marketingeszközökig és még sok más miatt. 

De az egyik kritikus szempont Shopify intuitív webhelykészítője több ezer témával és Shopify alkalmazásintegrációk közül választhat. 

Míg azonban a kód nélküli építő lehetővé teszi lenyűgöző és egyedi webhelyek létrehozását, vannak bizonyos korlátozások. Például, amikor elkezdi építeni online áruházát, ki kell választania egy témát, amely meghatározza a tartalmak elrendezését és ellenőrzési szintjét. Még ha üres, azaz tartalom nélküli témát választ is, akkor is létezik egy mögöttes kódarchitektúra, amely előre meghatározza a tartalom rendszerezését.

De van egy jó hír. Ha szeretné létrehozni a sajátját Shopify sablon az Ön webhelyéhez vagy valaki máséhoz Shopify Folyékony.

Érdekelt? Csatlakozz hozzám, és igyekszem megválaszolni a kérdést: Mi az Shopify Folyékony? Merüljünk el!

Mi Shopify Folyékony?

Érdekes módon, Shopify Liquid azóta van Shopifykezdete. Amikor ShopifyAz alkotók először megtervezték a platformot, és létrehoztak egy nyílt forráskódú projektet, amely mindenki számára sablonnyelvként szolgálhat. Shopify sablonok. 

Az avatatlanok számára a „nyílt forráskódú programozási nyelv” egy szoftver forráskódjára utal, amely szabadon hozzáférhető a nyilvánosság számára, lehetővé téve, hogy bárki bármilyen célra felhasználja, módosítsa és terjeszthesse a kódot. 

Ruby használatával készült, Shopify Folyadék lényegében helyőrzőként szolgál, így előre meghatározott formátumba illesztheti be az adatokat (erről lentebb olvashat bővebben).

Szóval, hogyan működik ez?

Ennek megértéséhez először is tudnia kell, hogy a webhelyek jellemzően statikusak vagy dinamikusak. A statikus tárolók úgy vannak kódolva, hogy pontosan úgy jelenítsék meg a tartalmat, ahogyan az meg van írva, például HTML-ben. Ezzel szemben egy dinamikus webhely eltérő tartalmat jeleníthet meg attól függően, hogy a felhasználó hogyan lép kapcsolatba vele. 

Most tegyük fel, hogy van egy statikus webhelye; a webhely alapváza előre be van állítva, de dinamikus tartalmat szeretne megjeleníteni. Itt van az írás Shopify A folyadék a HTML-kódba praktikus. Ez alkalmas a dinamikus tartalom helyőrzőjeként. 

Shopify A Liquid közvetítőként működik üzlete és Shopifyszerverén, lehetővé téve a Liquid számára az adatok lekérését Shopifyszerverére, és szállítsa el az üzletébe. A Liquid három fő adattípust kérhet:

1. tárgyak
2. Címkék
3. Szűrők

Az alábbiakban sorra megvizsgáljuk az egyes adattípusokat:

Folyékony tárgyak

Az objektumok hasonlítanak a függvények vagy tartalom könyvtárához; minden objektumon belül különféle tulajdonságok vannak. 

Ha nem ismeri az objektumok fogalmát, íme egy rövid áttekintés:

Az objektum a programozás alapvető fogalma. Egy objektum két összetevőből áll: 

1. Tulajdonságok, amelyek meghatározzák az objektum állapotát
2. Az objektum viselkedését meghatározó függvények

Ennek működésének jobb bemutatása érdekében egy nem kódolással kapcsolatos példát használunk. Például egy autó. Itt az autónak, azaz a tárgynak olyan funkciói lehetnek, mint a „gyorsítás”, „fordulás” és „fékezés”. Ezzel szemben a tulajdonságok lehetnek az autó „ablakjai”, „ajtói” stb. 

Egyszerűen fogalmazva, a tárgyak fontosak koncepció a kódolásban mert segítik az összetett rendszereket jobban kezelhető darabokba szervezni.

Tegyük fel például, hogy egyénit hoz létre Shopify téma és szeretné megjeleníteni a Blog cím a sablonodban. A Liquid segítségével előhívhatja ezeket az információkat Shopifyszerverére, és jelenítse meg valahol az oldalon. Ebben a példában ez a Liquid kód darabja, amelyet ennek eléréséhez használna:

{{Blog.title}} 

Bontjuk ezt le:

• Itt, 'blog' a tárgy. 
• Ezen belül az általunk keresett ingatlan könyvtár a 'cím. " 
• A '' megmondja a Liquidnek, hogy ez a két adatbit hogyan kapcsolódik egymáshoz. 
• A dupla zárójelek folyékony szintaxis, amely meghatározza a kívánt {{tartalmat/kimenetet}} Shopify szervert. 

Folyékony címkék

Használat során Shopify Folyadék, címkék logikát adnak az általunk kért tartalomhoz Shopify szerver, amely segít meghatározni, hogy a tartalom mikor legyen látható az oldalon. Tegyük fel például, hogy egy adott grafikát szeretnénk megjeleníteni ünnepi blogbejegyzéseinken. Vagyis azt szeretnénk, hogy ez a grafika csak akkor jelenjen meg, ha egy adott feltétel teljesül. 

Így nézhet ki:

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

**kép HTML**

{% end if %}

Ez bonyolultnak tűnhet, de ha szétszedjük, nagyon egyszerű megérteni:

• A címkék kissé eltérő szintaxist használnak, mint az ehhez hasonló objektumok  {%…%}.
• Az első címke {% if blog.title == 'celebration' %} közli a Liquid-vel, hogy milyen feltételnek kell teljesülnie, mielőtt tartalmat kérne a szervertől.
• Az általunk kért feltételt an határozza meg 'ha' kijelentés. Ha ismeri a kódolást, tudni fogja, hogy az „if” utasítások két vagy több adat egymással való összehasonlításával működnek. Ha egyeznek, akkor a kódunk következő sorába lép. Itt,  if blog.title == 'ünnep,' megkérjük a Liquidet, hogy ellenőrizze, hogy blogunk címe tartalmazza-e az „ünneplés” szót. Ha igen, akkor a kódunk következő sorába kerül. Ha nem, a Liquid nem ad vissza tartalmat.
• Ebben a példában, ha van egy blogunk címe, amely az „ünneplés” szót tartalmazza, a Liquid előhívja és megjeleníti a kép HTML-kódját.
• Miután ezt megtette, a következő sorra lép {% end if %}, ami leállítja programunkat.

Ez csak egy példa arra, hogy mit tehet a címkékkel. Shopify A Liquid a következő címkékkel rendelkezik:

• Ellenőrzés amikor a kód végrehajtódik
• Hajtogat/ismétlés (ismétlés) egy kódblokkot
• kijelző bizonyos HTML jelölések
• Hozzon létre új változókat.

Folyadékszűrők

A szűrők olyan kóddarabok, amelyek megváltoztatják vagy módosítják egy objektum kimenetét. Például módosíthatják a webhely elemeinek színét, betűtípusát, méretét vagy megjelenését. 

De amellett, hogy megváltoztatják az objektum látható aspektusait, funkciókat is végrehajthatnak egy objektumon. Ha például a blogcímeket felnagyítva szeretné megjeleníteni, egy szűrő segíthet elérni ezt anélkül, hogy manuálisan módosítaná az összes blogcímet:

{{ blog.title | uppercase }}

• A szűrők szintaxisa a következő {{…}}.
• Itt a keresett tárgytulajdonság a következőBlog cím'.
• Az általunk alkalmazott szűrő az nagybetűs.
• A '|' elválasztja a kódunk bemenetét és kimenetét.

Most, amikor egy felhasználó megnézi blogunk címét, az nagybetűvel jelenik meg.

Előnyei Shopify Folyadék

Tegyük fel, hogy Ön webhelytervező vagy fejlesztő. Ebben az esetben az egyik legjelentősebb előnye Shopify Liquid az, hogy nincs szüksége az áruház adataira (azaz az üzlettel kapcsolatos információkra) egy webhely létrehozásához vagy módosításához. Ez azért van így, mert amikor a felhasználó először a Shopify tárolja, minden információ a Shopify szervert, ami azt jelenti, hogy a Liquid segítségével egyszerűen lekérheti a szükséges adatokat. 

Ha azonban Ön nem webfejlesztő, hanem csak üzlettulajdonos, aki fel akarja fejleszteni üzletét, akkor Önnek is vannak előnyei:

• Könnyen megtanulható és használható: A Liquid egyszerű szintaxissal rendelkezik, és könnyen érthető, így fejlesztők és nem fejlesztők számára is elérhető.
• Dinamikus tartalom: A folyadék dinamikus tartalomkészítést tesz lehetővé
• szabható: A Liquid segítségével egyéni sablonokat és témákat hozhat létre, így teljes mértékben irányíthatja e-kereskedelmi üzlete megjelenését és hangulatát.
• Jobb teljesítmény: A folyékony sablonok összeállítása és gyorsítótárazása, fejlesztése a weboldal teljesítménye és sebessége más sablonmotorokhoz képest.
• Nagy közösség: Shopify nagy felhasználói közösséggel rendelkezik, amely hozzáférést biztosít rengeteg tudáshoz és támogatáshoz, megkönnyítve a megoldások megtalálását a gyakori folyadékkal kapcsolatos problémákra.

követelmények

Tehát mi kell a használat megkezdéséhez Shopify Folyékony?

Ha már van a Shopify tárolni, Shopify A folyadék ingyenesen használható lesz. Az alábbiakban megbeszéljük, hogyan találhatja meg a Liquid-t. De egyelőre csak annyit kell tudnod, hogy minden webhely, amelyen készült Shopify A Liquid segítségével épül fel, így azonnal elkezdheti manuálisan szerkeszteni ezt a kódot, amint létrehozta a webhelyet.

Ha azonban nem rendelkezik a Shopify boltban, el kell készítened egyet, hogy elkezdhess játszani a Liquiddel. 

1. Először menjen tovább Shopify és a válasszon tervet. Töltse ki adatait, és hozzon létre fiókot.
2. A te Shopify admin, kattintson a témákra. Shopify automatikusan megad egy alapértelmezett témát. Hagyhatja ezt jelenlegi állapotában, vagy választhat másik témát a kezdéshez.
3. Shopify van egy ellenőrző lista, amelyen végighaladva befejezheti üzletét. Minden alapvet meg kell tennie, mint például a termékoldalak hozzáadása, a kirakat kialakítása stb.

Most, hogy megvan az online áruház alapváza, lekérheti ezeket az adatokat a Shopify szervert, és testreszabhatja a Liquid segítségével (erről lentebb olvashat bővebben). 

Bár nincs szüksége semmilyen kódolási tapasztalatra a Liquid használatának megkezdéséhez, az alapvető kódolási elvek ismerete megkönnyíti az utazást. De a legtöbb esetben kiterjedt önsegítő dokumentációt és oktatóanyagokat találhat a Shopify fejlesztői portál. Itt talál egy teljes részt Folyékony alapok. 

Javasoljuk, hogy szánjon egy kis időt ezen útmutatók áttekintésére, mielőtt elkezdi. Noha a Liquid egy hatékony testreszabási eszköz, képes arra is, hogy feltörje webhelyét, ha nem tudja, mit csinál!

Kezdő lépések Shopify Folyadék

Tehát az eddig tanultak felhasználásával nézzük meg, hogyan szerkeszthetjük a sajátunkat Shopify téma a Liquid használatával. 

A Liquid eléréséhez kövesse az alábbi lépéseket:

1. A téma megkettőzése: A nagyobb szerencsétlenségek elkerülése érdekében célszerű másolatot készíteni a témáról, mielőtt elkezdené. Így, ha hibázik, az eredeti Shopify a téma érintetlen marad. Ehhez nyissa meg a témák szakaszt a jobb oldalon Shopify Irányítópult. Válassza ki a szerkeszteni kívánt témát, és kattintson a műveletekre a legördülő menü megjelenítéséhez. Most válassza ki a másolatot.
2. Nevezze át a másolatot: Ha egy témát másol, az megjelenik a témák listájában. A másolatot átnevezheti, hogy ne keverje össze az eredetit és a másolatot. Csak kattintson újra a műveletek gombra, és kattintson az Átnevezés gombra a legördülő menüben. 
3. Belépés a kódszerkesztőbe: Most ismét válassza ki a műveleteket a másolaton, és válassza a kód szerkesztése lehetőséget. A rendszer átirányítja a témán belüli kódok teljes listájához. Vessen egy pillantást a jobb oldalon felsorolt ​​mappákra. Látnia kell egy csomó mappát, amely a téma különböző aspektusait tartalmazza, például az elrendezést, a sablonokat, a szakaszokat stb. Nyissa meg a sablonok mappát. 
4. Kódolás folyadékban: A sablonok mappában a .liquid fájltípusú fájlok listája látható. Új Liquid fájlsablont is létrehozhat a sablon mappájában található plusz gomb megnyomásával. Meg fogja kérdezni, hogy milyen sablont szeretne létrehozni, pl. oldalt, szakaszt, blogot stb., és hogy nevezze el a fájlt. Fájl szerkesztéséhez kattintson duplán egy sablonfájlra, és az megnyílik a jobb oldali kódszerkesztőben.

Bármely Liquid fájlban megjelenik egy HTML-szkript. Ez az Ön webhelyének váza. Használhatja a Liquid nyelvet ebben a HTML-ben az információk lekéréséhez a Shopify szerver. Mindaddig, amíg a megfelelő Liquid szintaxist, azaz a zárójeleket használja, ennek megfelelően kell megjelenítenie a tartalmat.

A szemléltetéshez fussunk át egy egyszerű példát:

Képek átméretezése segítségével Shopify Folyadék

A képek a legtöbbnél lényeges szempont Shopify üzletek. De ha több képet használ, rémálom lehet mindegyiket helyesen méretezni, hogy szépen jelenjenek meg. Ennek kijavításához megvizsgáljuk a img_url szűrő. A többi szűrőhöz hasonlóan az img_url is úgy van kialakítva, hogy módosítsa a tartalmat, amelyet a Shopify szerver. Ezzel a szűrővel módosíthatja a képek méretét, méretarányát, formátumát és kivágását. 

Ez egy kiváló technika, mert a szűrő csak átmenetileg módosít egy meglévő képet; nem hoz létre minden alkalommal új képet a sablon megjelenítéséhez, így nem lassítja le webhelye betöltési idejét. 

Szóval, hogyan méretezzünk át egy képet?

Először is el kell döntenünk, hogy hol kívánjuk alkalmazni a változtatásokat. Alkalmazhatja a img_url szűrő bármely kép tulajdonsággal rendelkező objektumra, beleértve:

• Termékek
• Termékváltozatok
• Sorok
• Gyűjtemények
• Cikkek

Miután eldöntötte, hogy mely képeket szeretné szerkeszteni, tudnia kell, melyik tulajdonságot szeretné megcélozni. Ha meg szeretné tudni, hogy mely tulajdonságokhoz tartozik képattribútum, nézze meg Shopifyobjektumok listáját és tulajdonságaik. 

Ebben a példában blogcikkeink képeit célozzuk meg.

Íme az alapkód:

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

Bontás:

• Blog az a tárgy, amit keresünk, és szeretnénk az ingatlant cikkek, mivel ez tartalmazza a blogunk összes cikkét. Konkrétan a blogcikkeink képeit szeretnénk megváltoztatni, ezért a kép cikkeken belüli tulajdon.
• Most alkalmazzuk a szűrőt img_url. Ha ezt úgy hagyjuk, ahogy van, akkor egyszerűen egy képet jelenítene meg, amelyet a(z) által megadott URL-ről húztak le Shopify szerver. Adunk azonban egy plusz paramétert is: a képméretet „100×100' (vegye figyelembe, hogy Shopify pixeleket használ a mérettartományok meghatározásához).
• Végül a szűrőkhöz használt Liquid dupla zárójeles szintaxist használva csomagoljuk a kódunkat. 

És kész! Ennek vissza kell adnia az összes blogképünk kimenetét, így 100 x 100 képpont méretűvé válik.

Tippek és elvitelek

Remélem, hogy miután elolvasta ezt a cikket, most már választ kap a kérdésre: Mi az Shopify Folyékony?

Mint láthatjuk, Shopify Folyadék egy sokoldalú eszköz, amely különféle funkciókat szolgálhat tervezéskor vagy szerkesztéskor a Shopify sablon. Bár van egy kis tanulási görbe, amint megszokja, viszonylag könnyen használható – különösen más összetettebb kódolási nyelvekhez, például a Javascripthez képest.

Ha érdekel a használata Shopify Folyékony, azt tanácsoljuk, hogy kövesse az alábbi ajánlásokat, hogy a legtöbbet hozza ki belőle:

1. Kezdje a Liquid alapos megértésével: A Liquid alapos ismerete lehetővé teszi, hogy összetettebb egyedi témákat építsen fel. Ezzel az alappal az új felhasználók kiaknázhatják a benne rejlő lehetőségeket Shopify egyedi és vonzó online áruházak létrehozásához.
2. Teszteld alaposan a témádat: A tesztelés elengedhetetlen annak biztosításához, hogy az egyéni téma a várt módon működjön a különböző böngészőkön és eszközökön. A kompatibilitási problémák korai felismerésével elkerülheti az ügyfelek esetleges frusztrációját.
3. Használja a rendelkezésre álló eszközöket és forrásokat: Shopify rengeteg erőforrás áll rendelkezésére, hogy segítse a témafejlesztőket, ezért használja őket! Kihasználva gyorsabbá és könnyebbé teheti a fejlesztési folyamatot.

Mindezen szempontok figyelembevételével azt hiszem, nyugodtan kijelenthetjük Shopify A Liquid szórakoztató és hatékony módja lehet a frissítésnek, vagy vonzóbb és dinamikusabb megjelenés létrehozásának Shopify tárolni. 

Ez mind tőlem; Rajtad a sor. Mesélj a tapasztalataidról Shopify Folyadék az alábbi megjegyzésekben!