Co je to Shopify Kapalina? Stručný přehled základů

Přes 4.4 milionu webové stránky elektronického obchodu jsou vytvořeny pomocí Shopify plošina. Je to all-in-one platforma elektronického obchodu, která otřásla webem od svého začátku v roce 2006. Obchodníci si tuto platformu vybírají k hostování svých online obchodů z mnoha důvodů, od snadného nastavení plateb až po vestavěné marketingové nástroje a mnoho dalších.

Ale jeden z kritických aspektů Shopify je jeho intuitivní tvůrce stránek s tisíci tématy a Shopify integrace aplikací, ze kterých si můžete vybrat.

Nicméně, zatímco tvůrce bez kódu umožňuje vytvářet úžasné a jedinečné webové stránky, existují určitá omezení. Když například začnete budovat svůj internetový obchod, musíte si vybrat téma, které definuje uspořádání a úroveň kontroly, kterou získáte nad svým obsahem. I když vyberete prázdné téma, tj. téma bez obsahu, stále existuje základní architektura kódu, která předdefinuje, jak je obsah organizován.

Ale je tu dobrá zpráva. Pokud si chcete vytvořit vlastní Shopify šablona pro váš web nebo web někoho jiného Shopify Kapalný.

Zájem? Připojte se ke mně, když se snažím odpovědět na otázku: Co je Shopify Kapalina? Pojďme se ponořit!

Co je to Shopify Kapalina?

Zajímavě, Shopify Od té doby existuje kapalina Shopifypočátek. Když ShopifyTvůrci nejprve navrhli platformu, vytvořili open-source projekt, který má sloužit jako jazyk šablon pro všechny Shopify webových stránkách šablony.

Pro nezasvěcené „open-source programovací jazyk“ označuje zdrojový kód softwaru, který je volně dostupný veřejnosti a umožňuje komukoli kód používat, upravovat a distribuovat za jakýmkoli účelem.

Vytvořeno pomocí Ruby, Shopify Kapalina v podstatě slouží jako zástupný symbol, abyste mohli vkládat data do předem definovaného formátu (více o tom níže).

Jak to tedy funguje?

Abyste tomu porozuměli, musíte nejprve vědět, že webové stránky jsou obvykle statické nebo dynamické. Statická úložiště jsou pevně zakódována, aby zobrazovala obsah přesně tak, jak je napsán, například v HTML. Naproti tomu dynamický web může zobrazovat různý obsah v závislosti na tom, jak s ním uživatel komunikuje.

Nyní řekněme, že máte statický web; základní kostra webu je přednastavena, ale chcete vykreslovat dynamický obsah. Tady se píše Shopify Liquid do HTML kódu je praktický. To se hodí jako zástupný symbol pro dynamický obsah.

Shopify Liquid funguje jako prostředník mezi vaším obchodem a Shopify's server, což umožňuje Liquidu stahovat data Shopifyserveru a doručte jej do vašeho obchodu. Liquid může požadovat tři hlavní typy dat:

Objekty
Tagy
Filtry

Níže postupně prozkoumáme každý typ dat:

Tekuté předměty

Objekty jsou podobné knihovně funkcí nebo obsahu; v každém objektu jsou různé vlastnosti.

Pokud nejste obeznámeni s konceptem objektů, zde je stručný přehled:

Objekt je základním pojmem v programování. Objekt se skládá ze dvou částí:

Vlastnosti, které definují stav objektu
Funkce, které definují chování objektu

Abychom lépe ilustrovali, jak to funguje, použijeme příklad, který se netýká kódování. Například auto. Zde by auto, tj. předmět, mohlo mít funkce jako „zrychlit“, „zatočit“ a „brzdit“. Naproti tomu vlastnostmi mohou být „okna“, „dveře“ vozu atd.

Jednoduše řečeno, předměty jsou důležité koncept v kódování protože pomáhají organizovat složité systémy do lépe spravovatelných částí.

Řekněme například, že vytváříte vlastní Shopify téma a chcete zobrazit a Název blogu ve vaší šabloně. K přenesení těchto informací můžete použít Liquid Shopify's server a zobrazit jej někde na stránce. V tomto příkladu je to část kódu Liquid, kterou byste použili k dosažení tohoto cíle:

