543 lines
26 KiB
JavaScript
543 lines
26 KiB
JavaScript
|
var warenkorb = [];
|
||
|
|
if (window.location.pathname.includes("/produkte.html")) {
|
||
|
|
document.addEventListener("DOMContentLoaded", function () {
|
||
|
|
|
||
|
|
|
||
|
|
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
|
||
|
|
"aepfel": 2.0 //Preis für Aepfel
|
||
|
|
};
|
||
|
|
// Hole button1 - button6
|
||
|
|
for (let i = 1; i <= 6; i++) {
|
||
|
|
const button = document.getElementById("button" + i);
|
||
|
|
|
||
|
|
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 === "aepfel") {
|
||
|
|
const warenkorbDiv = document.createElement("div");
|
||
|
|
warenkorbDiv.setAttribute("data-id", "aepfel");
|
||
|
|
warenkorbDiv.classList.add("produkte_warenkorb");
|
||
|
|
const produktBild = document.createElement("img");
|
||
|
|
produktBild.src = "pictures/aepfel_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("aepfel");
|
||
|
|
console.log("Hier ausgabe vom Warenkorb:");
|
||
|
|
console.log(warenkorb);
|
||
|
|
const apfelContainer = document.querySelector('[data-id="aepfel"]');
|
||
|
|
//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);
|
||
|
|
} 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
|
||
|
|
|
||
|
|
break; // breche die Schleife ab, da das Element gefunden wurde
|
||
|
|
}
|
||
|
|
}
|
||
|
|
localStorage.setItem("warenkorb", JSON.stringify(warenkorb)); // speichere das aktualisierte Array im LocalStorage
|
||
|
|
}
|
||
|
|
|
||
|
|
// 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);
|
||
|
|
}
|
||
|
|
});
|