Technieken

Het template is gebouwd op basis van Twig, wat al een techniek op zichzelf is. Maar er worden een aantal andere technieken gebruikt om het ontwikkelen binnen het template te versimpelen.

SCSS

Om meer mogelijkheden beschikbaar te maken binnen CSS is het project SASS-lang ontstaan. SASS, wat staat voor Syntactically Awesome Style Sheets, geeft je beschikking over functies, mixins, variabelen, file imports en nesting. Om het leesbaar te houden voor developers die geen ervaring hebben met SASS hebben we gekozen om de SCSS variant te gebruiken. Deze syntax ligt dichter bij de gewone CSS syntax zodat dit ook geldige SCSS is.

Wij gebruiken bijvoorbeeld de nesting feature heel veel om niet elke keer een parent class uit te schrijven. Ook mixins voor media breakpoints zijn erg handig.

Voor meer info over SCSS en SASS kun je kijken op https://sass-lang.com/.

jQuery

Met javascript kun je je site dynamisch maken en wijzigingen aan de HTML toepassen. Om deze taal wat te vereenvoudigen gebruiken we jQuery om dingen als document.getElementById('header') te versimpelen naar $('#header'). Je kan natuurlijk altijd vanilla js blijven schrijven, weet wel dat je jQuery beschikbaar hebt. Meer info op https://api.jquery.com/.

jQueryUI

Met jQueryUI wordt de prijs slider opgebouwd. Dit is een package waar allerlei UI-componenten in zijn opgenomen die functionaliteit hebben op basis van jQuery. Veel componenten zijn ook in bootstrap opgenomen en daarom wordt alleen de slider gebruikt. Meer info op https://jqueryui.com/.

Bootstrap

Iedereen die begint met web development komt uiteindelijk een keer Bootstrap tegen. Het is een solide basis om je site meer in elkaar te zetten en bevat gestileerde componenten zodat de moeilijkste dingen al voor je zijn gedaan. In het template gebruiken we de SASS-variant van bootstrap 3 (https://github.com/twbs/bootstrap-sass), dit is een verouderde versie van bootstrap, maar daardoor weet je zeker dat het op elke browser zal werken. De documentatie kun je vinden op https://getbootstrap.com/docs/3.4/, let er dus goed op dat je de documentatie van V3 gebruikt, V5 staat namelijk al voor de deur.

Slick slider

Bovenaan de pagina's zie je vaak banners of carrousels. Voor de carrousel kun je gebruik maken van slick slider. Dit is een simpele package die al op een aantal plekken is toegepast in het template. Meer info op https://kenwheeler.github.io/slick/

lazysizes

Lazysizes is een package die je de mogelijkheid biedt om afbeeldingen pas te gaan laden na het renderen van de pagina. Hierdoor wordt de site sneller doordat het laden van de pagina's later gebeurd. Ook worden afbeeldingen ver buiten het zichtbare gedeelte pas ingeladen als ze bijna in beeld komen. Meer info op https://github.com/aFarkas/lazysizes.

lightbox

Met lightbox kun je afbeeldingen in een popup tonen. Dit wordt bijvoorbeeld gebruikt op de standaard product pagina's en op de galerij pagina. Het is een simpele implementatie en veel gebruikt. Meer info op https://lokeshdhakar.com/projects/lightbox2/.

datepicker

Voor het selecteren van een datum of tijd is een datepicker toegevoegd. Deze datepicker sluit aan bij de Bootstrap looks en gebruikt ook jQuery. Meer info op https://bootstrap-datepicker.readthedocs.io/en/v1.7.0/.

star-rating

cookieconsent

Voor het melden dat er cookies worden gebruikt is de package cookieconsent toegevoegd. Deze is toont een balk met een tekst en een knop die de gebruiker waarschuwt over de cookies. Deze package is echter heel vaak van eigenaar veranderd waardoor de documentatie van de gebruikte versie niet meer te vinden is. Op https://www.osano.com/cookieconsent/download/ kun je wel een nieuwe versie verkrijgen door op Start coding te drukken kun je een configuratie maken voor je website.

moment.js

Met moment kun je een datum formatteren zoals je zelf wilt. Ook kan je een datum manipuleren en transformeren naar andere valide waardes. Meer info op https://momentjs.com/.

parsley.js

Voor de frontend validatie van formulieren en het tonen van de foutmeldingen gebruiken wij parsley.js. Hiermee kun je per veld aangeven hoe deze gevalideerd moet worden en zal er een foutmelding bij het veld getoond worden. Totdat deze fout verholpen is kan het formulier niet verzonden worden. Je kan ook custom validators schrijven. Meer info op https://parsleyjs.org/.