{{Blog.title}}

Pojďme to rozebrat:

Tady, 'blog' je objekt.
Vlastnost, kterou v rámci toho chceme knihovna je označeno 'titul. "
Jedno "." říká Liquidu, jak spolu tyto dva bity dat souvisí.
Dvojité závorky jsou tekutá syntaxe, která definuje {{obsah/výstup, který chcete}} ze Shopify serveru.

Tekuté štítky

Při použití Shopify Kapalina, značky dodávají logiku obsahu, který požadujeme od Shopify server, který vám pomůže definovat, kdy má být obsah na stránce viditelný. Řekněme například, že chceme na našich slavnostních příspěvcích na blogu zobrazit konkrétní grafiku. Chceme, aby se tato grafika zobrazila pouze tehdy, když je splněna určitá podmínka.

Může to vypadat následovně:

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

**obrázek HTML**

{% end if %}

Může se to zdát složité, ale když to rozebereme, je to docela jednoduché na pochopení:

Tagy používají trochu jinou syntaxi než objekty, které vypadají takto {%…%}.
První značka {% if blog.title == 'oslava' %} říká Liquidu, jaká podmínka musí být splněna před vyžádáním obsahu ze serveru.
Podmínka, na kterou jsme se zeptali, je definována pomocí an prohlášení „pokud“.. Pokud jste obeznámeni s kódováním, budete vědět, že příkazy „if“ fungují tak, že vzájemně porovnávají dvě nebo více dat. Pokud se shodují, přesune se na další řádek v našem kódu. Tady, if blog.title == 'oslava,' žádáme Liquid, aby zkontroloval, zda název našeho blogu obsahuje slovo 'oslava'. Pokud ano, přejde na další řádek našeho kódu. Pokud ne, Liquid nevrátí žádný obsah.
V tomto příkladu, pokud máme název blogu, který obsahuje slovo 'oslava', Liquid vytáhne a zobrazí náš HTML obrázek.
Jakmile to udělá, přejde na následující řádek {% end if %}, který ukončí náš program.

Toto je jen jeden příklad toho, co můžete dělat se značkami. Shopify Liquid má štítky:

ovládání když je kód spuštěn
Opakovat/opakování (opakujte) blok kódu
Display určité značky HTML
Vytvořte nové proměnné.

Kapalinové filtry

Filtry jsou části kódu, které mění nebo upravují výstup objektu. Mohou například změnit barvu, písmo, velikost nebo vzhled prvků webu.

Ale kromě změny viditelných aspektů objektu mohou na objektu vykonávat funkce. Chcete-li například zobrazovat názvy blogů upcase, filtr vám může pomoci dosáhnout toho, aniž byste museli ručně měnit všechny názvy blogů:

{{ blog.title | uppercase }}

Syntaxe pro filtry je {{…}}.
Zde vlastnost objektu, kterou hledáme, je 'Název blogu'.
Filtr, který používáme, je velká písmena.
Jedno '|' odděluje vstup a výstup našeho kódu.

Nyní, když se uživatel podívá na název našeho blogu, zobrazí se velkými písmeny.

Výhody Shopify Kapalina

Předpokládejme, že jste návrhář webu nebo vývojář. V tom případě jedna z nejvýznamnějších výhod Shopify Liquid je, že k vytvoření nebo úpravě webu nepotřebujete data obchodu (tj. informace o obchodě). Je to proto, že když uživatel poprvé provede a Shopify úložiště jsou všechny informace uloženy na Shopify server, což znamená, že můžete použít Liquid k jednoduchému načtení dat, která potřebujete.

Pokud však nejste webový vývojář, ale pouze majitel obchodu, který chce svůj obchod vylepšit, má to i pro vás výhody:

Snadno se učí a používá: Liquid má jednoduchou syntaxi a je snadno srozumitelný, takže je dostupný pro vývojáře i nevývojáře.
Dynamický obsah: Liquid umožňuje dynamické vytváření obsahu
Přizpůsobitelné: S Liquid můžete vytvářet vlastní šablony a motivy, které vám poskytují úplnou kontrolu nad vzhledem a chováním vašeho eCommerce obchodu.
Zlepšený výkon: Kapalné šablony jsou kompilovány a ukládány do mezipaměti, což se zlepšuje výkon a rychlost webu ve srovnání s jinými šablonovacími motory.
Velká komunita: Shopify má velkou uživatelskou komunitu, která poskytuje přístup k množství znalostí a podpory, což usnadňuje hledání řešení běžných problémů souvisejících s kapalinami.

