Diepgaande analyse van technische keuzes en obstakels bij het maken van mijn webshop
Tijdens het bouwen van mijn webshop moest ik verschillende technische keuzes maken. Daarbij liep ik ook tegen een aantal problemen aan die ik moest oplossen. Door hiermee bezig te zijn heb ik niet alleen geleerd hoe een webshop technisch werkt, maar ook waarom bepaalde oplossingen beter of juist minder handig zijn.
1. Het gebruik van localStorage als opslag voor data
Een van de eerste belangrijke keuzes was het gebruik van localStorage om gegevens op te slaan, zoals producten, de winkelwagen, bestellingen en kortingscodes. Dit werkte goed omdat ik geen echte database of server hoefde te gebruiken. De gegevens blijven namelijk in de browser opgeslagen, wat handig is tijdens het testen.
Voordelen van deze keuze:- Ik had geen backend nodig, dus ik hoefde geen server of database te installeren.
- Het was snel en eenvoudig te gebruiken.
- Gegevens blijven opgeslagen in de browser, waardoor ze niet verdwijnen als je de pagina vernieuwt.
- localStorage werkt alleen in één browser en op één apparaat.
- Als iemand de webshop op een andere computer opent, is de winkelwagen daar leeg.
Als ik deze webshop opnieuw zou maken, zou ik waarschijnlijk proberen te werken met een echte database, bijvoorbeeld via Firebase of een simpele backend. Dat zou de webshop realistischer maken.
2. Voorraadcontrole bij het toevoegen van producten
Een andere technische keuze was het controleren van de voorraad wanneer een gebruiker een product aan de winkelwagen toevoegt. Dit deed ik met JavaScript door te controleren of het gekozen aantal niet hoger is dan de beschikbare voorraad.
Waarom dit belangrijk is:- Het voorkomt dat mensen meer producten bestellen dan er op voorraad zijn.
- De webshop reageert daardoor slimmer op de acties van de gebruiker.
Het maken van deze controle maakte de code ingewikkelder. Ik moest extra functies schrijven om te controleren of de voorraad nog klopt. Daarnaast moest ik veel testen en fouten oplossen om ervoor te zorgen dat de voorraad goed werd bijgewerkt in localStorage.
3. Dynamische berekening van totaalprijs en kortingscodes
Het systeem voor kortingscodes was een interessant onderdeel om te maken. De webshop moest namelijk twee soorten korting kunnen verwerken: een percentagekorting en een vaste korting.
Technische keuzes:- De totaalprijs wordt berekend op basis van alle producten in de winkelwagen.
- Als een kortingscode wordt ingevoerd, wordt de prijs automatisch opnieuw berekend.
Het was soms lastig om de berekeningen goed te laten werken voor beide soorten kortingen. Ik moest ook controleren of de ingevoerde waarde geldig was, bijvoorbeeld of het echt een getal is.
Daarnaast moest ik verschillende situaties testen, zoals:
- percentages die leiden tot decimalen
- vaste bedragen die hoger kunnen zijn dan de totale prijs
4. Gebruikerservaring en foutmeldingen
Bij een webshop is het belangrijk dat gebruikers duidelijke feedback krijgen. Daarom heb ik verschillende foutmeldingen toegevoegd.
Voorbeelden hiervan zijn:- een waarschuwing wanneer er niet genoeg voorraad is
- een melding wanneer een kortingscode ongeldig is
Ik heb vaak gebruikgemaakt van alert() om meldingen te tonen. Dat werkt eenvoudig en duidelijk.
Nadeel:Alerts zijn niet erg modern en zien er minder professioneel uit. In een echte webshop zou je waarschijnlijk mooiere meldingen gebruiken die beter in het design passen.
Conclusie – wat ik heb geleerd
Door het bouwen van deze webshop heb ik veel geleerd over webontwikkeling. Bijvoorbeeld:
- hoe je gegevens opslaat en ophaalt met localStorage
- hoe JavaScript reageert op acties van gebruikers
- hoe je functies bouwt voor een winkelwagen, voorraadbeheer en kortingscodes
- hoe belangrijk goede foutmeldingen zijn voor de gebruikerservaring
Wat ik zelf het leukst vond tijdens dit project was het zoeken naar foto’s en informatie over het vuurwerk en het ontwerpen van de webshop.
Door deze opdracht heb ik niet alleen geleerd hoe een webshop technisch werkt, maar ook hoe je problemen oplost en nadenkt over verschillende oplossingen. Het was soms lastig, maar juist daardoor heb ik er veel van geleerd en voel ik me zekerder geworden in webontwikkeling.
hieronder bevind zich hoe ik te zien krijg dat iemand een bestelling heeft geplaatst.
hieronder vind u de link van mijn webshop.
Ga naar webshop