Bildernamen angepasst, Warenkorb.js neu #4
Binary file not shown.
|
|
@ -388,13 +388,17 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#menue {
|
#menue1,
|
||||||
|
#menue2,
|
||||||
|
#menue3 {
|
||||||
width: 35px;
|
width: 35px;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content .gesamtbetrag {
|
.content .gesamtbetrag1,
|
||||||
|
.content .gesamtbetrag2,
|
||||||
|
.content .gesamtbetrag3 {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: black;
|
color: black;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -403,12 +407,6 @@
|
||||||
right: 15px;
|
right: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gesamtbetrag {
|
|
||||||
position: absolute;
|
|
||||||
font-size: 1em;
|
|
||||||
bottom: 15px;
|
|
||||||
right: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button_hinzufuegen {
|
.button_hinzufuegen {
|
||||||
background-color: #9BB558;
|
background-color: #9BB558;
|
||||||
|
|
@ -455,6 +453,7 @@
|
||||||
padding-left: 50px;
|
padding-left: 50px;
|
||||||
margin-top: 22.5px;
|
margin-top: 22.5px;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
|
margin-right: 150px;
|
||||||
margin-bottom: 22.5px;
|
margin-bottom: 22.5px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: auto auto;
|
grid-template-rows: auto auto;
|
||||||
|
|
@ -463,7 +462,7 @@
|
||||||
.content .kostenContainer {
|
.content .kostenContainer {
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 300px;
|
width: 320px;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
|
|
@ -475,7 +474,7 @@
|
||||||
color: black;
|
color: black;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-left: 0px;
|
margin-left: 0px;
|
||||||
margin-right: 110px;
|
margin-right: 118px;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Binary file not shown.
|
|
@ -1,542 +1,52 @@
|
||||||
var warenkorb = [];
|
let standardWerte = [10, 10, 10];
|
||||||
if (window.location.pathname.includes("/produkte.html")) {
|
const preise = [0.95, 2.0, 1.10];
|
||||||
document.addEventListener("DOMContentLoaded", function () {
|
|
||||||
|
|
||||||
|
window.addEventListener('DOMContentLoaded', berechnePreise);
|
||||||
|
|
||||||
const produktpreise = {
|
function entferneAusWarenkorb(index) {
|
||||||
"karotte": 0.95, // Preis für Karotten
|
let inputId = 'menue' + index;
|
||||||
"sellerie": 1.10, // Preis für Sellerie
|
let inputElement = document.getElementById(inputId);
|
||||||
"birnen": 0.50, // Preis für Birnen
|
let testVar = inputElement.value;
|
||||||
"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);
|
|
||||||
|
|
||||||
button.addEventListener("click", function (event) {
|
if (/^[0-9]+$/.test(testVar) === false) {
|
||||||
// verhindern Sie das Standardverhalten des Links
|
zeigeHinweisfenster("Keine gültige Zahl eingegeben.");
|
||||||
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 {
|
} else {
|
||||||
entferneProdukt("karotte");
|
let verringereUm = parseInt(inputElement.value);
|
||||||
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");
|
if ((standardWerte[index - 1] - verringereUm) < 0) {
|
||||||
produktDetails.classList.add("produkte_details");
|
zeigeHinweisfenster("Der Wert darf nicht negativ sein.");
|
||||||
|
|
||||||
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 {
|
} else {
|
||||||
entferneProdukt("sellerie");
|
zeigeHinweisfenster("");
|
||||||
console.log("Hier ausgabe vom Warenkorb:");
|
let aktuellerWert = standardWerte[index - 1] - verringereUm;
|
||||||
console.log(warenkorb);
|
standardWerte[index - 1] = aktuellerWert;
|
||||||
const sellerieContainer = document.querySelector('[data-id="sellerie"]');
|
inputElement.value = aktuellerWert;
|
||||||
//Löschen vom warenkorbDiv
|
|
||||||
warenkorbContainer.removeChild(sellerieContainer);
|
|
||||||
}
|
}
|
||||||
location.reload(true);
|
}
|
||||||
});
|
berechnePreise();
|
||||||
} 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");
|
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 + '€';
|
||||||
|
|
||||||
const produktBeschreibung = document.createTextNode("Birne 0.5kg");
|
}
|
||||||
const produktPreis = document.createTextNode("Kosten: 0.50€");
|
gesamtpreis = ((standardWerte[0] * preise[0]) + (standardWerte[1] * preise[1]) + (standardWerte[2] * preise[2])) + 2.90;
|
||||||
const aufLager = document.createTextNode("Auf Lager: 500");
|
let gesamtkostenText = document.getElementById("gesamtpreis");
|
||||||
|
gesamtkostenText.innerText = gesamtpreis.toFixed(2) + "€";
|
||||||
|
localStorage.setItem("gesamtpreis", gesamtpreis);
|
||||||
|
}
|
||||||
|
|
||||||
produktDetails.appendChild(produktBeschreibung);
|
function zeigeHinweisfenster(text) {
|
||||||
produktDetails.appendChild(document.createElement("br"));
|
var hinweisfenster = document.getElementById("notification");
|
||||||
produktDetails.appendChild(produktPreis);
|
hinweisfenster.innerText = text;
|
||||||
produktDetails.appendChild(document.createElement("br"));
|
if (text !== "") {
|
||||||
produktDetails.appendChild(document.createElement("br"));
|
hinweisfenster.style.display = "block";
|
||||||
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 {
|
} else {
|
||||||
entferneProdukt("birnen");
|
hinweisfenster.style.display = "none";
|
||||||
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);
|
|
||||||
} 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);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 140 KiB After Width: | Height: | Size: 140 KiB |
|
|
@ -135,7 +135,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="produkte">
|
<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">
|
<div class ="produktbottom">
|
||||||
<img src ="pictures/FoodAmpel_gelb.png" width ="50" height="50" alt="FoodAmpel gelb">
|
<img src ="pictures/FoodAmpel_gelb.png" width ="50" height="50" alt="FoodAmpel gelb">
|
||||||
<select name="quantity">
|
<select name="quantity">
|
||||||
|
|
|
||||||
|
|
@ -40,7 +40,8 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="header-mobile-farbe" class="header-mobile-logo">
|
<div id="header-mobile-farbe" class="header-mobile-logo">
|
||||||
<a href="index.html">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
@ -66,23 +67,61 @@
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<h1>Warenkorb</h1>
|
<h1>Warenkorb</h1>
|
||||||
<!-- <div class="produkte_warenkorb">
|
<div class="produkte_warenkorb">
|
||||||
<img src="pictures/karotte_ohne_preis.webp" alt="karotten">
|
<img src="pictures/karotte_ohne_preis.webp" alt="karotten">
|
||||||
<div class="produkte_details">
|
<div class="produkte_details">
|
||||||
<p><strong>Karotten 1kg</br>Kosten: 0,95€</strong></p>
|
<p><strong>Karotten 1kg</br>Kosten: 0,95€</strong></p>
|
||||||
</br>
|
</br>
|
||||||
<p>Auf Lager: xx</p>
|
<p>Auf Lager: 250</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="button_mit_menue">
|
<div class="button_mit_menue">
|
||||||
<p><a class="button_entfernen" href="produkte.html">Entfernen</a></p>
|
<p><a class="button_entfernen" href="#" id="button1" onclick="entferneAusWarenkorb(1)">Entfernen</a></p>
|
||||||
<input type="number" id="menue" min="0" pattern="[0-9]*">
|
<input type="text" id="menue1" value="10">
|
||||||
|
<div id="notification"></div>
|
||||||
|
</div>
|
||||||
|
<p class="gesamtbetrag1" id="gesamtbetrag1"></p>
|
||||||
</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> -->
|
|
||||||
|
|
||||||
|
<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>
|
</div>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue