Webbteknik 3

Beskrivning och uppgifter

I den första deluppgiften (a1) ska du bygga vidare på ett program, för att implementera en enkel varukorg. Objekt används både för ett "produktregister" och för varukorgen. I den andra deluppgiften (b) ska du översätta datastrukturen i uppgift U1 från XML till JSON. Det finns också en extramerit (a2), som bygger vidare på programmet med varukorgen.

a1. Objekt för varukorg

• "Constructor"-funktion för ett objekt i varukorgen
  • Skapa en "constructor" som skapar ett objekt med två egenskaper för artikelnummer och antal. Kalla egenskaperna för artnr och quantity. Artikelnumret ska skickas som parameter till "constructorn" och antalet sätts initialt till 1.
  • Lägg in kod i addToCart, för att skapa en instans med hjälp av "constructorn" och sedan pusha in den i varukorgen, cart. Anropa därefter showCart.
    • Eftersom showCart ännu inte är skriven kommer du inte se något resultat på sidan, men skriv ut cart med console.log, för att kontrollera att du får in ett nytt objekt där, då man klickar på en knapp för att lägga till en vara.
• Funktionen showCart
  • Funktionen ska visa varukorgens innehåll i elementet med id "cart". Denna del blir ganska lik funktionen showProducts, fast du måste nu använda information både från varukorgen (cart) och produktregistret (arrayerna med produktinfo).
    • Använd getProduct, för att ur registret hämta produktens objekt med hjälp av artikelnumret som finns i varukorgen.
    • För att det ska stämma med CSS-koden, måste du skapa följande HTML-kod för varje vara i varukorgen:

        <div>
          <h4>PRODUKTENS NAMN</h4>
          <button 'type='button' class='del'></button>
          <p>Antal: ANTAL</p>
          <p>Pris: PRIS kr.</p>
        </div>

      där PRODUKTENS NAMN hämtas ur produktens objekt, ANTAL hämtas ur varukorgen och PRIS ska vara produktens pris multiplicerat med antalet.

      Observera att det inte ska stå något mellan knappens start- och sluttagg. I CSS-koden läggs det till en bakgrundsbild av en liten soptunna.

  • Gå igenom knapparna med klassen del och lägg på händelselyssnare för click. Funktionen som ska anropas ska vara removeFromCart med i som parameter.
  • Totalpriset ska också räknas ut och visas i elementet med id "totPrice".
  • Det ska se ut på följande sätt:
    
• Uppdatera antal
  • Om man klickar på knappen för att lägga till en produkt som redan finns i varukorgen, ska den inte läggas till igen. Istället ska antalet i varukorgen ökas med 1. Detta löser du med följande punkt.
  • I addToCart anropar du getCartItem, för att söka efter produkten i varukorgen. Om den finns, ska antalet ökas med 1. I annat fall ska du utföra den kod du la in tidigare, för att skapa ett nytt objekt i varukorgen och pusha in det i cart. Oavsett vilket som utförs, ska showCart anropas i slutet av funktionen, för att visa den uppdaterade varukorgen.
• Spara varukorgen i localStorage
  • I saveCart konverterar du cart med JSON.stringify till en textsträng. Spara den sedan i localStorage med valfritt namn.
  • I getCart avläser du localStorage för att få in varukorgens textsträng. Om den finns, konverterar du den till arrayen i cart med hjälp av JSON.parse och visar sedan varukorgen med showCart.
  • Anropa saveCart i slutet av addToCart och removeFromCart, dvs varje gång varukorgen uppdateras.
  • Anropa getCart i slutet av init-funktionen, dvs då sidan laddats in.
  • Nu ska varukorgen finnas kvar, då du går mellan sidorna och även då du kommer tillbaks vid ett senare tillfälle.

a2. Lägg till knappar för att minska eller öka antalet för en vara i varukorgen (ej obligatorisk)

• I showCart ändrar du HTML-koden där antal skrivs ut genom att lägga till en knapp före respektive efter antalet. Den första knappen ska ha ett minustecken som innehåll samt class='decr'. Den andra knappen ska ha ett plustecken som innehåll samt class='incr'.
  • Dessa klasser finns i CSS-koden och ger knapparna önskad stil.
• I for-loopen lägger du på händelselyssnare på de båda knapparna och ser till att changeQuantityInCart anropas med parametrarna i och -1 respektive i och 1.
• I changeQuantityInCart tar du fram antalet som finns i objektet som indexeras av index och lägger ihop det med amount. Om det är större än 0 uppdaterar du innehållet i varukorgen.
  • Antalet ska endast kunna minskas ner till 1, men det finns ingen övre gräns.
• Det ska se ut på följande sätt:
  

b. Översätt XML till JSON

• Utgå från en av de XML-filer som du skapade i uppgift U1. Du ska nu skapa en JSON-fil med samma struktur och innehåll.
• I JSON kan du inte ha attribut, så om du har attribut i XML-filen, får du nu föra in det som "vanliga" dataelement i JSON-filen. Det ska vara i stort sett samma struktur i JSON-koden som i XML-koden, men en del mindre justeringar är tillåtna.

Publicera dina filer

• På ingångssidan för dina uppgifter ska du ha två länkar — en länk till programmet och en länk till din JSON-fil.
• Publicera på Netlify samt testa att länkarna och ditt program fungerar.

Krav

Kraven på det du skapar i denna uppgift är följande.

Godkänt

Följande krav måste vara uppfyllda, för att du ska bli godkänd.

• Utför punkt a1 och b i ovanstående beskrivning.

Extramerit

Följande är inte obligatoriskt för att bli godkänd, men kan ge en extra förtjänst som tas med i bedömning av kursens slutbetyg.

• Utför punkt a2 i beskrivningen ovan.