Mörkt tema
Inlämningsuppgift 1
Information
Se detaljerna kring inlämningsuppgiften här: betyggskala, deadlines, examinerade moment, osv.
Introduktion
Den här veckan ska vi fokusera på kundvagnen/varukorgen.
Tips! Fortsätt att skriva pseudokod för de olika uppgifterna. Det tränar även dig i att tänka logik och flöde.
Veckans uppgift(er)
Skapa en varukorg
Vi behöver kunna hålla reda på vad en kund vill beställa, dvs. lagra beställningsinformationen. Fundera på vad som är en lämplig variabeltyper för en varukorg. Vilken information behöver vi hålla reda på?
Det ska finnas en varukorgssammanställning som visar endast de munkar som har beställts. Ungefär som i en riktig webshop.
Skriv pseudokod och olika scenarios!
Vad händer om kunden lägger till två stycken munkar av samma sort? Ska det visas som separata rader i varukorgen, eller ska antalet plussas ihop?
Vad händer om kunden senare lägger till en till munk som redan finns i varukorgen?
Vad är den minsta möjliga informationen vi kan klara oss med i varukorgen, för att undvika kodupprepning?
Lägga till en produkt i varukorgen
Till varje produkt behöver vi nu lägga till knappar för att lägga till produkten i varukorgen.
Börja med att göra en enkel knapp: "Lägg till", som lägger till ett exemplar av produkten i varukorgen.
Öka på en existerande produkt i varukorgen
Praktiskt är det om en produkt som redan finns i varukorgen ökar i antal, istället för att "läggas till" en gång till.
Fundera på hur vi kan leta i vår varukorg om produkten redan finns. Vilka två vägar kan vårt program ta, om produkten finns resp. inte finns?
Välja antal produkter som ska läggas till
Dags att göra det lite mer användarvänligt för beställaren/kunden!
Vi lägger till ett input-fält till varje produkt, där kunden ska kunna ange hur många exemplar denne vill beställa av respektive produkt.
Vi ska ha ett redigerbart input-fält, samt en plus-knapp och en minus-knapp.
Negativa munkar 😭
Nu ska vi felhantera! Vad händer om kunden matar in ett minusvärde på produkterna?
Hur ska vi hantera det? Ska vi då betala kunden för en beställning som denne inte gör?
Uppdatera varukorgens totalsumma
Totalsumman ska uppdateras baserat på ändringar som sker i antal beställda munkar i realtid.
Det ska ges någon from av visuell feedback på när varukorgens totalsumma uppdateras. Med detta menas exempelvis någon visuell förändring, såsom en färg-skiftning, storleksskiftning, eller motsv.
Öka/minska antalet produkter i varukorgen
Även i varukorgen vill vi kunna öka/minska antalet på respektive munk, samt ta bort dessa.
Klura på hur du kan göra det!
Nästa vecka
Nästa vecka gör vi klart själva beställningsformuläret och specialreglerna.
Våga Fråga-lådan
Anonyma frågelådan
Tips och koncept
Single source of truth
Det är god programmeringspraxis att ha en källa till sanningen, dvs. en variabel som innehåller all aktuell information, som garanterat alltid är up-to-date.
Jämför med en ombytlig person; mycket enklare om det finns nedskrivet vad man kommit överens om (beställt).
Skapa därför en "objekt-array" (en array som består av objekt), som uppdateras och alltid innehåller sanningen.
Pseudokod:
- Skapa en objekt-array med alla våra produkter. Varje produkt ska ha pris och "beställt antal" (se kod i nästa sektion för exempel)
- När det klickas på en plus-knapp för att öka produkten, leta upp produkten i arrayen och uppdatera dess "amount".
- Gör samma för minus-knappen.
- När produkt-arrayen uppdateras, skriv ut den på nytt i HTML-dokumentet. HTML-dokumentet ska inte vara "sanningen", utan er array i JavaScript.
Denna typ av logik/principer används också när man arbetar med ramverk och "det virtuella DOM:et", som kommer i fortsättningskursen i JavaScript. Dessutom kommer oftast produkt-datan från t.ex. en databas eller något "lagerhanteringssystem".