<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/assets/css/main.css">
<link rel="stylesheet" href="/assets/css/cart.css">
<title>CameraBuy - Warenkorb</title>
<link rel="stylesheet" href="https://use.typekit.net/mtk3vtw.css">
<script src="/assets/script/cart.js"></script>
<script src="/assets/script/elementinfo.js"></script>
</head>
<body>
<header>
<nav>
<div class="navigation_image" id="logo_container">
<a href="#"><img src="/assets/img/logo.svg" alt="CameraBuy Logo"></a>
</div>
<div id="navigation">
<a href="/">Neuigkeiten</a>
<a href="/shop" >Shop</a>
<a href="/contact" >Kontakt</a>
</div>
<div class="navigation_image" id="shopping_cart_container">
<a href="/cart"><img src="/assets/img/cart.svg" alt="Shopping Cart"></a>
</div>
</nav>
</header>
<main id="cart">
<h1>Warenkorb</h1>
<div id="entries"></div>
<script>
//this function calculates the total amount to pay
function calculatetotal(){
fetch('/api/elementinformation.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(
{"total": true}
),
})
.then(response => response.json())
.then(data => {
//turn response into money format
unformatted = data / 100
const [integerPart, decimalPart] = unformatted.toFixed(2).toString().split('.');
const formattedIntegerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
const total = formattedIntegerPart + ',' + decimalPart + "€";
console.log(total)
//displaying the total amount
document.getElementById("totalamount").innerHTML = total
})
.catch(error => {
console.error('Error:'+ error);
});
}
//this function updates the listed items in the cart when it is called with a parameter (id) it will add a loading animation for the entry
async function updatecart(id = false){
// adding loading indicator if id is set
if(id != false){
document.getElementById("entry" + id).style.opacity = 0.5
}
// fetching the info what is in the cart
cart = await printcart()
if (cart.length == 0){
document.getElementById('entries').innerHTML = "Ihr Warenkorb ist leer"
}else{
const cartentries = [];
for (item in cart) {
const cartentry = fetch('/cart/cartentry?product=' + item + '&count=' + cart[item])
.then(response => {
// Überprüfe, ob die Anfrage erfolgreich war (Statuscode 200)
if (!response.ok) {
throw new Error(`Fehler beim Abrufen der Seite: ${response.statusText}`);
}
// Gib den HTML-Inhalt zurück
return response.text();
})
.catch(error => {
console.error('Fehler beim Abrufen der Seite:', error);
});
// adding the product to the cartentries array
cartentries.push(cartentry);
}
//waiting for the cart elements to load before updating the cart
Promise.all(cartentries)
.then(htmlArray => {
document.getElementById('entries').innerHTML = '';
document.getElementById('entries').innerHTML = htmlArray.join('');
//removing the loadingindicator
if(id != false){
document.getElementById("entry" + id).style.opacity = 1
}
})
.catch(error => {
console.error('Fehler beim Abrufen der Seiten:', error);
});
}
calculatetotal()
}
updatecart()
</script>
<div id="total">
<p>Total:</p>
<p id="totalamount"></p>
<button class="darkbutton">zahlungspflichtig bestellen</button>
</div>
</main>
{{ include ('footer.html') }}
</body>
</html>