Dynamisk indhold med Liquid
Introduktion
Shopsystemet understøtter template sproget Liquid i et afmålt omfang som vi gennemgår i denne artikel. Liquid er et open source template sprog, som bruges til at indlæse dynamisk indhold på shopfronten.
Ønsker du at vide mere omkring Liquid kan vi anbefale den officielle guide som du finder her.
Sådan gør du
JSON til Liquid templates har denne struktur:
|
1 2 3 4 |
{ session:{}, context:{}, } |
Objekterne session og context indeholder følgende properties:
- session: indeholder alle data fra /shop/ajaxwrapper.asp?fc=getsessionvaluesjson
- context: indeholder page feltet, som viser, hvilken side der er indlæst f.eks. profile, terms, frontpage osv.
Der findes med andre ord udelukkende context.page i den nuværende implementeringen af context objektet. De properties, som findes i session objektet er de samme som man kan se ved at kalde /shop/ajaxwrapper.asp?fc=getsessionvaluesjson på shoppens domæne, hvilket giver et resultat som i dette fiktive eksempel:
|
1 |
{ "customerLoggedIn": false, "countryId": 2397, "showPricesWithVat": true, "activeCategoryNumber": "", "activeProductDetailsCategoryNumber": "", "basketTotalProductPriceWithoutVat": 0, "basketTotalVat": 0, "siteId": 26, "basketShippingFee": 0, "basketPayMethodFee": 0, "vatPercentage": 25, "currencyId": "DKK", "currencySymbol": "DKK", "currencyCode": 208, "customerNumber": "", "customerName": "", "customerPhone": "", "customerEmail": "", "basket": [], "freeShippingDiscountActiveForAtLeastOneMethod": false, "discountCodeSpecified": false, "uniqueSessionIdentifier": "9b99b9b9-99b9-99d9-99f9-99a9dd990e99", "shopIdentifier": "9999999", "isB2BCustomer": false, "b2BgroupId": "" } |
Det vil sige at man med Liquid f.eks. kan benytte session.currencyCode og session.customerLoggedIn i sin kode til at aflæse valuta, om kunden er logget ind i den aktive session osv.
Eksempler
I dette eksempel benytter vi Liquid til at udskrive produkter i kurven ved at iterere session.basket:
|
1 2 3 4 5 6 7 8 9 10 |
{% for product in session.basket %} <div class="row"> <div class="col-sm-3"> {{ product.productNumber }} </div> <div class="col-sm-3"> {{ product.productName }} </div> </div> {% endfor %} |
I dette eksempel laver vi et check på om den viste side er shoppens profil-side (“Om os”) ved at benytte context.page og tjekke for værdien “profile”:
|
1 2 3 |
{% if context.page == "profile" %} <div>Du er nu på vores virksomhedsbeskrivelsesside.</div> {% endif %} |
Nyttige links
