Compare commits
2 Commits
f99c8d11ab
...
4113f06da3
| Author | SHA1 | Date | |
|---|---|---|---|
| 4113f06da3 | |||
| 6f8f4f65ba |
@ -1,154 +1,154 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Warenkorb</title>
|
<title>Warenkorb</title>
|
||||||
<link rel="stylesheet" href="/Styles/Warenkorb/warenkorb.css">
|
<link rel="stylesheet" href="/Styles/Warenkorb/warenkorb.css">
|
||||||
<link rel="stylesheet" href="./Styles/styles-main.css">
|
<link rel="stylesheet" href="./Styles/styles-main.css">
|
||||||
<script src="/header_footer"></script>
|
<script src="/header_footer"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- Header wird hier dynamisch geladen -->
|
<!-- Header wird hier dynamisch geladen -->
|
||||||
<div id="header-placeholder"></div>
|
<div id="header-placeholder"></div>
|
||||||
<div class="warenkorb">
|
<div class="warenkorb">
|
||||||
<main>
|
<main>
|
||||||
<h2>Dein Warenkorb</h2>
|
<h2>Dein Warenkorb</h2>
|
||||||
<div id="warenkorb"></div>
|
<div id="warenkorb"></div>
|
||||||
<div id="gesamtpreis-container"></div>
|
<div id="gesamtpreis-container"></div>
|
||||||
<button id="zurKasseGehen">Zur Kasse gehen</button>
|
<button id="zurKasseGehen">Zur Kasse gehen</button>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
<style>
|
<style>
|
||||||
.warenkorb-tabelle {
|
.warenkorb-tabelle {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.warenkorb-tabelle th, .warenkorb-tabelle td {
|
.warenkorb-tabelle th, .warenkorb-tabelle td {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-bottom: 1px solid #ccc;
|
border-bottom: 1px solid #ccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.warenkorb-tabelle th {
|
.warenkorb-tabelle th {
|
||||||
background-color: #f8f8f8;
|
background-color: #f8f8f8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loeschen-button, .menge-button {
|
.loeschen-button, .menge-button {
|
||||||
background-color: #ff4d4d;
|
background-color: #ff4d4d;
|
||||||
border: none;
|
border: none;
|
||||||
color: white;
|
color: white;
|
||||||
padding: 5px 8px;
|
padding: 5px 8px;
|
||||||
margin: 0 2px;
|
margin: 0 2px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loeschen-button:hover, .menge-button:hover {
|
.loeschen-button:hover, .menge-button:hover {
|
||||||
background-color: #e60000;
|
background-color: #e60000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.produkt-anzahl {
|
.produkt-anzahl {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<!-- Footer wird dynamisch geladen -->
|
<!-- Footer wird dynamisch geladen -->
|
||||||
<div id="footer"></div>
|
<div id="footer"></div>
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
ladeWarenkorb();
|
ladeWarenkorb();
|
||||||
|
|
||||||
document.getElementById('zurKasseGehen').addEventListener('click', function() {
|
document.getElementById('zurKasseGehen').addEventListener('click', function() {
|
||||||
window.location.href = '/bestellformular'; // Deine Bestellformular-Seite
|
window.location.href = '/bestellformular'; // Deine Bestellformular-Seite
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
function ladeWarenkorb() {
|
function ladeWarenkorb() {
|
||||||
const warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
|
const warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
|
||||||
const container = document.getElementById('warenkorb');
|
const container = document.getElementById('warenkorb');
|
||||||
const gesamtContainer = document.getElementById('gesamtpreis-container');
|
const gesamtContainer = document.getElementById('gesamtpreis-container');
|
||||||
|
|
||||||
container.innerHTML = '';
|
container.innerHTML = '';
|
||||||
gesamtContainer.innerHTML = '';
|
gesamtContainer.innerHTML = '';
|
||||||
|
|
||||||
if (warenkorb.length === 0) {
|
if (warenkorb.length === 0) {
|
||||||
container.innerHTML = '<p>Dein Warenkorb ist leer.</p>';
|
container.innerHTML = '<p>Dein Warenkorb ist leer.</p>';
|
||||||
document.getElementById('zurKasseGehen').style.display = 'none';
|
document.getElementById('zurKasseGehen').style.display = 'none';
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
let gesamtpreis = 0;
|
let gesamtpreis = 0;
|
||||||
|
|
||||||
const table = document.createElement('table');
|
const table = document.createElement('table');
|
||||||
table.className = 'warenkorb-tabelle';
|
table.className = 'warenkorb-tabelle';
|
||||||
table.innerHTML = `
|
table.innerHTML = `
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Produkt</th>
|
<th>Produkt</th>
|
||||||
<th>Preis (Stück)</th>
|
<th>Preis (Stück)</th>
|
||||||
<th>Anzahl</th>
|
<th>Anzahl</th>
|
||||||
<th>Zwischensumme</th>
|
<th>Zwischensumme</th>
|
||||||
<th>Aktion</th>
|
<th>Aktion</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody></tbody>
|
<tbody></tbody>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const tbody = table.querySelector('tbody');
|
const tbody = table.querySelector('tbody');
|
||||||
|
|
||||||
warenkorb.forEach((produkt, index) => {
|
warenkorb.forEach((produkt, index) => {
|
||||||
const zwischensumme = produkt.price * produkt.quantity;
|
const zwischensumme = produkt.price * produkt.quantity;
|
||||||
gesamtpreis += zwischensumme;
|
gesamtpreis += zwischensumme;
|
||||||
|
|
||||||
const row = document.createElement('tr');
|
const row = document.createElement('tr');
|
||||||
row.innerHTML = `
|
row.innerHTML = `
|
||||||
<td>${produkt.product_name}</td>
|
<td>${produkt.product_name}</td>
|
||||||
<td>${produkt.price.toFixed(2)} €</td>
|
<td>${produkt.price.toFixed(2)} €</td>
|
||||||
<td>
|
<td>
|
||||||
<button class="menge-button" onclick="aendereMenge(${index}, -1)">-</button>
|
<button class="menge-button" onclick="aendereMenge(${index}, -1)">-</button>
|
||||||
<span class="produkt-anzahl">${produkt.quantity}</span>
|
<span class="produkt-anzahl">${produkt.quantity}</span>
|
||||||
<button class="menge-button" onclick="aendereMenge(${index}, 1)">+</button>
|
<button class="menge-button" onclick="aendereMenge(${index}, 1)">+</button>
|
||||||
</td>
|
</td>
|
||||||
<td>${zwischensumme.toFixed(2)} €</td>
|
<td>${zwischensumme.toFixed(2)} €</td>
|
||||||
<td><button onclick="entferneAusWarenkorb(${index})" class="loeschen-button">Entfernen</button></td>
|
<td><button onclick="entferneAusWarenkorb(${index})" class="loeschen-button">Entfernen</button></td>
|
||||||
`;
|
`;
|
||||||
tbody.appendChild(row);
|
tbody.appendChild(row);
|
||||||
});
|
});
|
||||||
|
|
||||||
container.appendChild(table);
|
container.appendChild(table);
|
||||||
|
|
||||||
gesamtContainer.innerHTML = `<h3>Gesamtsumme: ${gesamtpreis.toFixed(2)} €</h3>`;
|
gesamtContainer.innerHTML = `<h3>Gesamtsumme: ${gesamtpreis.toFixed(2)} €</h3>`;
|
||||||
|
|
||||||
if (window.zeigeWarenkorbAnzahl) {
|
if (window.zeigeWarenkorbAnzahl) {
|
||||||
window.zeigeWarenkorbAnzahl();
|
window.zeigeWarenkorbAnzahl();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function entferneAusWarenkorb(index) {
|
function entferneAusWarenkorb(index) {
|
||||||
let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
|
let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
|
||||||
|
|
||||||
warenkorb.splice(index, 1);
|
warenkorb.splice(index, 1);
|
||||||
localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
|
localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
|
||||||
|
|
||||||
ladeWarenkorb();
|
ladeWarenkorb();
|
||||||
}
|
}
|
||||||
|
|
||||||
function aendereMenge(index, aenderung) {
|
function aendereMenge(index, aenderung) {
|
||||||
let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
|
let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
|
||||||
|
|
||||||
warenkorb[index].quantity += aenderung;
|
warenkorb[index].quantity += aenderung;
|
||||||
|
|
||||||
if (warenkorb[index].quantity <= 0) {
|
if (warenkorb[index].quantity <= 0) {
|
||||||
warenkorb.splice(index, 1); // Produkt löschen, wenn Menge 0 oder kleiner
|
warenkorb.splice(index, 1); // Produkt löschen, wenn Menge 0 oder kleiner
|
||||||
}
|
}
|
||||||
|
|
||||||
localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
|
localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
|
||||||
ladeWarenkorb();
|
ladeWarenkorb();
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -164,6 +164,7 @@
|
|||||||
|
|
||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
// Bestellung erfolgreich -> Weiterleitung
|
// Bestellung erfolgreich -> Weiterleitung
|
||||||
|
warenkorbLeeren();
|
||||||
window.location.href = "/bestellung";
|
window.location.href = "/bestellung";
|
||||||
} else {
|
} else {
|
||||||
alert('Fehler: ' + result.message);
|
alert('Fehler: ' + result.message);
|
||||||
@ -255,7 +256,6 @@
|
|||||||
const neueArtikelDiv = document.createElement('div');
|
const neueArtikelDiv = document.createElement('div');
|
||||||
neueArtikelDiv.className = 'Artikel';
|
neueArtikelDiv.className = 'Artikel';
|
||||||
neueArtikelDiv.innerHTML = `
|
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="ArtikelNrText" name="ArtikelNr" required placeholder="Artikel Nr.">
|
||||||
<input type="text" class="StueckzahlText" name="Stueckzahl" required placeholder="Anzahl">
|
<input type="text" class="StueckzahlText" name="Stueckzahl" required placeholder="Anzahl">
|
||||||
<div class="verfuegbarkeit"></div>
|
<div class="verfuegbarkeit"></div>
|
||||||
@ -288,7 +288,6 @@
|
|||||||
const artikelDiv = document.createElement('div');
|
const artikelDiv = document.createElement('div');
|
||||||
artikelDiv.className = 'Artikel';
|
artikelDiv.className = 'Artikel';
|
||||||
artikelDiv.innerHTML = `
|
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="ArtikelNrText" name="ArtikelNr" value="${produkt.product_id}" required placeholder="Artikel Nr.">
|
||||||
<input type="text" class="StueckzahlText" name="Stueckzahl" value="${produkt.quantity}" required placeholder="Anzahl">
|
<input type="text" class="StueckzahlText" name="Stueckzahl" value="${produkt.quantity}" required placeholder="Anzahl">
|
||||||
<div class="verfuegbarkeit"></div>
|
<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>
|
</script>
|
||||||
<!-- Footer wird dynamisch geladen -->
|
<!-- Footer wird dynamisch geladen -->
|
||||||
<div id="footer"></div>
|
<div id="footer"></div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user