Ga naar hoofdinhoud

Deelopdracht 7 - Dynamische content (finale)

Lees eerst de Projectinformatie. Daar vind je de wireframes, de deadlines en de regels voor het hele project.

Echte webshops schrijven hun producten niet met de hand in HTML. Eigenaars beheren ze in een Content Management System (CMS) dat de data in een database bewaart, en de HTML wordt automatisch gegenereerd op basis van die data.

In deze laatste deelopdracht doe je iets gelijkaardigs: je vervangt de hardcoded productkaartjes op de shoppagina door kaartjes die JavaScript genereert uit data.

info

Hiervoor moet je je bestaande code herwerken (refactoring). Maak eerst een commit, zodat je altijd terug kunt naar een werkende versie.

1. Zet je producten om naar een array van objecten​

Maak een array met één object per product. Elk object bevat de gegevens van het product: een unieke id, afbeelding, naam, beschrijving, prijs en de 6 specificaties uit deelopdracht 1. Met de id kun je straks een product gemakkelijk terugvinden.

const shopItems = [
  {
    id: 1,
    image: "assets/blue-alchemy-jug.jpg",
    name: "Blue Alchemy Jug",
    description:
      "Een zeldzame, betoverende kan die zacht oplicht in een diep saffierblauw.",
    price: 13,
    specs: [
      { label: "Materiaal", value: "Betoverd kristal" },
      { label: "Hoogte", value: "25 cm" },
      { label: "Diameter", value: "12 cm" },
      { label: "Inhoud", value: "1 liter" },
      { label: "Gewicht", value: "800 g" },
      { label: "Herkomst", value: "Alchemistengilde van Antwerpen" },
    ],
  },
  {
    id: 2,
    image: "assets/wand-of-smiles.jpg",
    name: "Wand Of Smiles",
    description: "Een magische toverstaf, de ideale metgezel voor elke tovenaar.",
    price: 130,
    specs: [
      { label: "Materiaal", value: "Eikenhout" },
      // ... de andere 5 specificaties
    ],
  },
  // ... de andere 4 producten
];

De 6 specificaties staan in een aparte array specs, met per specificatie een label en een value. Dat komt overeen met de rijen van de specificatietabel op je detailpagina's.

2. Genereer de productkaartjes​

Loop over de array en bouw voor elk product de HTML van het kaartje op met JavaScript. Hergebruik daarvoor de HTML-structuur uit deelopdracht 2.

Voeg de kaartjes toe aan het element dat de productlijst bevat. Verwijder daarna de hardcoded kaartjes uit shop.html.

3. Laat het winkelmandje en de verlanglijst opnieuw werken​

De knoppen In winkelmandje en het hartje werken waarschijnlijk niet meer. Pas je event handling aan zodat alles uit deelopdracht 5 opnieuw werkt. Er zijn twee manieren:

  • Via de positie: haal alle knoppen op, loop erover en gebruik hun positie om het juiste product in shopItems te vinden.
  • Via een data-attribuut (aanbevolen): zet de id van het product in de HTML met een data-attribuut, bv. data-id="1". Je code hangt dan niet af van de volgorde in de array.
button.addEventListener("click", () => {
  const id = Number(button.dataset.id);
  const item = shopItems.find((item) => item.id === id);
  // Voeg toe aan winkelmandje
});

⚠️ Volg de coding guidelines: gebruik geen onclick-attributen in de HTML.

Tips​

  • Zorg dat je project werkt wanneer je het indient. Een stabiel project is beter dan een project met veel features dat crasht.
  • Dien tijdig in. Je presenteert het eindresultaat op het einde van het semester.