Liquid je šablonovací jazyk, který se nejčastěji používá v Shopify. Pokud jste otevřeli někdy kód motivu v Shopify a viděli v něm značky, které nepřipomínají HTML ani CSS, nejspíš to byl právě Liquid.
Tento článek je pro vás, pokud se chcete začít šťourat v kódu motivů na Shopify. Vysvětluji zde ale jen minimální základy. Na konci najdete odkazy, kde se můžete vzdělávat dále.
Jak jsem již zmínil, nejvíce tento jazyk využijete při editaci motivů na Shopify (do kódu se v administraci dostanete kliknutím na možnost “Upravit kód” u daného motivu). Zde se dá použít v těch souborech, které mají příponu “.liquid”. A může to být třeba i css soubor (bude mít příponu “.css.liquid”).
Kromě toho se dá s Liquidem pracovat také v šablonách emailových notifikací (v administraci najdete pod Nastavení -> Notifikace).
Pojďme se tedy podívat na základy Liquidu.
Proměnné
Proměnnou vytvoříme a přiřadíme ji hodnotu pomocí značky “assign”. Jednoduché:
{% assign new_price = 20 %}
Můžeme ji samozřejmě přiřadit i hodnotu z jiné proměnné, například produktovou cenu:
{% assign new_price = product.price %}
Chcete proměnnou vypsat do šablony? Stačí její název obalit do těchto dvojitých závorek:
{{ new_price }}
Filtry
Filtry se nám hodí znát, chceme-li s proměnnými dělat například výpočty. Třeba takto vznikne proměnná c, která je součtem a + b:
{% assign a = 2 %}
{% assign b = 4 %}
{% assign c = a | plus: b %}
A nebo filtry můžeme využít k úpravě textové proměnné, třeba filtr “upcase” nám všechna písmena přepíše na velká.
{% assign description = "A new product." %}
{% assign new_description = description | upcase %}
Výsledkem v proměnné new_description tak bude hodnota “A NEW PRODUCT”.
Můžeme také použít více filtrů na jednom řádku, vždy oddělené znakem |.
{% assign a = 2 %}
{% assign b = 4 %}
{% assign c = 1 %}
{% assign d = a | plus: b | minus: c %}
Filtrů existuje mnoho a zdaleka se netýkají jen čísel a textů, všechny najdete v dokumentaci.
Podmínky
Podmínky tady fungují stejně jako v ostatních programovacích jazycích, zápis je jednoduchý - zde je příklad:
{% if price >= 10 %}
do something if price is equal or higher than 10...
{% elsif price > 2 %}
do something else if price is higher than 2...
{% else %}
do something else...
{% endif %}
Všimněte si, že je zde ukončovací řádek “endif”, bez něho nebude kód fungovat.
Můžete se setkat taky s “unless”, což je obrácená podmínka “if”.
{% unless price < 10 %}
do something if price is NOT lower than 10...
{% endunless %}
Cykly
Pomocí cyklů můžeme procházet pole, například takto iterujeme nad polem médií produktu:
{% for item in product.media %}
do something with item...
{% endfor %}
V tomto příkladu máme v každém průchodu možnost číst aktuální médium, je totiž vždy uloženo v proměnné “item”. Tuto proměnnou si ale můžete pojmenovat jakkoliv.
Tip na závěr
Máte-li několik po sobě jdoucích řádků kódu, můžete jej zapsat také tímto způsobem:
{% liquid
assign new_price = 20
assign something_else = 123
%}
Toto bylo jen pár základních značek, další značky najdete v oficiální dokumentaci od Shopify.
Kde se učít dál?
V článku jsem se vám pokusil předat jen základní informace. Pokud to ale s Liquidem myslíte vážně, budou se vám hodit tyto stránky:
