A Liquid a Shopify sablonnyelve, amely meghatározza, hogyan jelennek meg a boltadatok a theme-ekben.
A Liquid a Shopify nyílt forráskódú sablonnyelve, amely a theme-ekben felelős a storefront adatainak (termékek, árak, kollekciók, kosár) megjelenítéséért és az ehhez kapcsolódó sablonlogikáért — feltételek, ciklusok, szűrők. A Liquid HTML-be ágyazott, viszonylag egyszerű szintaxist használ ({{ }} a kimenetekhez, {% %} a vezérléshez), amit eredetileg maga a Shopify fejlesztett, és ma már más platformok is átvettek.
Miért ez az első lépés egy magyar Shopify-fejlesztői pályán
Mivel minden Shopify-theme — legyen az ingyenes vagy prémium — Liquid-alapú, ez az a nyelv, amellyel egy fejlesztő a leggyorsabban tud érdemi, látható eredményt elérni: egy szekció testreszabása, egy termékoldal elrendezésének módosítása vagy egy egyedi funkció beillesztése mind Liquid-tudást igényel. Egy tipikus magyar fejlesztői roadmap éppen ezért a Liquiddel indul, mielőtt a fejlesztő a JavaScript, majd esetleg a Hydrogen és a headless fejlesztés felé haladna.
A gyakorlatban a Liquid ismerete lehetővé teszi, hogy egy webáruház-tulajdonos vagy a megbízott fejlesztője ne legyen kiszolgáltatva a kész theme-ek korlátainak: egy egyedi szűrő, egy speciális badge vagy egy testreszabott checkout-elem gyakran pár soros Liquid-módosítással megoldható, appok telepítése nélkül is.
A téma felépítése: hol lakik a Liquid
A Liquid-kód nem egy fájlban él, hanem a téma szerkezetében oszlik szét, és a rétegek neve visszatér minden Shopify-projektben.
A layout a téma kerete, a layout/theme.liquid fájl. Ide kerül az, ami minden oldalon ismétlődik: a <head>, a fejléc, a lábléc. Ez az egyetlen kötelező fájl a témában.
A template (sablon) azt határozza meg, mi jelenjen meg egy adott oldaltípuson — terméklapon, kollekción, kosárban. Kétféle létezik: a JSON-sablon gyakorlatilag csak burok a szekciók köré, a Liquid-sablon viszont tényleges kódot tartalmaz.
A section (szekció) újrafelhasználható tartalommodul, amit a kereskedő a téma-szerkesztőben maga is szerkeszthet. A block (blokk) a szekción belüli elem, amit hozzáadhat, eltávolíthat és átrendezhet — ez a kettő adja a mai Shopify-témák szerkeszthetőségét.
A snippet ezzel szemben újrafelhasználható kóddarab, ami a téma bármely pontján renderelhető, de a téma-szerkesztőben nem látszik. Ami snippetbe kerül, azt a kereskedő nem tudja átkattintgatni.
Filter: a | jel után
A filter a kimenetet átalakító művelet, ami a | jel után áll. Több is láncolható egymás után, és balról jobbra hajtódnak végre — ezért nem mindegy a sorrendjük.
A gyakorlatban a filterek adják a Liquid mindennapi haszna nagy részét: dátumformázás, pénznem-megjelenítés, szövegcsonkítás, képméret-választás. Aki a három építőelemet — az outputot ({{ }}), a taget ({% %}) és a filtert — érti, az a témák többségében el tud igazodni.
Kapcsolódó cikkek: