Webshop/public/bestellung/bestellung.html
vextv 40e5db6551 - WIP: reworked the order function and added error handling for it
- added a function to save the user_id in the sessionStorage of the browser
2025-04-26 19:23:04 +02:00

67 lines
2.1 KiB
HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ihre Bestellung</title>
<link rel="stylesheet" href="/Styles/bestellung/bestellung.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>
<main>
<h2>Ihre Bestellung:</h2>
<div id="bestellung">
<!-- Platzhalter für die Bestellinformationen -->
<div class="bestell-info-card">
<p><strong>Kundennummer:</strong> <span id="kundenNr"></span></p>
<p><strong>Produkt-ID:</strong> <span id="produktId"></span></p>
<p><strong>Produktname:</strong> <span id="produktName"></span></p>
<p><strong>Preis:</strong> <span id="preis"></span></p>
</div>
</div>
</main>
<script>
async function ladeBestellung() {
const user_id = sessionStorage.getItem('user_id')
console.log('User ID: ', user_id)
if (!user_id){
console.log("is null")
alert('Sie sind nicht eingeloggt! Bitte loggen sie sich ein damit diese Seite angezeigt werden kann.')
} else if (user_id <= 1) {
try {
const response = await fetch('/api/bestellung/daten', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(user_id)
})
if (response.ok) {
const data = await response.json();
document.getElementById('kundenNr').textContent = user_id
document.getElementById('produktId').textContent = data.product_id
//document.getElementById('produktName').textContent = data.
document.getElementById('preis').textContent = data.total + ' €'
} else {
console.error('Fehler beim Laden der Bestelldaten.');
}
} catch (error) {
console.error('Fehler: ', error);
}
}
}
window.addEventListener('DOMContentLoaded', ladeBestellung);
</script>
<!-- Footer wird dynamisch geladen -->
<div id="footer"></div>
</body>
</html>