69 lines
2.2 KiB
HTML
69 lines
2.2 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 - Motorräder</title>
|
|
<link rel="stylesheet" href="./Styles/shop/shop.css">
|
|
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="./Styles/header_footer/header.css">
|
|
<link rel="stylesheet" href="./Styles/header_footer/footer.css">
|
|
</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 -->
|
|
</br>
|
|
<h1>Unsere Motorrad Produkte</h1>
|
|
<section class="card-grid" id="products_motorrad">
|
|
<!-- Dynamische Produkte (5 aktuelle Produkte) -->
|
|
</section>
|
|
|
|
|
|
<script>
|
|
fetch('/api/products/motorrad')
|
|
.then(res => res.json())
|
|
.then(products => {
|
|
const container = document.getElementById('products_motorrad');
|
|
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> |