diff --git a/public/Warenkorb/warenkorb.html b/public/Warenkorb/warenkorb.html index 011faa7..7558a0c 100644 --- a/public/Warenkorb/warenkorb.html +++ b/public/Warenkorb/warenkorb.html @@ -1,154 +1,154 @@ - - Warenkorb - - - + + Warenkorb + + +
-
-

Dein Warenkorb

-
-
- -
+
+

Dein Warenkorb

+
+
+ +
+ .warenkorb-tabelle { + width: 100%; + border-collapse: collapse; + margin-top: 20px; + } + + .warenkorb-tabelle th, .warenkorb-tabelle td { + padding: 10px; + text-align: center; + border-bottom: 1px solid #ccc; + } + + .warenkorb-tabelle th { + background-color: #f8f8f8; + } + + .loeschen-button, .menge-button { + background-color: #ff4d4d; + border: none; + color: white; + padding: 5px 8px; + margin: 0 2px; + cursor: pointer; + border-radius: 5px; + font-size: 16px; + } + + .loeschen-button:hover, .menge-button:hover { + background-color: #e60000; + } + + .produkt-anzahl { + display: inline-block; + width: 30px; + text-align: center; + } + + document.addEventListener('DOMContentLoaded', function () { + ladeWarenkorb(); + + document.getElementById('zurKasseGehen').addEventListener('click', function() { + window.location.href = '/bestellformular'; // Deine Bestellformular-Seite + }); + }); + + function ladeWarenkorb() { + const warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || []; + const container = document.getElementById('warenkorb'); + const gesamtContainer = document.getElementById('gesamtpreis-container'); + + container.innerHTML = ''; + gesamtContainer.innerHTML = ''; + + if (warenkorb.length === 0) { + container.innerHTML = '

Dein Warenkorb ist leer.

'; + document.getElementById('zurKasseGehen').style.display = 'none'; + return; + } + + let gesamtpreis = 0; + + const table = document.createElement('table'); + table.className = 'warenkorb-tabelle'; + table.innerHTML = ` + + + Produkt + Preis (Stück) + Anzahl + Zwischensumme + Aktion + + + + `; + + const tbody = table.querySelector('tbody'); + + warenkorb.forEach((produkt, index) => { + const zwischensumme = produkt.price * produkt.quantity; + gesamtpreis += zwischensumme; + + const row = document.createElement('tr'); + row.innerHTML = ` + ${produkt.product_name} + ${produkt.price.toFixed(2)} € + + + ${produkt.quantity} + + + ${zwischensumme.toFixed(2)} € + + `; + tbody.appendChild(row); + }); + + container.appendChild(table); + + gesamtContainer.innerHTML = `

Gesamtsumme: ${gesamtpreis.toFixed(2)} €

`; + + if (window.zeigeWarenkorbAnzahl) { + window.zeigeWarenkorbAnzahl(); + } + } + + function entferneAusWarenkorb(index) { + let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || []; + + warenkorb.splice(index, 1); + localStorage.setItem('warenkorb', JSON.stringify(warenkorb)); + + ladeWarenkorb(); + } + + function aendereMenge(index, aenderung) { + let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || []; + + warenkorb[index].quantity += aenderung; + + if (warenkorb[index].quantity <= 0) { + warenkorb.splice(index, 1); // Produkt löschen, wenn Menge 0 oder kleiner + } + + localStorage.setItem('warenkorb', JSON.stringify(warenkorb)); + ladeWarenkorb(); + } + diff --git a/public/bestellformular/bestellformular.html b/public/bestellformular/bestellformular.html index ccff5aa..2c0904e 100644 --- a/public/bestellformular/bestellformular.html +++ b/public/bestellformular/bestellformular.html @@ -164,6 +164,7 @@ if (response.ok) { // Bestellung erfolgreich -> Weiterleitung + warenkorbLeeren(); window.location.href = "/bestellung"; } else { alert('Fehler: ' + result.message); @@ -297,6 +298,12 @@ }); } + function warenkorbLeeren() { + localStorage.removeItem('warenkorb'); // Oder: localStorage.setItem('warenkorb', '[]'); + ladeWarenkorb(); // Aktualisiert die Ansicht + if (window.zeigeWarenkorbAnzahl) zeigeWarenkorbAnzahl(); // Optional: Warenkorb-Zähler im Header aktualisieren + } +