In deze reeks tutorials werken we met local storage om gebruikersinformatie in de browser op te slaan en op andere momenten weer te gebruiken of aan te passen.
Local storage bestaat uit key-value-paren, die uit strings bestaan.
Het zijn dus geen objecten en hebben feitelijk een JSON structuur.
Met localStorage.getItem() kunnen we items ophalen uit de local storage en met localStorage.setItem() kunnen we deze schrijven.
Leerdoelen
- herhaling van bewerken van DOM;
- Opnieuw werken met een object met eigenschap en meerdere methods;
indexbij.forEach()bij het doorlopen van een array;- Local Storage.
Let er bij de uitwerking op dat je eigen namen gebruikt voor de variabelen, objecten, class-namen en funties.
Zo kun je laten zien dat je het zelf ook begrijpt.
Webshop met localStorage 1: winkelwagen en bestelknop (00:13:10)
We vertrekken vanuit de sorteeropdracht met verbeterde uitvoer: https://blanken5.home.xs4all.nl/jsonBeterUItvoeren.html
Om de webshop te realiseren, bouwen we hier aan de benodigde elementen: een winkelwagen met daarin een weergave van het aantal items in de winkelwagen en bij elk boek een bestelknop.
Webshop met localStorage 2: boeken toevoegen (00:07:28)
Voor de winkelwagen maken we in JavaScript een apart object met eigenschap en methods.
Hij moet de bestelde items bewaren en methods hebben om boeken toe te voegen en te verwijderen.
De bestelde items is een (nog lege) array als eigenschap in het object winkelwagen.
Het toevoegen heeft een element als argument en deze wordt aan de items-array toegevoegd met addEventListener();.
In de DOM zit een winkelwagen met een span. Met .querySelector() kan deze worden geselecteerd en na het toevoegen heeft het array van de items minstens een lengte van 1.
We voeren de lengte van de array aan het aantal items in de DOM toe, zodat daar voor de gebruiker het aantal items verschijnt.
Dit alles moet worden aangeroepen door een klik op een van de bestelknoppen. Die zijn in de vorige video gemaakt.
Die knop krijgt dus een addEventListener(); waarbij van de winkelwagen de toevoeg-methode wordt aangeroepen met als argument het boek waar deze bestelknop aan toegevoegd was.
Webshop met localStorage 3: localStorage (00:07:28)
Als de pagina herladen wordt blijken de bestellingen er niet meer te zijn. Een oplossing in de frontend kan met localStorage geleverd worden. In de browser kun je onder een naam een string bewaren, die op een later moment wordt teruggevraagd.
Het zijn feitelijk key-value-paren van strings.
We gaan aan onze winkelwagen een Methods toevoegen, die de localStorage eerst uitleest.
Als er een bestelling is opgeslagen, wordt deze eerst aan onze items in de winkelwagen toegevoegd. Dit kan met localStorage.getItem('naam_van_de_eigenschap').
Omdat hier een string uitkomt, moet deze met JSON.parse() nog naar een object worden omgezet, voordat deze geplaatst wordt in de items van onze winkelwagen.
Zit deze in de items, dan kan net als in de vorige video het aantal items in de winkelwagen worden doorgevoerd, zodat de gebruiker zit hoeveel bestellingen er zijn.
Klikt de gebruiker op een bestelknop dan moet de toevoereigenschap de items en het aantal daarvan weer updaten. Bovendien moet de localStorage worden bijgewerkt.
Dit kan met localStorage.setItem('naam_van_de_eigenschap', JSON.stringify(de_items_in_de_winkelwagen).
Het eerste argument vertelt welke localStorage key gebruikt gaat worden, de tweede moet ook een string zijn en dus moeten de items (die objecten zijn) met JSON.stringify() naar een string worden omgezet.
Hierna blijkt het toevoegen ook werkelijk te lukken en staan de data ook in de loclaStorage, wat blijkt na het herladen of openen van de pagina. je kunt de LocalStorage ook bij het inspecteren terugvinden onder Application => Local Storage. Daar kun je voor testdoeleinden de opgeslagen items ook wissen.
Webshop met localStorage 4: besteloverzicht ophalen (00:13:59)
Met localStorage kun je de geven naar een ander pagina meenemen.
We maken hier een aparte pagina waar de gegevens uit de winkelwagen gehaald worden.
Het zou ook mogelijk zijn op dezelfde pagina dit overzicht te maken en bijvoorbeeld via een apart element naar binnen te laten schuiven als je op de winkelwagen klikt.
Hier is de winkelwagen omgezet naar een link naar de nieuwe pagina.
Voor deze pagina maken we ook een apart JavaScript waar we delen van het oude script meenemen: de winkelwagen en de uitvoer zijn met name belangrijke elementen.
De uitvoer van het sorteerobject wordt overgenomen in de winkelwagen: daar moet immers ook uitgevoerd worden.
Webshop met localStorage 5: bestelitems uitvoeren en opmaken (00:09:34)
In het winkelwagen object is de method voor toevoegen niet meer nodig.
Wel moeten de items uit de bestelling in de items-eigenschap van de winkelwagen worden geplaatst.
Daarvoor is in de method voor het ophalen van de data een forEach() opgenomen om elk item in die items toe te voegen.
Daarna blijkt de uitvoer snel uit te voeren met weglating van eigenschappen die op een bestelpagina kunnen ontbreken.
De sections met daarin de verschillende onderdelen krijgen aparte class-namen om de vormgeving af te stemmen op het doel van de bestelpagina.
Daarbij wordt de BEM-standaard gebruikt.
Bij het stijlen werken we met CSS grid.
Webshop met localStorage 6: verwijderknop toevoegen (00:11:18)
Achter elk van de bestelde items wordt een verwijderknop toegevoegd.
Dit gaat met JavaScript in de uitvoer-methode op de bekende manier via document.createElement().
Tevens wordt het overzicht voor brede viewports versmald en midden op de pagina gezet.
Webshop met localStorage 7: items verwijderen (00:12:15)
Om items te verwijderen maken we een method aan in het winkelwagenobject.
Deze heeft het unieke ean-nummer als argument meegekregen.
Aan de verwijderknop voegen we een event-listener toe die deze method aanroept met de ean-waarde van het boek.
De method doorloopt alle items en controleert of het ean-nummer met de parameter overeenstemt.
In dat geval verwijderd hij deze uit de items-array.
Het doorlopen kan met de .forEach(), maar deze krijgt 2 argumenten mee: het item en index.
Deze index geeft dan weer op welke positie het item in de array staat.
Het verwijderen uit de array gaat met .splice(). Ook deze krijgt 2 argumenten: allereerst de index en vervolgens 1 om mee te geven dat er 1 element wordt verwijderd.
Vervolgens moet de local storage worden bijgewerkt en opnieuw worden uitgevoerd en de teller van het aantal items dat in de winkelwagen bijwerken.
Webshop met localStorage 8: script optimaliseren (00:07:32)
Het blijkt dat de span met het aantal items in de winkelwagen niet verdwijnt als er geen items zijn.
Daarom gaan we het script optimaliseren en in het winkelwagenobject een uitvoer-methode schrijven.
Met een conditioneel wordt nagegaan of er items zijn.
In dat geval wordt het aantal items weergegeven.
Het andere geval is dat er geen items zijn, in dat geval wordt er een lege string geplaatst. Met de :not(:empty) selector in de CSS wordt het element dan dus niet meer weergegeven.
In plaats van dit stukje script op verschillende plaatsen te herhalen, wordt deze nu aangeroepen op het moment dat dit wenselijk is. Er ontstaat een betere structuur.
Webshop met localStorage 9: script verwijdert gelijke boeken (00:02:29)
Als er van een boek meerdere items zijn besteld, verloopt het verwijderen van het item niet helemaal voorspelbaar.
Soms verdwijnen er meerdere items. Dat komt doordat in de forEach-lus alle items met dezelfde ean weggehaald worden.
Om dit tot één item te beperken, geef je de parameter een andere waarde, die nooit een ean van een boek kan zijn.
Door deze tweak zullen er bij het uitvoeren van die method geen andere boeken verwijderd worden.
Webshop met localStorage 10: totale prijs weergeven (00:10:19)
Maak eerst een method die de totale prijs berekent.
Hiervoor ga je met een forEach() door de items van de bestellijst en bij ieder item verhoog je een variabele met de waarde van de prijs-eigenschap van elk boekitem. Dit totaalbedrag wordt teruggegeven.
Dit bedrag moet worden uitgevoerd.
In de uitvoermethode moet na het uitvoeren van de items, een section worden toegevoegd die het totaalbedrag weergeeft.
Daarvoor werken we wederom met document.createElement(), .className en .appendChild();
Webshop met localStorage 11: stijlen van de totaalprijs (00:05:56)
Om de totaalprijs ons de andere prijzen te krijgen hebben we er al voor gezorgd dat de section dezelfde class-naam heeft als de boeken in de bestellijst.
Het heeft dus hetzelfde grid en grid-template als de boeken, maar het bevat geen afbeelding en geen vuilnisemmer. We kunnen ze met grid-column op de juiste grid-plaats zetten.
Er is dan een kleine verschuiving, die ontstaat door het ontbreken van de vuilnisemmer. In het grid-template geven we die kolom daarom een vaste waarde.
Webshop met localStorage 12: winkelwagen op catalogus in beeld houden (00:04:45)
Als er in de catalogus gescrolld wordt, ziet de gebruiker de winkelwagen niet meer en krijgt dan geen enkele feedback als hij een boek aan de winkelwagen toevoegt.
Met position: sticky is dat eenvoudig te verhelpen.
Bonusopdracht
Kies uit de volgende mogelijkheden:
- Geef de gebruiker meer feedback als hij een item toevoegt dan alleen een ander nummertje in de winkelwagen.
-
Zorg ervoor dat de winkelwagen in beeld blijft als er gescrolled wordt. (
position: sticky)
Inleveren
- Na afloop plaats je deze training online in je bewijzenmap;
- Valideer jouw pagina's op Markup Validation Service van W3C.
- De validatie icoontjes staan al in de footer. Code vind je bij https://github.com/Theo-denBlanken/validatie-W3C;
- Plaats jouw uitwerking op in een aparte repository op GitHub
- Maak in jouw GitHub-repo een README.md met daarin temnminste een link naar jouw online uitwerking.
- Plaats de GitHub-link in ELO Magister.