Składnia języka liquid

Spis treści

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

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

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>

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

<button id="loginAction" type="submit">Zaloguj</button>

</form>

$('#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:

__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>

$('#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"
}]

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

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']);
});

$.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

Język pl

Waluta PLN

Wskazówka

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

Składnia języka liquid