2210892
/
WEB-Team-A4
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'Bildernamen angepasst, Warenkorb.js neu' (#4) from robinAktuell into master 

Reviewed-on: #4
robinNeu
Robin Schumann 2023-05-10 09:37:39 +02:00
parent cbf58d5701 f9bb98e7b0
commit c83e9a0a2f
9 changed files with 106 additions and 558 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

BIN
public/.DS_Store vendored
View File

Binary file not shown.

19
public/css/desktop.css
View File

@ -388,13 +388,17 @@
}
#menue {
#menue1,
#menue2,
#menue3 {
width: 35px;
height: 25px;
margin-left: 10px;
}
.content .gesamtbetrag {
.content .gesamtbetrag1,
.content .gesamtbetrag2,
.content .gesamtbetrag3 {
font-weight: bold;
color: black;
position: absolute;
@ -403,12 +407,6 @@
right: 15px;
}
.gesamtbetrag {
position: absolute;
font-size: 1em;
bottom: 15px;
right: 15px;
}
.button_hinzufuegen {
background-color: #9BB558;
@ -455,6 +453,7 @@
padding-left: 50px;
margin-top: 22.5px;
margin-left: auto;
margin-right: 150px;
margin-bottom: 22.5px;
display: grid;
grid-template-rows: auto auto;
@ -463,7 +462,7 @@
.content .kostenContainer {
position: relative;
width: 300px;
width: 320px;
height: 60px;
font-weight: bold;
font-size: 0.9em;
@ -475,7 +474,7 @@
color: black;
display: inline-block;
margin-left: 0px;
margin-right: 110px;
margin-right: 118px;
text-align: right;
}

BIN
public/javascript/.DS_Store vendored 100644
View File

Binary file not shown.

574
public/javascript/warenkorb.js
View File

@ -1,542 +1,52 @@
var warenkorb = [];
if (window.location.pathname.includes("/produkte.html")) {
document.addEventListener("DOMContentLoaded", function () {
let standardWerte = [10, 10, 10];
const preise = [0.95, 2.0, 1.10];
window.addEventListener('DOMContentLoaded', berechnePreise);
const produktpreise = {
"karotte": 0.95, // Preis für Karotten
"sellerie": 1.10, // Preis für Sellerie
"birnen": 0.50, // Preis für Birnen
"kiwi": 0.95, // Preis für Kiwi
"orangen": 2.0, //Preis für Orangen
"äpfel": 2.0 //Preis für Äpfel
};
// Hole button1 - button6
for (let i = 1; i <= 6; i++) {
const button = document.getElementById("button" + i);
function entferneAusWarenkorb(index) {
let inputId = 'menue' + index;
let inputElement = document.getElementById(inputId);
let testVar = inputElement.value;
button.addEventListener("click", function (event) {
// verhindern Sie das Standardverhalten des Links
event.preventDefault();
// ermitteln Sie die ausgewählte Anzahl, die ID und den Preis des Produkts
const select = button.previousElementSibling;
const anzahl = select.options[select.selectedIndex].value;
const produktID = this.parentElement.parentElement.querySelector('img[data-id]').getAttribute('data-id');
console.log(produktID);
const preis = produktpreise[produktID];
//Produkt in den Warenkorb hinzufügen
produktHinzufuegen(produktID, anzahl, preis);
});
}
function produktHinzufuegen(produktID, anzahl, preis) {
// Objekt mit Produktinformationen erstellen
let produkt = {
id: produktID,
anzahl: anzahl,
preis: preis // Gesamtpreis berechnen
};
// Produkt zum Warenkorb hinzufügen
warenkorb.push(produkt);
const notification = document.getElementById('notification');
// Anzeigen der Nachricht
notification.textContent = 'Produkt wurde zum Warenkorb hinzugefügt!';
notification.style.display = 'block';
// Nachricht nach 3s ausblenden
setTimeout(function () {
notification.style.display = 'none';
}, 3000);
// Ausgabe des aktuellen Warenkorbs (zum Testen)
console.log(warenkorb);
localStorage.setItem("warenkorb", JSON.stringify(warenkorb));
}
});
}
function createWarenkorbDiv(warenkorb) {
for (const produkt of warenkorb) {
if (produkt.id === "karotte") {
const warenkorbDiv = document.createElement("div");
warenkorbDiv.setAttribute("data-id", "karotte");
warenkorbDiv.classList.add("produkte_warenkorb");
const produktBild = document.createElement("img");
produktBild.src = "pictures/karotte_ohne_preis.webp"
produktBild.alt = produkt.id;
warenkorbDiv.appendChild(produktBild);
const produktDetails = document.createElement("div");
produktDetails.classList.add("produkte_details");
const produktBeschreibung = document.createTextNode("Karotten 1kg");
const produktPreis = document.createTextNode("Kosten: 0.95€");
const aufLager = document.createTextNode("Auf Lager: 250");
produktDetails.appendChild(produktBeschreibung);
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(produktPreis);
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(aufLager);
const buttonMitMenue = document.createElement("div");
buttonMitMenue.classList.add("button_mit_menue");
const paraButton = document.createElement("p");
const buttonEntfernen = document.createElement("a");
buttonEntfernen.classList.add("button_entfernen");
buttonEntfernen.innerText = "Entfernen";
buttonEntfernen.setAttribute("href", "#");
const menue = document.createElement("input");
menue.setAttribute("type", "number");
menue.setAttribute("id", "menue");
menue.setAttribute("value", produkt.anzahl);
menue.setAttribute("max", produkt.anzahl);
menue.setAttribute("min", "0");
menue.setAttribute("pattern", "[0-9]*");
paraButton.appendChild(buttonEntfernen);
buttonMitMenue.appendChild(paraButton);
buttonMitMenue.appendChild(menue);
const gesamtPreis = document.createElement("p");
gesamtPreis.classList.add("gesamtbetrag");
const gesamtPreisText = document.createTextNode("Betrag Gesamt (inkl. MwSt): " + ((produkt.preis * produkt.anzahl).toFixed(2)));
gesamtPreis.appendChild(gesamtPreisText);
warenkorbDiv.appendChild(produktDetails);
warenkorbDiv.appendChild(gesamtPreis);
warenkorbDiv.appendChild(buttonMitMenue);
const warenkorbContainer = document.querySelector(".warenkorb-container");
warenkorbContainer.appendChild(warenkorbDiv);
buttonEntfernen.addEventListener("click", function (event) {
if (produkt.anzahl > 1) {
produkt.anzahl--;
localStorage.setItem("warenkorb", JSON.stringify(warenkorb));
} else {
entferneProdukt("karotte");
console.log("Hier ausgabe vom Warenkorb:");
console.log(warenkorb);
const karotteContainer = document.querySelector('[data-id="karotte"]');
//Löschen vom warenkorbDiv
warenkorbContainer.removeChild(karotteContainer);
}
location.reload(true);
});
} else if (produkt.id === "sellerie") {
const warenkorbDiv = document.createElement("div");
warenkorbDiv.setAttribute("data-id", "sellerie");
warenkorbDiv.classList.add("produkte_warenkorb");
const produktBild = document.createElement("img");
produktBild.src = "pictures/sellerie_ohne_preis.webp"
produktBild.alt = produkt.id;
warenkorbDiv.appendChild(produktBild);
const produktDetails = document.createElement("div");
produktDetails.classList.add("produkte_details");
const produktBeschreibung = document.createTextNode("Sellerie 1 Stück");
const produktPreis = document.createTextNode("Kosten: 1.10€");
const aufLager = document.createTextNode("Auf Lager: 1000");
produktDetails.appendChild(produktBeschreibung);
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(produktPreis);
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(aufLager);
const buttonMitMenue = document.createElement("div");
buttonMitMenue.classList.add("button_mit_menue");
const paraButton = document.createElement("p");
const buttonEntfernen = document.createElement("a");
buttonEntfernen.classList.add("button_entfernen");
buttonEntfernen.innerText = "Entfernen";
buttonEntfernen.setAttribute("href", "#");
const menue = document.createElement("input");
menue.setAttribute("type", "number");
menue.setAttribute("id", "menue");
menue.setAttribute("value", produkt.anzahl);
menue.setAttribute("max", produkt.anzahl);
menue.setAttribute("min", "0");
menue.setAttribute("pattern", "[0-9]*");
paraButton.appendChild(buttonEntfernen);
buttonMitMenue.appendChild(paraButton);
buttonMitMenue.appendChild(menue);
const gesamtPreis = document.createElement("p");
gesamtPreis.classList.add("gesamtbetrag");
const gesamtPreisText = document.createTextNode("Betrag Gesamt (inkl. MwSt): " + ((produkt.preis * produkt.anzahl).toFixed(2)));
gesamtPreis.appendChild(gesamtPreisText);
warenkorbDiv.appendChild(produktDetails);
warenkorbDiv.appendChild(gesamtPreis);
warenkorbDiv.appendChild(buttonMitMenue);
const warenkorbContainer = document.querySelector(".warenkorb-container");
warenkorbContainer.appendChild(warenkorbDiv);
buttonEntfernen.addEventListener("click", function (event) {
if (produkt.anzahl > 1) {
produkt.anzahl--;
localStorage.setItem("warenkorb", JSON.stringify(warenkorb));
} else {
entferneProdukt("sellerie");
console.log("Hier ausgabe vom Warenkorb:");
console.log(warenkorb);
const sellerieContainer = document.querySelector('[data-id="sellerie"]');
//Löschen vom warenkorbDiv
warenkorbContainer.removeChild(sellerieContainer);
}
location.reload(true);
});
} else if (produkt.id === "birnen") {
const warenkorbDiv = document.createElement("div");
warenkorbDiv.setAttribute("data-id", "birnen");
warenkorbDiv.classList.add("produkte_warenkorb");
const produktBild = document.createElement("img");
produktBild.src = "pictures/birne_ohne_preis.webp"
produktBild.alt = produkt.id;
warenkorbDiv.appendChild(produktBild);
const produktDetails = document.createElement("div");
produktDetails.classList.add("produkte_details");
const produktBeschreibung = document.createTextNode("Birne 0.5kg");
const produktPreis = document.createTextNode("Kosten: 0.50€");
const aufLager = document.createTextNode("Auf Lager: 500");
produktDetails.appendChild(produktBeschreibung);
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(produktPreis);
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(aufLager);
const buttonMitMenue = document.createElement("div");
buttonMitMenue.classList.add("button_mit_menue");
const paraButton = document.createElement("p");
const buttonEntfernen = document.createElement("a");
buttonEntfernen.classList.add("button_entfernen");
buttonEntfernen.innerText = "Entfernen";
buttonEntfernen.setAttribute("href", "#");
const menue = document.createElement("input");
menue.setAttribute("type", "number");
menue.setAttribute("id", "menue");
menue.setAttribute("value", produkt.anzahl);
menue.setAttribute("max", produkt.anzahl);
menue.setAttribute("min", "0");
menue.setAttribute("pattern", "[0-9]*");
paraButton.appendChild(buttonEntfernen);
buttonMitMenue.appendChild(paraButton);
buttonMitMenue.appendChild(menue);
const gesamtPreis = document.createElement("p");
gesamtPreis.classList.add("gesamtbetrag");
const gesamtPreisText = document.createTextNode("Betrag Gesamt (inkl. MwSt): " + ((produkt.preis * produkt.anzahl).toFixed(2)));
gesamtPreis.appendChild(gesamtPreisText);
warenkorbDiv.appendChild(produktDetails);
warenkorbDiv.appendChild(gesamtPreis);
warenkorbDiv.appendChild(buttonMitMenue);
const warenkorbContainer = document.querySelector(".warenkorb-container");
warenkorbContainer.appendChild(warenkorbDiv);
buttonEntfernen.addEventListener("click", function (event) {
if (produkt.anzahl > 1) {
produkt.anzahl--;
localStorage.setItem("warenkorb", JSON.stringify(warenkorb));
} else {
entferneProdukt("birnen");
console.log("Hier ausgabe vom Warenkorb:");
console.log(warenkorb);
const birnenContainer = document.querySelector('[data-id="birnen"]');
//Löschen vom warenkorbDiv
warenkorbContainer.removeChild(birnenContainer);
}
location.reload(true);
});
} else if (produkt.id === "kiwi") {
const warenkorbDiv = document.createElement("div");
warenkorbDiv.setAttribute("data-id", "kiwi");
warenkorbDiv.classList.add("produkte_warenkorb");
const produktBild = document.createElement("img");
produktBild.src = "pictures/kiwi_ohne_preis.png.avif"
produktBild.alt = produkt.id;
warenkorbDiv.appendChild(produktBild);
const produktDetails = document.createElement("div");
produktDetails.classList.add("produkte_details");
const produktBeschreibung = document.createTextNode("Kiwi 0.5kg");
const produktPreis = document.createTextNode("Kosten: 0.95€");
const aufLager = document.createTextNode("Auf Lager: 250");
produktDetails.appendChild(produktBeschreibung);
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(produktPreis);
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(aufLager);
const buttonMitMenue = document.createElement("div");
buttonMitMenue.classList.add("button_mit_menue");
const paraButton = document.createElement("p");
const buttonEntfernen = document.createElement("a");
buttonEntfernen.classList.add("button_entfernen");
buttonEntfernen.innerText = "Entfernen";
buttonEntfernen.setAttribute("href", "#");
const menue = document.createElement("input");
menue.setAttribute("type", "number");
menue.setAttribute("id", "menue");
menue.setAttribute("value", produkt.anzahl);
menue.setAttribute("max", produkt.anzahl);
menue.setAttribute("min", "0");
menue.setAttribute("pattern", "[0-9]*");
paraButton.appendChild(buttonEntfernen);
buttonMitMenue.appendChild(paraButton);
buttonMitMenue.appendChild(menue);
const gesamtPreis = document.createElement("p");
gesamtPreis.classList.add("gesamtbetrag");
const gesamtPreisText = document.createTextNode("Betrag Gesamt (inkl. MwSt): " + ((produkt.preis * produkt.anzahl).toFixed(2)));
gesamtPreis.appendChild(gesamtPreisText);
warenkorbDiv.appendChild(produktDetails);
warenkorbDiv.appendChild(gesamtPreis);
warenkorbDiv.appendChild(buttonMitMenue);
const warenkorbContainer = document.querySelector(".warenkorb-container");
warenkorbContainer.appendChild(warenkorbDiv);
buttonEntfernen.addEventListener("click", function (event) {
if (produkt.anzahl > 1) {
produkt.anzahl--;
localStorage.setItem("warenkorb", JSON.stringify(warenkorb));
} else {
entferneProdukt("kiwi");
console.log("Hier ausgabe vom Warenkorb:");
console.log(warenkorb);
const kiwiContainer = document.querySelector('[data-id="kiwi"]');
//Löschen vom warenkorbDiv
warenkorbContainer.removeChild(kiwiContainer);
}
location.reload(true);
});
} else if (produkt.id === "orangen") {
const warenkorbDiv = document.createElement("div");
warenkorbDiv.setAttribute("data-id", "orangen");
warenkorbDiv.classList.add("produkte_warenkorb");
const produktBild = document.createElement("img");
produktBild.src = "pictures/orangen_ohne_preis.png.avif";
produktBild.alt = produkt.id;
warenkorbDiv.appendChild(produktBild);
const produktDetails = document.createElement("div");
produktDetails.classList.add("produkte_details");
const produktBeschreibung = document.createTextNode("Orangen 1kg");
const produktPreis = document.createTextNode("Kosten: 2€");
const aufLager = document.createTextNode("Auf Lager: 350");
produktDetails.appendChild(produktBeschreibung);
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(produktPreis);
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(aufLager);
const buttonMitMenue = document.createElement("div");
buttonMitMenue.classList.add("button_mit_menue");
const paraButton = document.createElement("p");
const buttonEntfernen = document.createElement("a");
buttonEntfernen.classList.add("button_entfernen");
buttonEntfernen.innerText = "Entfernen";
buttonEntfernen.setAttribute("href", "#");
const menue = document.createElement("input");
menue.setAttribute("type", "number");
menue.setAttribute("id", "menue");
menue.setAttribute("value", produkt.anzahl);
menue.setAttribute("max", produkt.anzahl);
menue.setAttribute("min", "0");
menue.setAttribute("pattern", "[0-9]*");
paraButton.appendChild(buttonEntfernen);
buttonMitMenue.appendChild(paraButton);
buttonMitMenue.appendChild(menue);
const gesamtPreis = document.createElement("p");
gesamtPreis.classList.add("gesamtbetrag");
const gesamtPreisText = document.createTextNode("Betrag Gesamt (inkl. MwSt): " + ((produkt.preis * produkt.anzahl).toFixed(2)));
gesamtPreis.appendChild(gesamtPreisText);
warenkorbDiv.appendChild(produktDetails);
warenkorbDiv.appendChild(gesamtPreis);
warenkorbDiv.appendChild(buttonMitMenue);
const warenkorbContainer = document.querySelector(".warenkorb-container");
warenkorbContainer.appendChild(warenkorbDiv);
buttonEntfernen.addEventListener("click", function (event) {
if (produkt.anzahl > 1) {
produkt.anzahl--;
localStorage.setItem("warenkorb", JSON.stringify(warenkorb));
} else {
entferneProdukt("orangen");
console.log("Hier ausgabe vom Warenkorb:");
console.log(warenkorb);
const orangenContainer = document.querySelector('[data-id="orangen"]');
//Löschen vom warenkorbDiv
warenkorbContainer.removeChild(orangenContainer);
}
location.reload(true);
});
} else if (produkt.id === "äpfel") {
const warenkorbDiv = document.createElement("div");
warenkorbDiv.setAttribute("data-id", "äpfel");
warenkorbDiv.classList.add("produkte_warenkorb");
const produktBild = document.createElement("img");
produktBild.src = "pictures/äpfel_ohne_preis.png.avif"
produktBild.alt = produkt.id;
warenkorbDiv.appendChild(produktBild);
const produktDetails = document.createElement("div");
produktDetails.classList.add("produkte_details");
const produktBeschreibung = document.createTextNode("Äpfel 1kg");
const produktPreis = document.createTextNode("Kosten: 2€");
const aufLager = document.createTextNode("Auf Lager: 500");
produktDetails.appendChild(produktBeschreibung);
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(produktPreis);
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(aufLager);
const buttonMitMenue = document.createElement("div");
buttonMitMenue.classList.add("button_mit_menue");
const paraButton = document.createElement("p");
const buttonEntfernen = document.createElement("a");
buttonEntfernen.classList.add("button_entfernen");
buttonEntfernen.innerText = "Entfernen";
buttonEntfernen.setAttribute("href", "#");
const menue = document.createElement("input");
menue.setAttribute("type", "number");
menue.setAttribute("id", "menue");
menue.setAttribute("value", produkt.anzahl);
menue.setAttribute("max", produkt.anzahl);
menue.setAttribute("min", "0");
menue.setAttribute("pattern", "[0-9]*");
paraButton.appendChild(buttonEntfernen);
buttonMitMenue.appendChild(paraButton);
buttonMitMenue.appendChild(menue);
const gesamtPreis = document.createElement("p");
gesamtPreis.classList.add("gesamtbetrag");
const gesamtPreisText = document.createTextNode("Betrag Gesamt (inkl. MwSt): " + ((produkt.preis * produkt.anzahl).toFixed(2)));
gesamtPreis.appendChild(gesamtPreisText);
warenkorbDiv.appendChild(produktDetails);
warenkorbDiv.appendChild(gesamtPreis);
warenkorbDiv.appendChild(buttonMitMenue);
const warenkorbContainer = document.querySelector(".warenkorb-container");
warenkorbContainer.appendChild(warenkorbDiv);
buttonEntfernen.addEventListener("click", function (event) {
if (produkt.anzahl > 1) {
produkt.anzahl--;
localStorage.setItem("warenkorb", JSON.stringify(warenkorb));
} else {
entferneProdukt("äpfel");
console.log("Hier ausgabe vom Warenkorb:");
console.log(warenkorb);
const apfelContainer = document.querySelector('[data-id="äpfel"]');
//Löschen vom warenkorbDiv
warenkorbContainer.removeChild(apfelContainer);
}
location.reload(true);
});
}
}
const contentContainer = document.querySelector(".content");
const äußererContainer = document.createElement("div");
äußererContainer.classList.add("äußererContainer");
const kostenContainer = document.createElement("div");
kostenContainer.classList.add("kostenContainer");
const lieferkostenText = document.createElement("p");
lieferkostenText.classList.add("lieferkosten_text");
lieferkostenText.innerText = "Lieferkosten:";
const lieferkostenPreis = document.createElement("p");
lieferkostenPreis.classList.add("lieferkosten_preis");
lieferkostenPreis.innerText = "2.90€";
const preisZusammen = ermittleGesamtpreis() + 2.9;
const gesamtPreisText = document.createElement("p");
gesamtPreisText.classList.add("gesamtkosten_text")
gesamtPreisText.innerText = "Gesamtkosten (inkl. MwSt): ";
const gesamtPreis = document.createElement("p");
gesamtPreis.classList.add("gesamtpreis");
gesamtPreis.innerText = "" + preisZusammen.toFixed(2) + "€";
const buttonBestellungAbschließen = document.createElement("div");
const buttonBestellungAbschließenAnchor = document.createElement("a");
buttonBestellungAbschließenAnchor.classList.add("button_bestellung_abschließen");
buttonBestellungAbschließenAnchor.setAttribute("href", "bestellformular.html");
buttonBestellungAbschließenAnchor.innerText = "Kostenpflichtig bestellen";
console.log(preisZusammen);
localStorage.setItem("gesamtpreis", preisZusammen);
if (warenkorb.length === 0) {
const warenkorbLeer = document.createElement("p");
warenkorbLeer.classList.add("warenkorbLeer");
warenkorbLeer.innerText = "Der Warenkorb ist zur Zeit leer.";
contentContainer.appendChild(warenkorbLeer);
if (/^[0-9]+$/.test(testVar) === false) {
zeigeHinweisfenster("Keine gültige Zahl eingegeben.");
} else {
contentContainer.appendChild(äußererContainer);
äußererContainer.appendChild(kostenContainer);
kostenContainer.appendChild(lieferkostenText);
kostenContainer.appendChild(lieferkostenPreis);
kostenContainer.appendChild(gesamtPreisText);
kostenContainer.appendChild(gesamtPreis);
buttonBestellungAbschließen.appendChild(buttonBestellungAbschließenAnchor);
äußererContainer.appendChild(buttonBestellungAbschließen);
}
}
function ermittleGesamtpreis() {
var preis = 0;
const warenkorb = JSON.parse(localStorage.getItem("warenkorb")) || [];
console.log(warenkorb);
for (produkt of warenkorb) {
preis += produkt.preis * produkt.anzahl;
}
return preis;
}
function entferneProdukt(produktID) {
const warenkorb = JSON.parse(localStorage.getItem("warenkorb")) || [];
for (let i = 0; i < warenkorb.length; i++) {
if (warenkorb[i].id === produktID) {
warenkorb.splice(i, 1)// entferne das Element aus dem Array
let verringereUm = parseInt(inputElement.value);
break; // breche die Schleife ab, da das Element gefunden wurde
if ((standardWerte[index - 1] - verringereUm) < 0) {
zeigeHinweisfenster("Der Wert darf nicht negativ sein.");
} else {
zeigeHinweisfenster("");
let aktuellerWert = standardWerte[index - 1] - verringereUm;
standardWerte[index - 1] = aktuellerWert;
inputElement.value = aktuellerWert;
}
}
localStorage.setItem("warenkorb", JSON.stringify(warenkorb)); // speichere das aktualisierte Array im LocalStorage
berechnePreise();
}
function berechnePreise() {
for (let i = 0; i < standardWerte.length; i++) {
let preisID = 'gesamtbetrag' + (i + 1);
let preisElement = document.getElementById(preisID);
let preisEinzeln = (standardWerte[i] * preise[i]).toFixed(2);
preisElement.innerText = "Betrag Gesamt (inkl. MwSt.): " + preisEinzeln + '€';
}
gesamtpreis = ((standardWerte[0] * preise[0]) + (standardWerte[1] * preise[1]) + (standardWerte[2] * preise[2])) + 2.90;
let gesamtkostenText = document.getElementById("gesamtpreis");
gesamtkostenText.innerText = gesamtpreis.toFixed(2) + "€";
localStorage.setItem("gesamtpreis", gesamtpreis);
}
// prüfe, ob der Benutzer sich auf der warenkorb.html-Seite befindet und erstelle das DIV
document.addEventListener("DOMContentLoaded", function () {
// prüfe, ob der Benutzer sich auf der warenkorb.html-Seite befindet und erstelle das DIV
if (window.location.pathname.includes("/warenkorb.html")) {
const warenkorb = JSON.parse(localStorage.getItem("warenkorb")) || [];
createWarenkorbDiv(warenkorb);
function zeigeHinweisfenster(text) {
var hinweisfenster = document.getElementById("notification");
hinweisfenster.innerText = text;
if (text !== "") {
hinweisfenster.style.display = "block";
} else {
hinweisfenster.style.display = "none";
}
});
}

0
public/pictures/äpfel.png → public/pictures/aepfel.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 140 KiB

After

Width:  |  Height:  |  Size: 140 KiB

0
public/pictures/äpfel_ohne_preis.png.avif → public/pictures/aepfel_ohne_preis.png.avif
View File

2
public/produkte.html
View File

@ -135,7 +135,7 @@
</div>
<div class="produkte">
<img src="pictures/äpfel.png" width = "300" height="300" alt="Äpfel" data-id="äpfel">
<img src="pictures/aepfel.png" width = "300" height="300" alt="Äpfel" data-id="äpfel">
<div class ="produktbottom">
<img src ="pictures/FoodAmpel_gelb.png" width ="50" height="50" alt="FoodAmpel gelb">
<select name="quantity">

69
public/warenkorb.html
View File

@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Warenkorb</title>
<style>
@import 'css/mobile.css' (max-width: 480px);
@import 'css/desktop.css' (min-width: 481px);
@import 'css/mobile.css'(max-width: 480px);
@import 'css/desktop.css'(min-width: 481px);
</style>
<script src="javascript/warenkorb.js"></script>
</head>
@ -16,8 +16,8 @@
<header>
<nav>
<div class="navbar-mobile">
<div class="nav-container" >
<input class="checkbox" type="checkbox" name="" id="" />
<div class="nav-container">
<input class="checkbox" type="checkbox" name="" id="" />
<div class="hamburger-lines">
<span class="line line1"></span>
<span class="line line2"></span>
@ -40,14 +40,15 @@
</div>
<div id="header-mobile-farbe" class="header-mobile-logo">
<a href="index.html">
<img src="pictures/logo_secondharvest_transparent.png" width="120" alt="Second Harvest Logo"></a>
<img src="pictures/logo_secondharvest_transparent.png" width="120"
alt="Second Harvest Logo"></a>
</div>
</div>
</nav>
<nav>
<nav>
<div class="header_logo">
<a href="index.html">
<img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
<img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
</div>
<div class="header_desktop">
<h1>Second Harvest</h1>
@ -66,23 +67,61 @@
<div class="content">
<h1>Warenkorb</h1>
<!-- <div class="produkte_warenkorb">
<div class="produkte_warenkorb">
<img src="pictures/karotte_ohne_preis.webp" alt="karotten">
<div class="produkte_details">
<p><strong>Karotten 1kg</br>Kosten: 0,95€</strong></p>
</br>
<p>Auf Lager: xx</p>
<p>Auf Lager: 250</p>
</div>
<div class="button_mit_menue">
<p><a class="button_entfernen" href="produkte.html">Entfernen</a></p>
<input type="number" id="menue" min="0" pattern="[0-9]*">
<p><a class="button_entfernen" href="#" id="button1" onclick="entferneAusWarenkorb(1)">Entfernen</a></p>
<input type="text" id="menue1" value="10">
<div id="notification"></div>
</div>
<p class="gesamtbetrag"><strong>Betrag Gesamt (inkl. MwSt.) : xx€</strong></p>
</div> -->
<div class="warenkorb-container"></div>
<!-- <p class="lieferkosten">Lieferkosten +2.90€</br>Gesamtkosten (inkl. MwSt.):</p> -->
<p class="gesamtbetrag1" id="gesamtbetrag1"></p>
</div>
<div class="produkte_warenkorb">
<img src="pictures/aepfel_ohne_preis.png.avif" alt="aepfel">
<div class="produkte_details">
<p><strong>Äpfel 1kg</br>Kosten: 2€</strong></p>
</br>
<p>Auf Lager: 500</p>
</div>
<div class="button_mit_menue">
<p><a class="button_entfernen" href="#" id="button2" onclick="entferneAusWarenkorb(2)">Entfernen</a></p>
<input type="text" id="menue2" value="10">
<div id="notification"></div>
</div>
<p class="gesamtbetrag2" id="gesamtbetrag2"></p>
</div>
<div class="produkte_warenkorb">
<img src="pictures/sellerie_ohne_preis.webp" alt="sellerie">
<div class="produkte_details">
<p><strong>Sellerie 1 Stück</br>Kosten: 1,10€</strong></p>
</br>
<p>Auf Lager: 1000</p>
</div>
<div class="button_mit_menue">
<p><a class="button_entfernen" href="#" id="button3" onclick="entferneAusWarenkorb(3)">Entfernen</a></p>
<input type="text" id="menue3" value="10">
<div id="notification"></div>
</div>
<p class="gesamtbetrag3" id="gesamtbetrag3"></p>
</div>
<div class="äußererContainer">
<div class="kostenContainer">
<p class="lieferkosten_text">Lieferkosten:</p>
<p class="lieferkosten_preis">2,90€</p>
<p class="gesamtkosten_text">Gesamtkosten (inkl. MwSt): </p>
<p class="gesamtpreis" id="gesamtpreis"></p>
</div>
<div>
<a class="button_bestellung_abschließen" href="bestellformular.html">Kostenpflichtig bestellen</a>
</div>
</div>
</div>
<footer>