Berufsschule/Webshop
Berufsschule/Webshop
Template
5
2
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases 3 Wiki Activity

warenkorb überarbeitet

Browse Source
This commit is contained in:
florianspengler 2025-04-29 14:29:12 +02:00
parent 482d7559d8
commit f99c8d11ab
13 changed files with 507 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
public/Warenkorb/warenkorb.html
View File

@ -11,28 +11,144 @@
<!-- Header wird hier dynamisch geladen -->
<div id="header-placeholder"></div>
<div class="warenkorb">
<h2>🛒 Dein Warenkorb</h2>
<div class="item">
<div class="info">
<span class="name">Produkt 1</span>
</div>
<button class="remove">Entfernen</button>
</div>
<div class="item">
<div class="info">
<span class="name">Produkt 2</span>
</div>
<button class="remove">Entfernen</button>
</div>
<div class="summary">
</div>
<button class="zurKasse">Zur Kasse gehen</button>
<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>
<!-- 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>
</body>
</html>

64
public/bestellformular/bestellformular.html
View File

@ -19,13 +19,13 @@
<h2>Bestellformular</h2>
<label for="vorname">Vorname:</label>
<input type="text" id="Vorname" name="Vorname" required placeholder="Vorname">
<input type="text" id="Vorname" name="Vorname" required placeholder=" - Vorname -" readonly>
<label for="nachname">Nachname:</label>
<input type="text" id="Nachname" name="Nachname" required placeholder="Nachname">
<input type="text" id="Nachname" name="Nachname" required placeholder="- Nachname -" readonly>
<label for="kundenNr">Kunden Nr.:</label>
<input type="text" id="KundenNr" name="KundenNr" required placeholder="Kunden Nr.">
<input type="text" id="KundenNr" name="KundenNr" required placeholder="- Kunden Nr. -" readonly>
<label for="strasse">Straße:</label>
<input type="text" id="strasse" name="strasse" required placeholder="Strasse">
@ -37,12 +37,6 @@
<input type="text" id="ort" name="ort" required placeholder="Ort">
<label for="ArtikelNr">Artikel Nr.:</label>
<div class="Artikel">
<button type="button" class="loeschen-button" onclick="loescheArtikel(this)">x</button>
<input type="text" class="ArtikelNrText" id="ArtikelNr" name="ArtikelNr" required placeholder="Artikel Nr.">
<input type="text" class="StueckzahlText" id="Stueckzahl" name="Stueckzahl" required placeholder="Anzahl">
<div class="verfuegbarkeit"></div>
</div>
<style>
.Artikel{
@ -76,6 +70,11 @@
max-width: 20%;
padding-left: 2.5%;
}
#KundenNr, #Vorname, #Nachname{
background-color: #F5F5F5;
border: none;
}
</style>
<a class="button-submit" id="sendOrder">Bestellung absenden</a>
</form>
@ -83,10 +82,32 @@
</main>
<script>
const user_id = sessionStorage.getItem('user_id');
const email = sessionStorage.getItem('email');
const vorname = sessionStorage.getItem('vorname');
const nachname = sessionStorage.getItem('nachname');
document.addEventListener('DOMContentLoaded', function () {
const formular = document.getElementById('bestellform');
const kundenNrInput = document.getElementById('KundenNr');
const VornameInput = document.getElementById('Vorname');
const NachnameInput = document.getElementById('Nachname');
if (kundenNrInput, VornameInput, NachnameInput) {
kundenNrInput.value = user_id;
VornameInput.value = vorname;
NachnameInput.value = nachname;
}
console.log("User ID from sessionStorage:", user_id);
console.log("E-Mail from sessionStorage:", email);
console.log("Vorname from sessionStorage:", vorname);
console.log("Nachname from sessionStorage:", nachname);
const sendButton = document.getElementById('sendOrder');
let artikelVerfuegbarkeiten = [];
ladeWarenkorb();
// Bestellung absenden
sendButton.addEventListener('click', async function (event) {
@ -251,6 +272,31 @@
artikelDiv.remove();
}
function ladeWarenkorb() {
// RICHTIG lesen: aus localStorage (nicht sessionStorage!)
const warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
const formular = document.getElementById('bestellform');
const sendButton = document.getElementById('sendOrder');
if (warenkorb.length === 0) {
console.log('Kein Warenkorb gefunden oder Warenkorb ist leer.');
return;
}
warenkorb.forEach(produkt => {
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>
`;
formular.insertBefore(artikelDiv, sendButton);
});
}
</script>
<!-- Footer wird dynamisch geladen -->
<div id="footer"></div>

2
public/header_footer/header.html
View File

@ -10,7 +10,7 @@
<a href="/warenkorb" class="cart">
<i class='bx bx-cart'></i>
<span class="cart-count">0</span>
<span class="cart-count" id="cart-count">0</span>
</a>
</div>
</div>

2
public/login/login.html
View File

@ -51,6 +51,8 @@
if (response.ok) {
const data = await response.json();
sessionStorage.setItem("user_id", data.id)
sessionStorage.setItem("vorname", data.name)
sessionStorage.setItem("nachname", data.lower_name)
alert('Login erfolgreich!');
window.location.href = '/'; // Redirect to home page after login
} else {

2
public/registrieren/registrieren.html
View File

@ -76,6 +76,8 @@
if (response.ok) {
const data = await response.json();
sessionStorage.setItem("user_id", data.id)
sessionStorage.setItem("vorname", data.name)
sessionStorage.setItem("nachname", data.lower_name)
alert('Nutzer erfolgreich hinzugefügt! Ihre Kundennummer: ' + data.id)
window.location.href= '/'
} else {

58
public/shop/shop.html
View File

@ -27,35 +27,65 @@
<div id="footer"></div>
<script>
// Funktion zum Hinzufügen zum Warenkorb
function zumWarenkorbHinzufuegen(product) {
let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
const existingProduct = warenkorb.find(p => p.product_id === product.id);
if (existingProduct) {
existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
} else {
warenkorb.push({
product_id: product.id,
product_name: product.name,
price: product.price,
quantity: 1
});
}
localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
zeigeWarenkorbAnzahl();
}
// Produkte laden
fetch('/api/products')
.then(res => res.json())
.then(products => {
const container = document.getElementById('products');
container.innerHTML = ''; // sicherheitshalber leeren
container.innerHTML = '';
products.forEach(product => {
const card = document.createElement('div');
card.classList.add('card');
card.innerHTML = `
<img src="${product.image_url}" alt="${product.name}">
<h3>${product.name}</h3>
<p>Preis: ${product.price}€</p>
<p>${product.description}</p>
<p>Artikel Nr: ${product.id}</p>
<button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
`;
<img src="${product.image_url}" alt="${product.name}">
<h3>${product.name}</h3>
<p>Preis: ${product.price.toFixed(2)} €</p>
<p>${product.description}</p>
<p>Artikel Nr: ${product.id}</p>
<button class="add-to-cart">Zum Warenkorb hinzufügen</button>
`;
const addToCartButton = card.querySelector('.add-to-cart');
addToCartButton.addEventListener('click', () => {
zumWarenkorbHinzufuegen(product);
});
container.appendChild(card);
});
})
.catch(err => {
console.error('Fehler beim Laden der Shop_Produkte:', err);
console.error('Fehler beim Laden der Produkte:', err);
const container = document.getElementById('products');
container.innerHTML =
`<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`;
container.innerHTML = `
<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`;
});
</script>
</body>

57
public/shop/shop_lkw.html
View File

@ -29,36 +29,65 @@
</div>
<script>
// Funktion zum Hinzufügen zum Warenkorb
function zumWarenkorbHinzufuegen(product) {
let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
const existingProduct = warenkorb.find(p => p.product_id === product.id);
if (existingProduct) {
existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
} else {
warenkorb.push({
product_id: product.id,
product_name: product.name,
price: product.price,
quantity: 1
});
}
localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
zeigeWarenkorbAnzahl();
}
// Produkte laden
fetch('/api/products/lkw')
.then(res => res.json())
.then(products => {
const container = document.getElementById('products_lkw');
container.innerHTML = ''; // sicherheitshalber leeren
container.innerHTML = '';
products.forEach(product => {
const card = document.createElement('div');
card.classList.add('card');
card.innerHTML = `
const card = document.createElement('div');
card.classList.add('card');
card.innerHTML = `
<img src="${product.image_url}" alt="${product.name}">
<h3>${product.name}</h3>
<p>Preis: ${product.price}€</p>
<p>Preis: ${product.price.toFixed(2)} €</p>
<p>${product.description}</p>
<p>Artikel Nr: ${product.id}</p>
<button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
<button class="add-to-cart">Zum Warenkorb hinzufügen</button>
`;
container.appendChild(card);
const addToCartButton = card.querySelector('.add-to-cart');
addToCartButton.addEventListener('click', () => {
zumWarenkorbHinzufuegen(product);
});
container.appendChild(card);
});
})
.catch(err => {
console.error('Fehler beim Laden der LKW_Produkte:', err);
console.error('Fehler beim Laden der Produkte:', err);
const container = document.getElementById('products_lkw');
container.innerHTML =
`<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div> `;
container.innerHTML = `
<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`;
});
</script>

61
public/shop/shop_motorrad.html
View File

@ -26,34 +26,65 @@
<script>
fetch('/api/products/motorrad')
.then(res => res.json())
.then(products => {
// Funktion zum Hinzufügen zum Warenkorb
function zumWarenkorbHinzufuegen(product) {
let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
const existingProduct = warenkorb.find(p => p.product_id === product.id);
if (existingProduct) {
existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
} else {
warenkorb.push({
product_id: product.id,
product_name: product.name,
price: product.price,
quantity: 1
});
}
localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
zeigeWarenkorbAnzahl();
}
// Produkte laden
fetch('/api/products/motorrad')
.then(res => res.json())
.then(products => {
const container = document.getElementById('products_motorrad');
container.innerHTML = ''; // sicherheitshalber leeren
container.innerHTML = '';
products.forEach(product => {
const card = document.createElement('div');
card.classList.add('card');
card.innerHTML = `
const card = document.createElement('div');
card.classList.add('card');
card.innerHTML = `
<img src="${product.image_url}" alt="${product.name}">
<h3>${product.name}</h3>
<p>Preis: ${product.price}€</p>
<p>Preis: ${product.price.toFixed(2)} €</p>
<p>${product.description}</p>
<p>Artikel Nr: ${product.id}</p>
<button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
<button class="add-to-cart">Zum Warenkorb hinzufügen</button>
`;
container.appendChild(card);
const addToCartButton = card.querySelector('.add-to-cart');
addToCartButton.addEventListener('click', () => {
zumWarenkorbHinzufuegen(product);
});
container.appendChild(card);
});
})
.catch(err => {
console.error('Fehler beim Laden der Motorrad_Produkte:', err);
console.error('Fehler beim Laden der Produkte:', err);
const container = document.getElementById('products_motorrad');
container.innerHTML = `
<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`;
<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`;
});
</script>

63
public/shop/shop_oldtimer.html
View File

@ -29,34 +29,65 @@
</div>
<script>
// Funktion zum Hinzufügen zum Warenkorb
function zumWarenkorbHinzufuegen(product) {
let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
const existingProduct = warenkorb.find(p => p.product_id === product.id);
if (existingProduct) {
existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
} else {
warenkorb.push({
product_id: product.id,
product_name: product.name,
price: product.price,
quantity: 1
});
}
localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
zeigeWarenkorbAnzahl();
}
// Produkte laden
fetch('/api/products/oldtimer')
.then(res => res.json())
.then(products => {
const container = document.getElementById('products_oldtimer');
container.innerHTML = ''; // sicherheitshalber leeren
.then(res => res.json())
.then(products => {
const container = document.getElementById('products_oldtimer');
container.innerHTML = '';
products.forEach(product => {
const card = document.createElement('div');
card.classList.add('card');
card.innerHTML = `
<img src="${product.image_url}" alt="${product.name}">
<h3>${product.name}</h3>
<p>Preis: ${product.price}€</p>
<p>${product.description}</p>
<p>Artikel Nr: ${product.id}</p>
<button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
`;
<img src="${product.image_url}" alt="${product.name}">
<h3>${product.name}</h3>
<p>Preis: ${product.price.toFixed(2)} €</p>
<p>${product.description}</p>
<p>Artikel Nr: ${product.id}</p>
<button class="add-to-cart">Zum Warenkorb hinzufügen</button>
`;
const addToCartButton = card.querySelector('.add-to-cart');
addToCartButton.addEventListener('click', () => {
zumWarenkorbHinzufuegen(product);
});
container.appendChild(card);
});
})
.catch(err => {
console.error('Fehler beim Laden der Oldtimer_Produkte:', err);
console.error('Fehler beim Laden der Produkte:', err);
const container = document.getElementById('products_oldtimer');
container.innerHTML = `
<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`;
<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`;
});
</script>
</body>

71
public/shop/shop_sportwagen.html
View File

@ -29,36 +29,65 @@
</div>
<script>
fetch('/api/products/sportwagen')
.then(res => res.json())
.then(products => {
// Funktion zum Hinzufügen zum Warenkorb
function zumWarenkorbHinzufuegen(product) {
let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
const existingProduct = warenkorb.find(p => p.product_id === product.id);
if (existingProduct) {
existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
} else {
warenkorb.push({
product_id: product.id,
product_name: product.name,
price: product.price,
quantity: 1
});
}
localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
zeigeWarenkorbAnzahl();
}
// Produkte laden
fetch('/api/products/sportwagen')
.then(res => res.json())
.then(products => {
const container = document.getElementById('products_sportwagen');
container.innerHTML = '';
products.forEach(product => {
const card = document.createElement('div');
card.classList.add('card');
card.innerHTML = `
<img src="${product.image_url}" alt="${product.name}">
<h3>${product.name}</h3>
<p>Preis: ${product.price}€</p>
<p>${product.description}</p>
<p>Artikel Nr: ${product.id}</p>
<button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
`;
container.appendChild(card);
const card = document.createElement('div');
card.classList.add('card');
card.innerHTML = `
<img src="${product.image_url}" alt="${product.name}">
<h3>${product.name}</h3>
<p>Preis: ${product.price.toFixed(2)} €</p>
<p>${product.description}</p>
<p>Artikel Nr: ${product.id}</p>
<button class="add-to-cart">Zum Warenkorb hinzufügen</button>
`;
const addToCartButton = card.querySelector('.add-to-cart');
addToCartButton.addEventListener('click', () => {
zumWarenkorbHinzufuegen(product);
});
container.appendChild(card);
});
})
.catch(err => {
console.error('Fehler beim Laden der Sportwagen_Produkte:', err);
console.error('Fehler beim Laden der Produkte:', err);
const container = document.getElementById('products_sportwagen');
container.innerHTML =
`<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div> `;
container.innerHTML = `
<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`;
});
</script>

90
public/startseite/startseite.html
View File

@ -30,40 +30,66 @@
<!-- JavaScript zum Abrufen und Anzeigen der neuesten Produkte -->
<script>
// API-Aufruf
fetch('/api/products/new')
// Antwort als JSON parsen
.then(res => res.json())
.then(products => {
const container = document.getElementById('latest-products');
container.innerHTML = ''; // sicherheitshalber leeren
// Funktion zum Hinzufügen zum Warenkorb
function zumWarenkorbHinzufuegen(product) {
let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
// Für jedes Produkt eine Karte erzeugen
products.forEach(product => {
const card = document.createElement('div');
card.classList.add('card');
// HTML-Inhalt der Karte mit Produktdaten füllen
card.innerHTML = `
<img src="${product.image_url}" alt="${product.name}">
<h3>${product.name}</h3>
<p>Preis: ${product.price}€</p>
<p>${product.description}</p>
<button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
`;
// Karte in Container einfügen
container.appendChild(card);
});
})
.catch(err => {
console.error('Fehler beim Laden der neuesten Produkte:', err);
const existingProduct = warenkorb.find(p => p.product_id === product.id);
const container = document.getElementById('latest-products');
container.innerHTML =
`<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`;
});
if (existingProduct) {
existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
} else {
warenkorb.push({
product_id: product.id,
product_name: product.name,
price: product.price,
quantity: 1
});
}
localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
zeigeWarenkorbAnzahl();
}
// Produkte laden
fetch('/api/products/new')
.then(res => res.json())
.then(products => {
const container = document.getElementById('latest-products');
container.innerHTML = '';
products.forEach(product => {
const card = document.createElement('div');
card.classList.add('card');
card.innerHTML = `
<img src="${product.image_url}" alt="${product.name}">
<h3>${product.name}</h3>
<p>Preis: ${product.price.toFixed(2)} €</p>
<p>${product.description}</p>
<p>Artikel Nr: ${product.id}</p>
<button class="add-to-cart">Zum Warenkorb hinzufügen</button>
`;
const addToCartButton = card.querySelector('.add-to-cart');
addToCartButton.addEventListener('click', () => {
zumWarenkorbHinzufuegen(product);
});
container.appendChild(card);
});
})
.catch(err => {
console.error('Fehler beim Laden der Produkte:', err);
const container = document.getElementById('latest-products');
container.innerHTML = `
<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`;
});
</script>

18
scripts/einfügenHeaderFooter.js
View File

@ -9,6 +9,9 @@ document.addEventListener("DOMContentLoaded", () => {
})
.then(data => {
headerTarget.innerHTML = data;
// 🚀 WICHTIG: Jetzt den Warenkorb zählen, nachdem der Header geladen ist!
zeigeWarenkorbAnzahl();
})
.catch(error => {
headerTarget.innerHTML = `
@ -38,4 +41,19 @@ document.addEventListener("DOMContentLoaded", () => {
console.error(error);
});
}
window.zeigeWarenkorbAnzahl = function() {
const warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
let anzahl = 0;
warenkorb.forEach(produkt => {
anzahl += produkt.quantity;
});
const anzahlElement = document.getElementById('cart-count');
if (anzahlElement) {
anzahlElement.textContent = anzahl;
}
console.log('Warenkorb-Anzahl:', anzahl);
}
});

4
server.js
View File

@ -163,8 +163,10 @@ app.post('/api/user/login', (req, res) => {
req.session.userId = user.id;
req.session.email = user.email;
req.session.vorname = user.name;
req.session.nachname = user.lower_name;
res.json({message: 'Login erfolgreich', id: user.id})
res.json({message: 'Login erfolgreich', id: user.id, name: user.name, lower_name: user.lower_name})
})
})