123 lines
4.0 KiB
HTML
123 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Warenkorb</title>
|
|
<link rel="stylesheet" href="/Styles/Warenkorb/warenkorb.css">
|
|
<link rel="stylesheet" href="./Styles/styles-main.css">
|
|
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
|
|
<script src="/header_footer"></script>
|
|
</head>
|
|
<body>
|
|
<div class="wrapper">
|
|
<!-- Header wird hier dynamisch geladen -->
|
|
<div id="header"></div>
|
|
|
|
<main>
|
|
<section style="padding: 40px 20px;">
|
|
<h1>Dein Warenkorb</h1>
|
|
<div id="warenkorb"></div>
|
|
<div id="gesamtpreis-container" style="margin-top: 20px;"></div>
|
|
<button id="zurKasseGehen" class="btn" style="margin-top: 30px;">Zur Kasse gehen</button>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Footer wird dynamisch geladen -->
|
|
<div id="footer"></div>
|
|
</div>
|
|
|
|
<script>
|
|
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 = '<p>Dein Warenkorb ist leer.</p>';
|
|
document.getElementById('zurKasseGehen').style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
let gesamtpreis = 0;
|
|
|
|
const table = document.createElement('table');
|
|
table.className = 'warenkorb-tabelle';
|
|
table.innerHTML = `
|
|
<thead>
|
|
<tr>
|
|
<th>Produkt</th>
|
|
<th>Preis (Stück)</th>
|
|
<th>Anzahl</th>
|
|
<th>Zwischensumme</th>
|
|
<th>Aktion</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
`;
|
|
|
|
const tbody = table.querySelector('tbody');
|
|
|
|
warenkorb.forEach((produkt, index) => {
|
|
const zwischensumme = produkt.price * produkt.quantity;
|
|
gesamtpreis += zwischensumme;
|
|
|
|
const row = document.createElement('tr');
|
|
row.innerHTML = `
|
|
<td>${produkt.product_name}</td>
|
|
<td>${produkt.price.toFixed(2)} €</td>
|
|
<td>
|
|
<button class="menge-button" onclick="aendereMenge(${index}, -1)">-</button>
|
|
<span class="produkt-anzahl">${produkt.quantity}</span>
|
|
<button class="menge-button" onclick="aendereMenge(${index}, 1)">+</button>
|
|
</td>
|
|
<td>${zwischensumme.toFixed(2)} €</td>
|
|
<td><button onclick="entferneAusWarenkorb(${index})" class="loeschen-button">Entfernen</button></td>
|
|
`;
|
|
tbody.appendChild(row);
|
|
});
|
|
|
|
container.appendChild(table);
|
|
|
|
gesamtContainer.innerHTML = `<h3>Gesamtsumme: ${gesamtpreis.toFixed(2)} €</h3>`;
|
|
|
|
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();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|