86 lines
3.0 KiB
HTML
86 lines
3.0 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</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/header.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>
|
|
|
|
<section style="padding: 20px 30px; text-align: left; background: #fff;">
|
|
<h1>Willkommen im Webshop</h1>
|
|
</section>
|
|
|
|
<main>
|
|
<div id="product-list" class="card-grid">
|
|
<!-- Hier werden die Produkte dynamisch eingefügt -->
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const apiUrl = 'http://localhost:3000/api/products';
|
|
|
|
// Hole die Produktdaten von der API
|
|
fetch(apiUrl)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const productList = document.getElementById('product-list');
|
|
|
|
// Iteriere durch die Produkte und erstelle HTML für jedes Produkt
|
|
data.forEach(product => {
|
|
const card = document.createElement('div');
|
|
card.classList.add('card');
|
|
|
|
const img = document.createElement('img');
|
|
img.src = product.imageUrl || 'https://shop.porsche.com/_next/image?url=https%3A%2F%2Fassets-prod.porsche.com%2Fassets%2Fce81555c-4f59-485e-9f9b-7a448a4d91b3.webp&w=2560&q=75';
|
|
// Bild aus DB
|
|
img.alt = product.name;
|
|
|
|
const name = document.createElement('h3');
|
|
name.textContent = product.name;
|
|
|
|
const price = document.createElement('p');
|
|
price.textContent = `Preis: ${product.price}€`;
|
|
|
|
const description = document.createElement('p');
|
|
description.textContent = product.description || '';
|
|
|
|
const button = document.createElement('button');
|
|
button.classList.add('add-to-cart');
|
|
button.textContent = 'Zum Warenkorb hinzufügen';
|
|
button.addEventListener('click', () => {
|
|
console.log(`${product.name} wurde zum Warenkorb hinzugefügt`);
|
|
});
|
|
|
|
// Alles zur Karte hinzufügen
|
|
card.appendChild(img);
|
|
card.appendChild(name);
|
|
card.appendChild(price);
|
|
card.appendChild(description);
|
|
card.appendChild(button);
|
|
|
|
productList.appendChild(card);
|
|
});
|
|
})
|
|
.catch(error => {
|
|
console.error('Fehler beim Laden der Produkte:', error);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |