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
{% for product in newproducts.Products -%}
{{ product.Name }}
{% endfor -%}
Wyświetlenie obrazków zawartych w banerze
{% for slide in config.Banners['slider'].Images -%}
<img title="{{slide.Title}}" src="{{slide.Url}}" alt="{{slide.Alt}}" />
{% endfor -%}
Prosty formularz logowania
<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
<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>