požadavky

Co tedy potřebujete, abyste mohli začít používat Shopify Kapalina?

Reklama ⓘ

Pokud již máte Shopify uložit, Shopify Kapalina vám bude k dispozici zdarma. Jak můžete najít Liquid, probereme níže. Ale vše, co potřebujete vědět, je, že každý web vytvořený na Shopify je vytvořen pomocí Liquid, takže můžete začít ručně upravovat tento kód, jakmile vytvoříte web.

Pokud však nemáte a Shopify obchod, budete si muset jeden vytvořit, abyste si mohli začít hrát s Liquid.

Nejprve přejděte k Shopify a vyberte plán. Vyplňte své údaje a vytvořte si účet.
Z vašeho Shopify admin, klikněte na témata. Shopify automaticky poskytuje výchozí motiv. Můžete to nechat tak, jak je, nebo si pro začátek vybrat jiné téma.
Shopify má kontrolní seznam, pomocí kterého můžete svůj obchod dokončit. Budete chtít udělat všechny základy, jako je přidání produktových stránek, návrh vaší výlohy atd.

Nyní, když máte základní kostru svého internetového obchodu, můžete tato data vytáhnout z Shopify server a přizpůsobte jej pomocí Liquid (více o tom níže).

I když nepotřebujete žádné zkušenosti s kódováním, abyste mohli začít používat Liquid, znalost základních principů kódování vám cestu usnadní. Ale z větší části můžete na webu najít rozsáhlou dokumentaci a návody pro svépomoci Shopify portál pro vývojáře. Zde najdete celou sekci věnovanou Základy kapalin.

Než začnete, doporučujeme, abyste strávili nějaký čas procházením těchto průvodců. I když je Liquid výkonný nástroj pro přizpůsobení, má také potenciál rozbít váš web, pokud nevíte, co děláte!

Začínáme s Shopify Kapalina

S využitím toho, co jsme se dosud naučili, se tedy podíváme, jak můžeme přistoupit k úpravám našeho Shopify téma pomocí Liquid.

Chcete-li získat přístup k aplikaci Liquid, postupujte takto:

Duplikujte svůj motiv: Abyste předešli větším nehodám, je rozumné si před zahájením vytvořit kopii motivu. Tímto způsobem, pokud uděláte nějaké chyby, váš originál Shopify téma zůstává nedotčeno. Chcete-li to provést, přejděte do sekce motivů na pravé straně vašeho Shopify přístrojová deska. Vyberte motiv, který chcete upravit, a kliknutím na akce zobrazte rozbalovací nabídku. Nyní vyberte duplikát.
Přejmenujte svůj duplikát: Když duplikujete motiv, zobrazí se ve vašem seznamu motivů. Kopii můžete přejmenovat, abyste si nezaměnili originál a duplikát. Stačí znovu kliknout na tlačítko akcí a kliknout na přejmenovat v rozevírací nabídce.
Vstup do editoru kódu: Nyní znovu vyberte akce na duplikátu a vyberte upravit kód. Budete přesměrováni na úplný seznam kódů v rámci vašeho tématu. Podívejte se na složky uvedené vpravo. Měli byste vidět spoustu složek obsahujících různé aspekty vašeho motivu, jako je rozvržení, šablony, sekce atd. Otevřete složku šablon.
Kódování v kapalině: Uvnitř složky šablony uvidíte seznam souborů s typem souboru .liquid. Můžete také vytvořit novou šablonu Liquid file výběrem tlačítka plus ve složce šablon. Zeptá se vás, jakou šablonu chcete vytvořit, tj. stránku, sekci, blog atd., a na název souboru. Chcete-li soubor upravit, poklepejte na soubor šablony a otevře se v editoru kódu vpravo.

