Liquid to nowy silnik szablonów graficznych, dostępny w Comarch e-Sklep, który pozwala swobodnie modyfikować interfejs sklepu internetowego. Wykorzystuje kombinacje instrukcji, obiektów, filtrów i akcji aby dynamicznie budować strukturę strony.
Dzięki silnikowi Liquid można w dowolny sposób budować listę towarów, szczegóły produktu, proces zamówienia oraz wiele innych elementów dostępnych w Comarch e-Sklep. Poniżej przedstawione zostało kilka przykładów wykorzystania silnika Liquid.
Wypisanie nazw produktów promocyjnych
|
0 1 2 3 4 |
{% for product in newproducts.Products -%} {{ product.Name }} {% endfor -%} |
Wyświetlenie obrazków zawartych w banerze
|
0 1 2 3 4 |
{% for slide in config.Banners['slider'].Images -%} <img title="{{slide.Title}}" src="{{slide.Url}}" alt="{{slide.Alt}}" /> {% endfor -%} |
Prosty formularz logowania
|
0 1 2 3 4 5 6 7 8 |
<form method="POST" id="loginForm"> <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 }}"/> <input name="__action" type="hidden" value="Customer/Login"/> <button type="submit">Zaloguj</button> </form> |
Prosty formularz logowania z obsługą po stronie JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<form method="POST" id="loginForm"> <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 }}" required/> <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> |
Wskazówka
W powyższym przykładzie wykorzystana została popularna biblioteka jQuery. Nie jest ona jednak konieczna by korzystać z silnika Liquid.
Czy ten artykuł był pomocny?
( 1 )
( 0 )