Składnia języka liquid

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 %}

Operatory

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.

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

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>

<script>
$(’#loginAction’).on(’click’, function(){
var data = $(’#loginForm’).serializeArray();
data.push({name: „__action”, value: „Customer/Login”});
$.post(location.href, data).then(function(response){
if(response.action.Result) {
console.log(’udało się zalogować’)
} else {
console.log(’nie udało się zalogować’);
}
});
});
</script>
Oprócz pól wymaganych przez akcję, każde zapytanie na serwer może zawierać parametry:

W odpowiedzi otrzymamy obiekt o parametrach:

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