Uvnitř každého souboru Liquid uvidíte HTML skript. Toto je kostra vašeho webu. Jazyk Liquid uvnitř tohoto HTML můžete použít k načtení informací z Shopify server. Pokud používáte správnou syntaxi Liquid, tj. závorky, mělo by to odpovídajícím způsobem vykreslit váš obsah.

Pro ilustraci si uveďme jednoduchý příklad:

Změna velikosti obrázků pomocí Shopify Kapalina

Obrázky jsou základním aspektem většiny Shopify obchody. Pokud ale používáte více obrázků, může být noční můrou je všechny správně nastavit tak, aby vypadaly úhledně. Abychom to napravili, díváme se na img_url filtr. Stejně jako ostatní filtry je img_url navržen tak, aby upravoval obsah, který přebírá z Shopify server. Tento filtr můžete použít ke změně velikosti, měřítka, formátu a oříznutí obrázků.

Toto je vynikající technika, protože filtr pouze dočasně upraví existující obrázek; nevytváří při každém vykreslení šablony nový obrázek, takže nezpomalí načítání vašeho webu.

Jak tedy změníme velikost obrázku?

Nejprve se musíme rozhodnout, kde chceme změny aplikovat. Můžete použít filtr img_url na jakýkoli objekt s vlastností image, včetně:

Produkty
Varianty produktů
Řádkové položky
Kolekce
Články

Jakmile se rozhodnete, které obrázky chcete upravit, musíte vědět, na jakou vlastnost chcete cílit. Chcete-li zjistit, jaké vlastnosti mají atribut obrázku, podívejte se na Shopify's seznam objektů a jejich vlastnosti.

V tomto příkladu budeme cílit na obrázky článků na našem blogu.

Zde je základní kód:

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

Zhroutit se:

Blog je objekt, který hledáme, a chceme vlastnost zboží, protože to obsahuje všechny články na našem blogu. Konkrétně chceme změnit obrázky v článcích na našem blogu, takže se zaměřujeme na obraz majetek v článcích.
Nyní použijeme filtr img_url. Pokud bychom to nechali tak, jak je, jednoduše by se zobrazil obrázek vytažený z adresy URL poskytnuté serverem Shopify server. Dáme však také další parametr: velikost obrázku '100×100' (Všimněte si, že Shopify používá pixely k určení rozsahů velikostí).
Nakonec náš kód zabalíme pomocí syntaxe Liquid double-bracket, která se používá pro filtry.

A máme hotovo! To by mělo vrátit výstup pro všechny obrázky našeho blogu, takže budou mít velikost 100 x 100 pixelů.

Tipy a tipy

Doufám, že po přečtení tohoto článku máte nyní odpověď na otázku: Co je Shopify Kapalina?

Jak můžete vidět, Shopify Kapalina je všestranný nástroj, který může sloužit různým funkcím při navrhování nebo úpravách a Shopify šablona. I když je to trochu křivka učení, jakmile si na to zvyknete, je to poměrně snadné použití – zvláště ve srovnání s jinými složitějšími kódovacími jazyky, jako je Javascript.

Pokud máte zájem použít Shopify Liquid, doporučujeme vám, abyste se řídili těmito pokyny, abyste z toho vytěžili maximum:

Začněte se solidním porozuměním Liquid: Silné porozumění Liquidu vám umožní vytvářet složitější vlastní témata. S tímto základem mohou noví uživatelé využít plný potenciál Shopify vytvářet jedinečné a poutavé internetové obchody.
Důkladně otestujte své téma: Testování je nezbytné k zajištění toho, aby váš vlastní motiv fungoval podle očekávání v různých prohlížečích a zařízeních. Včasným zachycením problémů s kompatibilitou se vyhnete potenciální frustraci svých zákazníků.
Použijte dostupné nástroje a zdroje: Shopify má k dispozici velké množství zdrojů, které pomáhají vývojářům motivů, tak je využijte! Při využití to může urychlit a zjednodušit proces vývoje.

Se všemi těmito body si myslím, že to lze s jistotou říci Shopify Liquid může být zábavný a efektivní způsob, jak aktualizovat nebo vytvořit poutavější a dynamičtější Shopify obchod.

To je ode mě vše; k tobě. Dejte mi vědět o svých zkušenostech s Shopify Tekuté v komentářích níže!