Webshop/public/shop/shop_sportwagen.html

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>Shop - Sportwagen</title>
<link rel="stylesheet" href="/Styles/styles-main.css">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
</head>
<body>
<!-- Header -->
<div id="header-placeholder"></div>
<script>
fetch(href="/header")
.then(response => response.text())
.then(data => {
document.getElementById('header-placeholder').innerHTML = data;
})
.catch(error => console.error('Fehler beim Laden des Headers:', error));
</script>
<!-- Hauptinhalt -->
<section style="padding: 0px 30px; text-align: left;">
<h1>Unsere Motorrad Produkte</h1>
</section>
<section class="card-grid" id="products_sportwagen">
<!-- Dynamische Produkte (filtern nach Motorrad) -->
</section>
<script>
fetch('/api/products/sportwagen')
.then(res => res.json())
.then(products => {
const container = document.getElementById('products_sportwagen');
container.innerHTML = ''; // sicherheitshalber leeren
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>
<button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
`;
container.appendChild(card);
});
})
.catch(err => {
console.error('Fehler beim Laden der neuesten Produkte:', err);
});
</script>
<!-- Fußzeiele -->
<div id="footer"></div>
<script>
fetch('/footer')
.then(response => response.text())
.then(data => {
document.getElementById('footer').innerHTML = data;
});
</script>
</body>
</html>