Składnia języka liquid

Spis treści

Składnia języka Liquid

Rodzaje znaczników

Składnia silnika Liquid zawiera dwa typy znaczników. Znacznik wypisujący dane oraz znacznik sterujący.

Znacznik wypisujący dane stosowany jest do wypisywania wartości zmiennych lub wyrażeń, również z zastosowaniem filtrów.
{{customer.Email}} {{customer.Email | Upcase}}
Filtry mogą przyjmować parametry, które podawane są wewnątrz znaczników wypisujących.
{{3 | Plus: 3}} {{3 | Plus: 3 | Minus: 2}}
Drugi typ znacznika jest stosowany dla operacji sterujących, m.in. instrukcji warunkowych, pętli itp.
{% if customer.Authenticated -%} Gratuluję! Masz tutaj dostęp {% endif -%} {% unless customer.Company %} Nie jesteś firmą {% endunless %}

Uwaga

UWAGA W powyższym przypadku można zauważyć zamknięcie znacznika na dwa różne sposoby: z myślnikiem lub bez. Zalecane jest zamknięcie znacznika z użyciem myślnika, ponieważ instrukcja nie doda wtedy znaku nowej linii do kodu HTML. Jest to szczególnie ważne przy pętlach zawierających dużą ilość iteracji.

Operatory


=	przypisanie
==	równy
>	większy
>=	większy lub równy
<	mniejszy
<=	mniejszy lub równy
and	koniunkcja
or	alternatywa
!=	różny
<>	różny
contains	zawiera ciąg

Wskazówka

Liquid nie posiada operatora negacji. Zamiast tego można skorzystać z instrukcji unless lub wyrażenia == false

Wskazówka

Liquid nie posiada operatorów arytmetycznych. Zamiast tego oferuje filtry: Plus, Minus, Times, DividedBy oraz Modulo.

Elementy silnika Liquid

Instrukcje sterujące

Instrukcje sterujące dodają do kodu HTML oraz CSS logikę charakterystyczną dla języków programowania. Wzbogacają statyczny kod strony o zmienne, instrukcje warunkowe, pętle oraz wstawki zewnętrznego fragmentu kodu.

Obiekty

Obiekty zawierają wszystkie dane sklepu internetowego. Można w nich znaleźć informacje dotyczące produktów, kategorii, konfiguracji sklepu oraz szablonu, a także dane klienta sklepu.

Wskazówka

Więcej na temat obiektów przeczytasz w artykule Dostępne obiekty.

Filtry

Filtry służą do formatowania danych oraz operacji arytmetycznych. Są używane w połączeniu z obiektami, aby zmienić sposób wyświetlania otrzymanych danych.
{{config.Now}} {{config.Now | Date: "yyyy-MM-dd"}} {{config.Now | Date: "HH:mm"}}
2016-12-20 13:15:30 2016-12-20 13:15

Wskazówka

Więcej na temat filtrów można przeczytać w artykule Dostępne filtry

Akcje

Interfejs komunikuje się ze sklepem za pomocą akcji. Akcje aktualizują informacje w bazie danych oraz dane sesyjne. Można je zaimplementować za pomocą formularzy lub z użyciem zapytań AJAX.

Proste logowanie utworzone za pomocą formularza
<form id="loginForm" method="POST"> <input name="email" required="" type="email" placeholder="Podaj email" /> <input name="password" required="" type="password" placeholder="Podaj hasło" /> <input name="__csrf" type="hidden" value="{{ page.CSRF }}" /> <input name="__action" type="hidden" value="Customer/Login" /> <button type="submit">Zaloguj</button> </form>
Proste logowanie napisane z użyciem zapytania AJAX
<form id="loginForm" method="POST"> <input name="email" type="email" placeholder="Podaj email" required/> <input name="password" type="password" placeholder="Podaj hasło" required/> <input name="__csrf" type="hidden" value="{{ page.CSRF }}"/> <button id="loginAction" type="submit">Zaloguj</button> </form>

Oprócz pól wymaganych przez akcję, każde zapytanie na serwer może zawierać parametry:

__collection – nazwa obiektu, który ma zostać zwrócony z serwera
__template – ścieżka pliku html, którego kod chcemy pobrać
__include – wartość zmiennej, jeżeli chcemy wstrzyknąć zmienną w pobrany kod html. Dozwolony jedynie typ prosty

Żaden z parametrów nie jest obowiązkowy, o ile nie wymaga go wykonywana akcja. Nic nie stoi na przeszkodzie, żeby pobrać sam obiekt, lub zwrócić tylko kod html.

W odpowiedzi otrzymamy obiekt o parametrach:

action – informacje o rezultacie akcji lub null, jeżeli żadna akcja nie była wykonywana
collection – zwracany obiekt lub null, jeżeli żaden obiekt nie został zwrócony
template – kod html lub null, jeżeli żaden plik nie był pobierany

Parametr action może zawierać m.in. informacje o powodzeniu akcji, ewentualnym przekierowaniu oraz o rezultacie walidacji po stronie serwera.

Dla przykładu, można następująco zmodyfikować skrypt odpowiedzialny za obsługę logowania:
<script> $('#loginAction').on('click', function(){ var data = $('#loginForm').serializeArray(); data.push({name: "__action", value: "Customer/Login"}); $.post(location.href, data).then(function(response){ var actionResponse = response.action; console.log('Nazwa wykonanej akcji', actionResponse.Action); console.log('Czy wykonało się poprawnie?', actionResponse.Result); console.log('Rezultat walidacji serwerowej', JSON.stringify(actionResponse.Validation)); }); }); </script>
Rezultat operacji w przypadku niepoprawnych danych wyglądać będzie następująco:
Nazwa wykonanej akcji Customer/Login Czy wykonało się poprawnie? false Rezultat walidacji serwerowej [{ "Field":"email", "Error":"E-mail: Format jest nieprawidłowy" }]
Natomiast zapytanie z poprawnymi danymi zrwóci:
Nazwa wykonanej akcji Customer/Login Czy wykonało się poprawnie? true Rezultat walidacji serwerowej null
Za pomocą jednego zapytania można pobrać wiele obiektów, oddzielając je znakami |. Nie zaleca się stosowania spacji między znakami, ponieważ znajdą się one w nazwie obiektów, co może generować niespodziewane błędy.
$.get(location.href, {__collection:'page.Language|customer.Currency'}).then(function(response){ var objs = response.collection; console.log('Język', objs['page.Language']); console.log('Waluta', objs['customer.Currency']); });
Język pl Waluta PLN

Wskazówka

Więcej o akcjach możesz przeczytać w artykule Dostępne akcje.

Czy ten artykuł był pomocny?

( 1 )

( 0 )

Wyślij opinie

Inne w kategorii

Spełnij kryteria WCAG 2.1/2.2. Przewodnik dla programistów oraz Partnerów Comarch.
1
1506
Wyszukiwarka zaawansowana w szablonie Topaz
-1
2098
Ustawienia paska nawigacji w szablonie Szafir
1
2273
Aktualizacja filtrów i wyszukiwarki w szablonach
-1
2668
Dodanie nowego widoku filtrów
-26
1636
Zmiana nagłówka sekcji polecanych towarów na przykładzie szablonu Topaz
0
2880

Społeczność Comarch

Dzięki społeczności Comarch ERP rozwiązujemy problemy, dzielimy się pomysłami oraz informujemy o nowościach.

Dołącz do Społeczności Comarch

Składnia języka liquid