April 2025
April 2025
Download onderstaande startbestanden
Startbestanden
Info
Alhoewel deze opgave op vlak van moeilijkheidsgraad te vergelijken is met het module-examen, moet je in deze opdracht zelf HTML schrijven. Dit wordt niet gevraagd op het module-examen. Je krijgt daar alle HTML-code. Je moet natuurlijk wel HTML-elementen aanmaken vanuit JavaScript, maar dit gebeurd op basis van gegeven HTML-code.
Webshop
Ontwikkel een gebruiksvriendelijke webshop waar gebruikers eenvoudig producten kunnen toevoegen aan hun winkelwagen.
Data ophalen (4 punten)
De productinformatie wordt, via een fetch-verzoek, ingeladen vanuit het JSON-bestand in de startbestanden.
Foutmelding (1 punt)
Als het bestand niet gevonden kan worden, wordt er een duidelijke foutmelding weergegeven om de gebruiker te informeren over het probleem.
Producten renderen (5 punten)
Als de producten succesvol ingeladen worden via fetch , moeten deze getoond worden zoals in onderstaand screenshot (gebruik hiervoor een Bootstrap Card.
Producten filteren (4 punten)
De webshop biedt verschillende filters waarmee gebruikers efficiënt door het assortiment kunnen navigeren. Bij het selecteren van een filter worden alleen de producten in die specifieke categorie weergegeven. Als je kiest voor 'Alle producten', worden alle beschikbare producten getoond. Bij het laden van de pagina worden automatisch alle beschikbare producten getoond.
Let op: als het fetch request mislukt is, zorg er dan voor dat de filters niet worden weergegeven.
Winkelwagen
De winkelwagen wordt bovenaan de pagina weergegeven in een dropdown menu, als de applicatie start in de winkelwagen natuurlijk leeg.
Opvullen (5 punten)
Wanneer een product aan de winkelwagen wordt toegevoegd, wordt de dropdown in het navigatiemenu onmiddellijk bijgewerkt. De winkelwagen toont elk geselecteerd product, inclusief de hoeveelheid en prijs. Gebruikers kunnen meerdere exemplaren van hetzelfde product toevoegen en eenvoudig een item per keer verwijderen met de verwijderknop. Als er meerdere stuks van een product in de winkelwagen staan en er één verwijderd wordt, blijft de resterende hoeveelheid correct zichtbaar. Het totaalbedrag wordt automatisch geüpdatet na elke wijziging.
Checkout (1 punt)
Wanneer de gebruiker op "Afrekenen" klikt, verschijnt een melding waarin wordt bevestigd dat de bestelling succesvol is geplaatst. Daarna wordt de winkelwagen geleegd, zodat het bestelproces opnieuw kan beginnen.
