Merge branch 'feature/Warenkorb' into develop
This commit is contained in:
commit
ae6f31f982
@ -11,28 +11,144 @@
|
||||
<!-- Header wird hier dynamisch geladen -->
|
||||
<div id="header-placeholder"></div>
|
||||
<div class="warenkorb">
|
||||
<h2>🛒 Dein Warenkorb</h2>
|
||||
<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;
|
||||
}
|
||||
|
||||
<div class="item">
|
||||
<div class="info">
|
||||
<span class="name">Produkt 1</span>
|
||||
.warenkorb-tabelle th, .warenkorb-tabelle td {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
</div>
|
||||
<button class="remove">Entfernen</button>
|
||||
</div>
|
||||
.warenkorb-tabelle th {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
<div class="item">
|
||||
<div class="info">
|
||||
<span class="name">Produkt 2</span>
|
||||
</div>
|
||||
<button class="remove">Entfernen</button>
|
||||
</div>
|
||||
.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;
|
||||
}
|
||||
|
||||
<div class="summary">
|
||||
</div>
|
||||
<button class="zurKasse">Zur Kasse gehen</button>
|
||||
</div>
|
||||
.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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -27,11 +27,34 @@
|
||||
<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');
|
||||
@ -39,22 +62,29 @@
|
||||
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>
|
||||
`;
|
||||
|
||||
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">
|
||||
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>
|
||||
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
|
||||
Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
|
||||
</div>`;
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -29,11 +29,34 @@
|
||||
</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');
|
||||
@ -41,20 +64,26 @@
|
||||
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>
|
||||
`;
|
||||
|
||||
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">
|
||||
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>
|
||||
|
||||
@ -26,11 +26,34 @@
|
||||
|
||||
|
||||
<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/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');
|
||||
@ -38,21 +61,29 @@
|
||||
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>
|
||||
`;
|
||||
|
||||
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>
|
||||
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
|
||||
Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
|
||||
</div>`;
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -29,11 +29,34 @@
|
||||
</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
|
||||
container.innerHTML = '';
|
||||
|
||||
products.forEach(product => {
|
||||
const card = document.createElement('div');
|
||||
@ -41,21 +64,29 @@
|
||||
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>
|
||||
`;
|
||||
|
||||
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>
|
||||
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
|
||||
Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
|
||||
</div>`;
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -29,6 +29,29 @@
|
||||
</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/sportwagen')
|
||||
.then(res => res.json())
|
||||
.then(products => {
|
||||
@ -41,20 +64,26 @@
|
||||
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>
|
||||
`;
|
||||
|
||||
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">
|
||||
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>
|
||||
|
||||
@ -30,38 +30,64 @@
|
||||
|
||||
<!-- JavaScript zum Abrufen und Anzeigen der neuesten Produkte -->
|
||||
<script>
|
||||
// API-Aufruf
|
||||
// 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/new')
|
||||
// Antwort als JSON parsen
|
||||
.then(res => res.json())
|
||||
.then(products => {
|
||||
const container = document.getElementById('latest-products');
|
||||
container.innerHTML = ''; // sicherheitshalber leeren
|
||||
container.innerHTML = '';
|
||||
|
||||
// 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>Preis: ${product.price.toFixed(2)} €</p>
|
||||
<p>${product.description}</p>
|
||||
<button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
|
||||
<p>Artikel Nr: ${product.id}</p>
|
||||
<button class="add-to-cart">Zum Warenkorb hinzufügen</button>
|
||||
`;
|
||||
// Karte in Container einfügen
|
||||
|
||||
const addToCartButton = card.querySelector('.add-to-cart');
|
||||
addToCartButton.addEventListener('click', () => {
|
||||
zumWarenkorbHinzufuegen(product);
|
||||
});
|
||||
|
||||
container.appendChild(card);
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Fehler beim Laden der neuesten Produkte:', err);
|
||||
console.error('Fehler beim Laden der Produkte:', err);
|
||||
|
||||
const container = document.getElementById('latest-products');
|
||||
container.innerHTML =
|
||||
`<div class="error-message">
|
||||
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>
|
||||
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
|
||||
Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
|
||||
</div>`;
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
});
|
||||
@ -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})
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user