100 lines
3.6 KiB
JavaScript
100 lines
3.6 KiB
JavaScript
/**
|
|
* Dieser Code lädt beim Start der Seite (DOMContentLoaded) Header und Footer dynamisch vom Server
|
|
* (über /header und /footer) und fügt sie in die vorgesehenen Elemente ein.
|
|
* Tritt ein Fehler auf (z.B. Datei nicht vorhanden oder Serverproblem),
|
|
* wird eine Fehlermeldung direkt auf der Webseite angezeigt.
|
|
*/
|
|
|
|
// Warten bis das gesamte DOM geladen ist
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
// Header laden
|
|
const headerTarget = document.getElementById("header");
|
|
if (headerTarget) {
|
|
// Header-Inhalt vom Server anfordern
|
|
fetch("/header")
|
|
.then(response => {
|
|
// Prüfen, ob die Antwort erfolgreich war
|
|
if (!response.ok) throw new Error("Header nicht gefunden");
|
|
return response.text();
|
|
})
|
|
.then(data => {
|
|
// Header-Inhalt in die Seite einfügen
|
|
headerTarget.innerHTML = data;
|
|
|
|
// WICHTIG: Jetzt den Warenkorb zählen, nachdem der Header geladen ist!
|
|
zeigeWarenkorbAnzahl();
|
|
|
|
// Login Status im UI anzeigen
|
|
zeigeLoginStatus();
|
|
})
|
|
.catch(error => {
|
|
// Fehlerbehandlung: Fehlermeldung im Header-Bereich anzeigen
|
|
headerTarget.innerHTML = `
|
|
<div style="background: #ffdede; color: #a00; padding: 10px; text-align: center;">
|
|
Fehler beim Laden des Headers.
|
|
</div>`;
|
|
console.error(error);
|
|
});
|
|
}
|
|
|
|
// Footer laden
|
|
const footerTarget = document.getElementById("footer");
|
|
if (footerTarget) {
|
|
// Footer-Inhalt vom Server anfordern
|
|
fetch("/footer")
|
|
.then(response => {
|
|
// Prüfen, ob die Antwort erfolgreich war
|
|
if (!response.ok) throw new Error("Footer nicht gefunden");
|
|
return response.text();
|
|
})
|
|
.then(data => {
|
|
// Footer-Inhalt in die Seite einfügen
|
|
footerTarget.innerHTML = data;
|
|
})
|
|
.catch(error => {
|
|
// Fehlerbehandlung: Die Fehlermeldung im Footer-Bereich anzeigen
|
|
footerTarget.innerHTML = `
|
|
<div style="background: #ffdede; color: #a00; padding: 10px; text-align: center;">
|
|
Fehler beim Laden der Fußzeile.
|
|
</div>`;
|
|
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);
|
|
}
|
|
|
|
window.zeigeLoginStatus = function () {
|
|
const userId = sessionStorage.getItem('user_id')
|
|
const loginBtn = document.querySelector('.login-btn')
|
|
|
|
if (!loginBtn) return
|
|
|
|
if (userId) {
|
|
loginBtn.textContent = 'Logout'
|
|
loginBtn.href = '/'
|
|
loginBtn.addEventListener('click', (e) => {
|
|
e.preventDefault()
|
|
sessionStorage.clear()
|
|
localStorage.clear()
|
|
alert('Sie wurden ausgeloggt.')
|
|
location.reload()
|
|
})
|
|
} else {
|
|
loginBtn.textContent = 'Login'
|
|
loginBtn.href = '/login'
|
|
}
|
|
}
|
|
}); |