feature/Warenkorb #44
@ -1,154 +1,154 @@
|
||||
<!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">
|
||||
<script src="/header_footer"></script>
|
||||
<meta charset="UTF-8">
|
||||
<title>Warenkorb</title>
|
||||
<link rel="stylesheet" href="/Styles/Warenkorb/warenkorb.css">
|
||||
<link rel="stylesheet" href="./Styles/styles-main.css">
|
||||
<script src="/header_footer"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header wird hier dynamisch geladen -->
|
||||
<div id="header-placeholder"></div>
|
||||
<div class="warenkorb">
|
||||
<main>
|
||||
<h2>Dein Warenkorb</h2>
|
||||
<div id="warenkorb"></div>
|
||||
<div id="gesamtpreis-container"></div>
|
||||
<button id="zurKasseGehen">Zur Kasse gehen</button>
|
||||
</main>
|
||||
<main>
|
||||
<h2>Dein Warenkorb</h2>
|
||||
<div id="warenkorb"></div>
|
||||
<div id="gesamtpreis-container"></div>
|
||||
<button id="zurKasseGehen">Zur Kasse gehen</button>
|
||||
</main>
|
||||
</div>
|
||||
<style>
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
<!-- Footer wird dynamisch geladen -->
|
||||
<div id="footer"></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>
|
||||
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>
|
||||
|
||||
@ -164,6 +164,7 @@
|
||||
|
||||
if (response.ok) {
|
||||
// Bestellung erfolgreich -> Weiterleitung
|
||||
warenkorbLeeren();
|
||||
window.location.href = "/bestellung";
|
||||
} else {
|
||||
alert('Fehler: ' + result.message);
|
||||
@ -255,7 +256,6 @@
|
||||
const neueArtikelDiv = document.createElement('div');
|
||||
neueArtikelDiv.className = 'Artikel';
|
||||
neueArtikelDiv.innerHTML = `
|
||||
<button type="button" class="loeschen-button" onclick="loescheArtikel(this)">x</button>
|
||||
<input type="text" class="ArtikelNrText" name="ArtikelNr" required placeholder="Artikel Nr.">
|
||||
<input type="text" class="StueckzahlText" name="Stueckzahl" required placeholder="Anzahl">
|
||||
<div class="verfuegbarkeit"></div>
|
||||
@ -288,7 +288,6 @@
|
||||
const artikelDiv = document.createElement('div');
|
||||
artikelDiv.className = 'Artikel';
|
||||
artikelDiv.innerHTML = `
|
||||
<button type="button" class="loeschen-button" onclick="loescheArtikel(this)">x</button>
|
||||
<input type="text" class="ArtikelNrText" name="ArtikelNr" value="${produkt.product_id}" required placeholder="Artikel Nr.">
|
||||
<input type="text" class="StueckzahlText" name="Stueckzahl" value="${produkt.quantity}" required placeholder="Anzahl">
|
||||
<div class="verfuegbarkeit"></div>
|
||||
@ -297,6 +296,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
|
||||
}
|
||||
|
||||
</script>
|
||||
<!-- Footer wird dynamisch geladen -->
|
||||
<div id="footer"></div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user