Berufsschule/Webshop
Berufsschule/Webshop
Template
5
2
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases 3 Wiki Activity

Merge pull request 'develop' (#41) from develop into main

Browse Source 
Reviewed-on: https://gitea.vex-intern.de/Berufsschule/Webshop/pulls/41
This commit is contained in:
Fabian 2025-04-29 19:48:44 +00:00
commit 6c62b1034e
26 changed files with 927 additions and 349 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
database/db_scripts/webshop_test-data.sql
View File

@ -2,15 +2,15 @@ USE webshop;
-- Product Categories
INSERT INTO product_category (id, name)
VALUES (1, 'Electronics');
VALUES (1, 'Motorräder');
INSERT INTO product_category (id, name)
VALUES (2, 'Home Appliances');
VALUES (2, 'Oldtimer');
INSERT INTO product_category (id, name)
VALUES (3, 'Clothing');
VALUES (3, 'Sportwägen');
INSERT INTO product_category (id, name)
VALUES (4, 'Sports');
VALUES (4, 'LKWs');
INSERT INTO product_category (id, name)
VALUES (5, 'Books');
VALUES (5, 'Kleinwägen');
-- Discounts
INSERT INTO discount (id, name, description, discount_percent, active)

13
public/404.html
View File

@ -1,21 +1,32 @@
<!--
Eine Seite für die Seiten die nicht vorhanden sind.
Fehler 404 - Seite nicht gefunden
Zeigt eine Meldung und hat einen Link der zurück zur Startseite führt
-->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Seite nicht gefunden</title>
<!-- Haupt-CSS-Datei -->
<link rel="stylesheet" href="/Styles/styles-main.css">
<!-- Icons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Script zum Laden von Header/Footer -->
<script src="/header_footer"></script>
</head>
<body>
<div class="wrapper">
<!-- Header -->
<div id="header-placeholder"></div>
<div id="header"></div>
<!-- Hauptinhalt: Fehlermeldung -->
<main class="content" style="text-align: center; padding: 80px;">
<h1>🚧 Seite nicht gefunden 🚧</h1>
<p>Diese Seite existiert nicht oder befindet sich noch in Arbeit.</p>
<!-- Button zurück zur Startseite -->
<a href="/" class="btn" style="width: auto; display: inline-block; margin-top: 20px;">Zur Startseite</a>
</main>

156
public/Warenkorb/warenkorb.html
View File

@ -11,28 +11,144 @@
<!-- Header wird hier dynamisch geladen -->
<div id="header-placeholder"></div>
<div class="warenkorb">
<h2>🛒 Dein Warenkorb</h2>
<div class="item">
<div class="info">
<span class="name">Produkt 1</span>
</div>
<button class="remove">Entfernen</button>
</div>
<div class="item">
<div class="info">
<span class="name">Produkt 2</span>
</div>
<button class="remove">Entfernen</button>
</div>
<div class="summary">
</div>
<button class="zurKasse">Zur Kasse gehen</button>
<main>
<h2>Dein Warenkorb</h2>
<div id="warenkorb"></div>
<div id="gesamtpreis-container"></div>
<button id="zurKasseGehen">Zur Kasse gehen</button>
</main>
</div>
<style>
.warenkorb-tabelle {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.warenkorb-tabelle th, .warenkorb-tabelle td {
padding: 10px;
text-align: center;
border-bottom: 1px solid #ccc;
}
.warenkorb-tabelle th {
background-color: #f8f8f8;
}
.loeschen-button, .menge-button {
background-color: #ff4d4d;
border: none;
color: white;
padding: 5px 8px;
margin: 0 2px;
cursor: pointer;
border-radius: 5px;
font-size: 16px;
}
.loeschen-button:hover, .menge-button:hover {
background-color: #e60000;
}
.produkt-anzahl {
display: inline-block;
width: 30px;
text-align: center;
}
</style>
<!-- Footer wird dynamisch geladen -->
<div id="footer"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
ladeWarenkorb();
document.getElementById('zurKasseGehen').addEventListener('click', function() {
window.location.href = '/bestellformular'; // Deine Bestellformular-Seite
});
});
function ladeWarenkorb() {
const warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
const container = document.getElementById('warenkorb');
const gesamtContainer = document.getElementById('gesamtpreis-container');
container.innerHTML = '';
gesamtContainer.innerHTML = '';
if (warenkorb.length === 0) {
container.innerHTML = '<p>Dein Warenkorb ist leer.</p>';
document.getElementById('zurKasseGehen').style.display = 'none';
return;
}
let gesamtpreis = 0;
const table = document.createElement('table');
table.className = 'warenkorb-tabelle';
table.innerHTML = `
<thead>
<tr>
<th>Produkt</th>
<th>Preis (Stück)</th>
<th>Anzahl</th>
<th>Zwischensumme</th>
<th>Aktion</th>
</tr>
</thead>
<tbody></tbody>
`;
const tbody = table.querySelector('tbody');
warenkorb.forEach((produkt, index) => {
const zwischensumme = produkt.price * produkt.quantity;
gesamtpreis += zwischensumme;
const row = document.createElement('tr');
row.innerHTML = `
<td>${produkt.product_name}</td>
<td>${produkt.price.toFixed(2)} €</td>
<td>
<button class="menge-button" onclick="aendereMenge(${index}, -1)">-</button>
<span class="produkt-anzahl">${produkt.quantity}</span>
<button class="menge-button" onclick="aendereMenge(${index}, 1)">+</button>
</td>
<td>${zwischensumme.toFixed(2)} €</td>
<td><button onclick="entferneAusWarenkorb(${index})" class="loeschen-button">Entfernen</button></td>
`;
tbody.appendChild(row);
});
container.appendChild(table);
gesamtContainer.innerHTML = `<h3>Gesamtsumme: ${gesamtpreis.toFixed(2)} €</h3>`;
if (window.zeigeWarenkorbAnzahl) {
window.zeigeWarenkorbAnzahl();
}
}
function entferneAusWarenkorb(index) {
let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
warenkorb.splice(index, 1);
localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
ladeWarenkorb();
}
function aendereMenge(index, aenderung) {
let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
warenkorb[index].quantity += aenderung;
if (warenkorb[index].quantity <= 0) {
warenkorb.splice(index, 1); // Produkt löschen, wenn Menge 0 oder kleiner
}
localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
ladeWarenkorb();
}
</script>
</body>
</html>

74
public/bestellformular/bestellformular.html
View File

@ -6,12 +6,13 @@
<title>Bestellformular</title>
<link rel="stylesheet" href="/Styles/bestellformular/bestellformular.css">
<link rel="stylesheet" href="./Styles/styles-main.css">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<script src="/header_footer"></script>
</head>
<body>
<div class="wrapper">
<!-- Header wird hier dynamisch geladen -->
<div id="header-placeholder"></div>
<div id="header"></div>
<main>
<div class="form-container">
@ -19,13 +20,13 @@
<h2>Bestellformular</h2>
<label for="vorname">Vorname:</label>
<input type="text" id="Vorname" name="Vorname" required placeholder="Vorname">
<input type="text" id="Vorname" name="Vorname" required placeholder=" - Vorname -" readonly>
<label for="nachname">Nachname:</label>
<input type="text" id="Nachname" name="Nachname" required placeholder="Nachname">
<input type="text" id="Nachname" name="Nachname" required placeholder="- Nachname -" readonly>
<label for="kundenNr">Kunden Nr.:</label>
<input type="text" id="KundenNr" name="KundenNr" required placeholder="Kunden Nr.">
<input type="text" id="KundenNr" name="KundenNr" required placeholder="- Kunden Nr. -" readonly>
<label for="strasse">Straße:</label>
<input type="text" id="strasse" name="strasse" required placeholder="Strasse">
@ -45,21 +46,21 @@
</div>
<style>
.Artikel{
.Artikel {
display: flex;
align-content: center;
}
.ArtikelNrText{
.ArtikelNrText {
max-width: 50%;
}
.StueckzahlText{
.StueckzahlText {
max-width: 15%;
margin-left: 2.5%;
}
.loeschen-button{
.loeschen-button {
background-color: #ff6600;
color: white;
border: none;
@ -70,12 +71,17 @@
margin-right: 5px;
}
.verfuegbarkeit{
.verfuegbarkeit {
display: flex;
align-content: center;
max-width: 20%;
padding-left: 2.5%;
}
#KundenNr, #Vorname, #Nachname{
background-color: #F5F5F5;
border: none;
}
</style>
<a class="button-submit" id="sendOrder">Bestellung absenden</a>
</form>
@ -83,10 +89,31 @@
</main>
<script>
const user_id = sessionStorage.getItem('user_id');
const email = sessionStorage.getItem('email');
const vorname = sessionStorage.getItem('vorname');
const nachname = sessionStorage.getItem('nachname');
document.addEventListener('DOMContentLoaded', function () {
const formular = document.getElementById('bestellform');
const kundenNrInput = document.getElementById('KundenNr');
const VornameInput = document.getElementById('Vorname');
const NachnameInput = document.getElementById('Nachname');
if (kundenNrInput, VornameInput, NachnameInput) {
kundenNrInput.value = user_id;
VornameInput.value = vorname;
NachnameInput.value = nachname;
}
console.log("User ID from sessionStorage:", user_id);
console.log("E-Mail from sessionStorage:", email);
console.log("Vorname from sessionStorage:", vorname);
console.log("Nachname from sessionStorage:", nachname);
const sendButton = document.getElementById('sendOrder');
let artikelVerfuegbarkeiten = [];
ladeWarenkorb();
// Bestellung absenden
sendButton.addEventListener('click', async function (event) {
@ -181,7 +208,7 @@
const data = await response.json();
const artikelDivs = document.querySelectorAll('.Artikel');
artikelVerfuegbarkeiten = [];
let artikelVerfuegbarkeiten = [];
artikelDivs.forEach(div => {
const artikelNrInput = div.querySelector('.ArtikelNrText');
@ -251,6 +278,31 @@
artikelDiv.remove();
}
function ladeWarenkorb() {
// RICHTIG lesen: aus localStorage (nicht sessionStorage!)
const warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
const formular = document.getElementById('bestellform');
const sendButton = document.getElementById('sendOrder');
if (warenkorb.length === 0) {
console.log('Kein Warenkorb gefunden oder Warenkorb ist leer.');
return;
}
warenkorb.forEach(produkt => {
const artikelDiv = document.createElement('div');
artikelDiv.className = 'Artikel';
artikelDiv.innerHTML = `
<button type="button" class="loeschen-button" onclick="loescheArtikel(this)">x</button>
<input type="text" class="ArtikelNrText" name="ArtikelNr" value="${produkt.product_id}" required placeholder="Artikel Nr.">
<input type="text" class="StueckzahlText" name="Stueckzahl" value="${produkt.quantity}" required placeholder="Anzahl">
<div class="verfuegbarkeit"></div>
`;
formular.insertBefore(artikelDiv, sendButton);
});
}
</script>
<!-- Footer wird dynamisch geladen -->
<div id="footer"></div>

8
public/header_footer/footer.html
View File

@ -1,6 +1,12 @@
<!-- Fußzeiele -->
<!--
Fußzeile des Webshops
Zeigt einen Copyright-Hinweis, die Links zum Impressum und Datenschutz sind verlinkt (keine Funktion)
-->
<footer class="footer">
<!-- Copyright-Hinweis -->
<p>&copy; 2025 Autohändler Webshop – Alle Rechte vorbehalten</p>
<!-- Links zu Impressum und Datenschutz (keine Funktion) -->
<p>
<a href="/impressum">Impressum</a> |
<a href="/datenschutz">Datenschutz</a>

78
public/header_footer/header.html
View File

@ -1,34 +1,60 @@
<!-- header.html -->
<!--
Header-Bereich Einbindung
Zeigt Logo, Link zur Startseite, Warenkorb (beispielhaft, keine Funktion) und Menüleiste an
-->
<header>
<div class="logo-container">
<img src="/images/Logo.png" alt="Modellauto-Shop Logo" class="logo-img">
<h1>Modellauto - Shop</h1>
</div>
<div class="header-right">
<a href="/login" class="login-btn">Login</a>
<div class="header-right">
<!-- Logo und Shop-Titel -->
<a href="/" class="logo-link">
<div class="logo-container">
<img src="/images/Logo.png" alt="Modellauto-Shop Logo" class="logo-img">
<h1>Modellauto - Shop</h1>
</div>
</a>
<a href="/warenkorb" class="cart">
<i class='bx bx-cart'></i>
<span class="cart-count">0</span>
</a>
<!-- Auf der rechten Seite des Headers befindet sich der Login-Button und der Warenkorb -->
<div class="header-right">
<!-- Login-Button -->
<a href="/login" class="login-btn">
<i class='bx bx-user'></i> Login
</a>
<!-- Warenkorb-Button mit Icon und Anzeige der Artikelanzahl (keine Funktion) -->
<a href="/warenkorb" class="cart">
<i class='bx bx-cart'></i>
<span class="cart-count" id="cart-count">0</span>
</a>
</div>
</div>
</header>
<!-- Navigationsmenü -->
<nav class="menu">
<ul class="menu-list">
<li class="menu-item"><a href="/">Startseite</a></li>
<li class="menu-item">
<a href="/shop">Shop</a>
<ul class="submenu">
<li><a href="/shop/motorrad">Motorräder</a></li>
<li><a href="/shop/oldtimer">Oldtimer</a></li>
<li><a href="/shop/sportwagen">Sportwagen</a></li>
<li><a href="/shop/lkw">LKWs</a></li>
</ul>
</li>
<li class="menu-item"><a href="/ueberuns">Über uns</a></li>
<li class="menu-item"><a href="/kontakt">Kontakt</a></li>
</ul>
<ul class="menu-list">
<!-- Startseite Link -->
<li class="menu-item">
<a href="/"><i class='bx bx-home'></i> Startseite</a>
</li>
<!-- Shop Link mit Dropdown-Menü für die verschiedene Unterkategorien -->
<li class="menu-item">
<a href="/shop"><i class='bx bx-store'></i> Shop</a>
<ul class="submenu">
<li><a href="/shop/motorrad"></i> Motorräder</a></li>
<li><a href="/shop/oldtimer"></i> Oldtimer</a></li>
<li><a href="/shop/sportwagen"></i> Sportwagen</a></li>
<li><a href="/shop/lkw"></i> LKWs</a></li>
</ul>
</li>
<!-- Link zu Über uns-->
<li class="menu-item">
<a href="/ueberuns"><i class='bx bx-group'></i> Über uns</a>
</li>
<!-- Link zur Kontakt Seite-->
<li class="menu-item">
<a href="/kontaktformular"><i class='bx bx-envelope'></i> Kontakt</a>
</li>
<!-- Link zum Bestellformular-->
<li class="menu-item">
<a href="/bestellformular"><i class='bx bx-notepad'></i> Bestellformular</a>
</li>
</ul>
</nav>

0
public/inputHandler/verifyPassword.js Normal file
View File

55
public/kontaktformular/kontaktformular.html Normal file
View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kontaktformular</title>
<link rel="stylesheet" href="./Styles/styles-main.css">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<script src="/header_footer"></script>
</head>
<body>
<div class="wrapper">
<!-- Header -->
<div id="header"></div>
<main>
<section style="padding: 40px 20px; max-width: 700px; margin: 0 auto;">
<h1>Kontaktieren Sie uns</h1>
<p style="margin-bottom: 30px;">Sie haben Fragen oder Anregungen? Schreiben Sie uns – wir melden uns schnellstmöglich!</p>
<form id="contact-form">
<div class="input-box">
<input type="text" name="name" placeholder="Ihr Name" required>
<i class='bx bx-user'></i>
</div>
<div class="input-box">
<input type="email" name="email" placeholder="Ihre E-Mail-Adresse" required>
<i class='bx bx-envelope'></i>
</div>
<div class="input-box">
<input type="text" name="betreff" placeholder="Betreff" required>
<i class='bx bx-edit-alt'></i>
</div>
<div class="input-box">
<textarea name="nachricht" placeholder="Ihre Nachricht" rows="6" style="width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;" required></textarea>
</div>
<button type="submit" class="btn">Nachricht senden</button>
</form>
</section>
</main>
<!-- Footer -->
<div id="footer"></div>
</div>
<script>
document.getElementById('contact-form').addEventListener('submit', function(e) {
e.preventDefault();
alert('Vielen Dank für Ihre Nachricht! Wir melden uns bald bei Ihnen.');
this.reset(); // Formular leeren
});
</script>
</body>
</html>

33
public/login/login.html
View File

@ -1,31 +1,51 @@
<!--
Login-Seite für den Webshop.
Die Benutzer können sich mit ihrem Benutzernamen und Passwort anmelden oder sich registreren.
-->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<!-- Login-CSS-Datei -->
<link rel="stylesheet" href="./Styles/login/login.css">
<!-- Haupt-CSS-Datei -->
<link rel="stylesheet" href="./Styles/styles-main.css">
<!-- Icons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Script zum Laden von Header/Footer -->
<script src="/header_footer"></script>
<title>Login</title>
</head>
<body>
<!-- Header -->
<div id="header-placeholder"></div>
<div id="header"></div>
<main class="main-content">
<div class="login-container">
<h2 class="login-title">Login</h2>
<h2 class="title">Login</h2>
<!-- Login-Formular -->
<form class="login-form">
<!-- Eingabefeld für Benutzername -->
<div class="input-group">
<input id="email" type="text" placeholder="E-Mail" required/>
<input id="email" type="email" placeholder="E-Mail" required/>
<i class="icon fas fa-user"></i>
</div>
<!-- Eingabefeld für Passwort -->
<div class="input-group">
<input id="password" type="password" placeholder="Passwort" required/>
<i class="icon fas fa-lock"></i>
</div>
<button id="submit" type="submit" class="login-btn">Login</button>
<!-- Login-Button -->
<button type="submit" class="login-btn" id="submit">Login</button>
<!-- Link zur Registrierungsseite -->
<p class="register-text">
Noch keinen Account? <a href="/registrieren">Registrieren</a>
</p>
@ -34,7 +54,7 @@
</main>
<script>
document.getElementById('submit').addEventListener('click', async (event) => {
document.querySelector('form').addEventListener('submit', async (event) => {
event.preventDefault()
const email = document.getElementById('email').value
@ -51,6 +71,8 @@
if (response.ok) {
const data = await response.json();
sessionStorage.setItem("user_id", data.id)
sessionStorage.setItem("vorname", data.name)
sessionStorage.setItem("nachname", data.lower_name)
alert('Login erfolgreich!');
window.location.href = '/'; // Redirect to home page after login
} else {
@ -63,6 +85,7 @@
}
})
</script>
<!-- Fußzeile -->
<div id="footer"></div>

49
public/registrieren/registrieren.html
View File

@ -1,22 +1,33 @@
<!--
Diese Seite beinhaltet ein Registrierungsformular für neue Benutzer.
Der Benutzer kann Vorname, Nachname, E-Mail-Adresse und ein Passwort eingeben.
Header und Footer werden dynamisch geladen.
-->
<!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="./Styles/registrieren/registrieren.css">
<link rel="stylesheet" href="./Styles/styles-main.css">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<script src="/header_footer"></script>
<title>Registrieren</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Registrieren-CSS-Datei -->
<link rel="stylesheet" href="./Styles/registrieren/registrieren.css">
<!-- Haupt-CSS-Datei -->
<link rel="stylesheet" href="./Styles/styles-main.css">
<!-- Icons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Script zum Laden von Header/Footer -->
<script src="/header_footer"></script>
<title>Registrieren</title>
</head>
<body>
<div class="page-container">
<div class="page-container">
<!-- Header -->
<div id="header-placeholder"></div>
<div id="header"></div>
<!-- Registrierungsformular -->
<main class="content-wrapper">
<!-- Formular für Registrierung -->
<div class="register-wrapper">
<form action="register.php" method="POST">
<h2 class="title">Registrieren</h2>
@ -38,6 +49,7 @@
<i class='bx bxs-lock-alt'></i>
</div>
<!-- Eingabe: Passwort bestätigen -->
<div class="input-box">
<input type="password" id="confirmPassword" name="confirmPassword" placeholder="Passwort bestätigen"
required>
@ -46,6 +58,7 @@
<button type="submit" class="btn" id="register">Registrieren</button>
<!-- Link zum Login für bestehende Nutzer -->
<div class="register-link">
<br>
<p>Bereits ein Konto? <a href="/login">Login</a></p>
@ -55,9 +68,21 @@
</main>
<script>
document.getElementById('register').addEventListener('click', async (event) => {
document.querySelector('form').addEventListener('submit', async (event) => {
event.preventDefault();
const passwordEl = document.getElementById('regPassword')
const password = passwordEl.value
const confirmPasswordEl = document.getElementById('confirmPassword')
const confirmPassword = confirmPasswordEl.value
if (password !== confirmPassword) {
passwordEl.value = ''
confirmPasswordEl.value = ''
alert('Die Passwörter stimmen nicht überein.')
return
}
const formData = {
name: document.getElementById('vorname').value,
lower_name: document.getElementById('nachname').value,
@ -76,8 +101,10 @@
if (response.ok) {
const data = await response.json();
sessionStorage.setItem("user_id", data.id)
sessionStorage.setItem("vorname", data.name)
sessionStorage.setItem("nachname", data.lower_name)
alert('Nutzer erfolgreich hinzugefügt! Ihre Kundennummer: ' + data.id)
window.location.href= '/'
window.location.href = '/'
} else {
alert('Fehler bei der Registrierung.')
}

0
public/session_storage/login-toggle.js Normal file
View File

80
public/shop/shop.html
View File

@ -1,16 +1,25 @@
<!--
Diese Seite zeigt alle Produkte des Webshops an.
Produkte werden dynamisch von der API geladen.
Bei einem Fehler wird eine passende Fehlermeldung angezeigt.
-->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop</title>
<!-- Haupt-CSS-Datei -->
<link rel="stylesheet" href="/Styles/styles-main.css">
<!-- Icons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Script zum Laden von Header/Footer -->
<script src="/header_footer"></script>
</head>
<body>
<!-- Header -->
<div id="header-placeholder"></div>
<div id="header"></div>
<!-- Hauptinhalt -->
<section style="padding: 0px 30px; text-align: left;">
@ -18,8 +27,9 @@
</section>
<main>
<!-- "Container" für die dynamisch geladenen Produktkarten -->
<section class="card-grid" id="products">
<!-- Dynamische Produkte -->
<!-- Produkte werden hier eingefügt -->
</section>
</main>
@ -27,35 +37,73 @@
<div id="footer"></div>
<script>
// Funktion zum Hinzufügen zum Warenkorb
function zumWarenkorbHinzufuegen(product) {
let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
const existingProduct = warenkorb.find(p => p.product_id === product.id);
if (existingProduct) {
existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
} else {
warenkorb.push({
product_id: product.id,
product_name: product.name,
price: product.price,
quantity: 1
});
}
localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
zeigeWarenkorbAnzahl();
}
// Produkte laden
// Daten von der API abrufen
fetch('/api/products')
.then(res => res.json())
.then(products => {
const container = document.getElementById('products');
container.innerHTML = ''; // sicherheitshalber leeren
container.innerHTML = '';
// Für jedes Produkt eine eigene Karte erstellen und einfügen
products.forEach(product => {
// Neues div-Element für die Produktkarte
const card = document.createElement('div');
// CSS-Styling hinzufügen
card.classList.add('card');
// HTML-Struktur der Produktkarte
card.innerHTML = `
<img src="${product.image_url}" alt="${product.name}">
<h3>${product.name}</h3>
<p>Preis: ${product.price}€</p>
<p>${product.description}</p>
<p>Artikel Nr: ${product.id}</p>
<button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
`;
<img src="${product.image_url}" alt="${product.name}">
<h3>${product.name}</h3>
<p>Preis: ${product.price.toFixed(2)} €</p>
<p>${product.description}</p>
<p>Artikel Nr: ${product.id}</p>
<button class="add-to-cart">Zum Warenkorb hinzufügen</button>
`;
const addToCartButton = card.querySelector('.add-to-cart');
addToCartButton.addEventListener('click', () => {
zumWarenkorbHinzufuegen(product);
});
// Karte in den Container einfügen
container.appendChild(card);
});
})
// Fehlermeldung
.catch(err => {
console.error('Fehler beim Laden der Shop_Produkte:', err);
console.error('Fehler beim Laden der Produkte:', err);
// Fehlermeldung auf der Seite anzeigen
const container = document.getElementById('products');
container.innerHTML =
`<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`;
container.innerHTML = `
<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`;
});
</script>
</body>

75
public/shop/shop_lkw.html
View File

@ -1,17 +1,26 @@
<!--
Diese Seite zeigt alle LKW-Produkte des Webshops an.
Die Produkte werden dynamisch von der API geladen.
Bei einem Fehler wird eine passende Fehlermeldung angezeigt.
-->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop - LKW's</title>
<!-- Haupt-CSS-Datei -->
<link rel="stylesheet" href="/Styles/styles-main.css">
<!-- Icons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Script zum Laden von Header/Footer -->
<script src="/header_footer"></script>
</head>
<body>
<div class="wrapper">
<!-- Header -->
<div id="header-placeholder"></div>
<div id="header"></div>
<!-- Hauptinhalt -->
<main>
@ -29,41 +38,71 @@
</div>
<script>
// API-Abfrage, um Lkw-Produkte zu laden
// Funktion zum Hinzufügen zum Warenkorb
function zumWarenkorbHinzufuegen(product) {
let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
const existingProduct = warenkorb.find(p => p.product_id === product.id);
if (existingProduct) {
existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
} else {
warenkorb.push({
product_id: product.id,
product_name: product.name,
price: product.price,
quantity: 1
});
}
localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
zeigeWarenkorbAnzahl();
}
// Produkte laden
fetch('/api/products/lkw')
.then(res => res.json())
.then(products => {
const container = document.getElementById('products_lkw');
container.innerHTML = ''; // sicherheitshalber leeren
container.innerHTML = '';
// Für jedes Produkt eine Karte erstellen
products.forEach(product => {
const card = document.createElement('div');
card.classList.add('card');
card.innerHTML = `
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>Preis: ${product.price.toFixed(2)} €</p>
<p>${product.description}</p>
<p>Artikel Nr: ${product.id}</p>
<button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
<button class="add-to-cart">Zum Warenkorb hinzufügen</button>
`;
container.appendChild(card);
const addToCartButton = card.querySelector('.add-to-cart');
addToCartButton.addEventListener('click', () => {
zumWarenkorbHinzufuegen(product);
});
container.appendChild(card);
});
})
// Fehlerbehandlung
.catch(err => {
console.error('Fehler beim Laden der LKW_Produkte:', err);
console.error('Fehler beim Laden der Produkte:', err);
// Anzeige einer Fehlermeldung auf der Webseite
const container = document.getElementById('products_lkw');
container.innerHTML =
`<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div> `;
container.innerHTML = `
<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`;
});
</script>
<!-- Fußzeiele -->
<div id="footer"></div>
</body>
</html>

99
public/shop/shop_motorrad.html
View File

@ -1,17 +1,26 @@
<!--
Diese Seite zeigt alle Motorrad-Produkte des Webshops an.
Produkte werden dynamisch von der API geladen.
Bei einem Fehler wird eine passende Fehlermeldung angezeigt.
-->
<!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/styles-main.css">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<script src="/header_footer"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop - Motorräder</title>
<!-- Haupt-CSS-Datei -->
<link rel="stylesheet" href="/Styles/styles-main.css">
<!-- Icons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Script zum Laden von Header/Footer -->
<script src="/header_footer"></script>
</head>
<body>
<div class="wrapper">
<!-- Header -->
<div id="header-placeholder"></div>
<div id="header"></div>
<!-- Hauptinhalt -->
<main class="main-content">
@ -20,45 +29,77 @@
</section>
<section class="card-grid" id="products_motorrad">
<!-- Dynamische Produkte oder Fehlermeldung -->
<!-- Produkte -->
</section>
</main>
<!-- Fußzeile -->
<div id="footer"></div>
</div>
<script>
fetch('/api/products/motorrad')
.then(res => res.json())
.then(products => {
const container = document.getElementById('products_motorrad');
container.innerHTML = ''; // sicherheitshalber leeren
// Funktion zum Hinzufügen zum Warenkorb
function zumWarenkorbHinzufuegen(product) {
let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
const existingProduct = warenkorb.find(p => p.product_id === product.id);
if (existingProduct) {
existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
} else {
warenkorb.push({
product_id: product.id,
product_name: product.name,
price: product.price,
quantity: 1
});
}
localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
zeigeWarenkorbAnzahl();
}
// Produkte laden
fetch('/api/products/motorrad')
.then(res => res.json())
.then(products => {
const container = document.getElementById('products_motorrad');
container.innerHTML = '';
// Für jedes Produkt eine Karte erstellen
products.forEach(product => {
const card = document.createElement('div');
card.classList.add('card');
card.innerHTML = `
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>Preis: ${product.price.toFixed(2)} €</p>
<p>${product.description}</p>
<p>Artikel Nr: ${product.id}</p>
<button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
<button class="add-to-cart">Zum Warenkorb hinzufügen</button>
`;
container.appendChild(card);
const addToCartButton = card.querySelector('.add-to-cart');
addToCartButton.addEventListener('click', () => {
zumWarenkorbHinzufuegen(product);
});
container.appendChild(card);
});
})
// Fehlermeldung
.catch(err => {
console.error('Fehler beim Laden der Motorrad_Produkte:', err);
console.error('Fehler beim Laden der Produkte:', err);
const container = document.getElementById('products_motorrad');
container.innerHTML = `
<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`;
<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`;
});
</script>
<!-- Fußzeiele -->
<div id="footer"></div>
</body>
</html>
</html>

87
public/shop/shop_oldtimer.html
View File

@ -1,17 +1,26 @@
<!--
Diese Seite zeigt alle Oldtimer-Produkte des Webshops an.
Produkte werden dynamisch von der API geladen.
Bei einem Fehler wird eine passende Fehlermeldung angezeigt.
-->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop - Oldtimer</title>
<!-- Haupt-CSS-Datei -->
<link rel="stylesheet" href="/Styles/styles-main.css">
<!-- Icons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Script zum Laden von Header/Footer -->
<script src="/header_footer"></script>
</head>
<body>
<div class="wrapper">
<!-- Header -->
<div id="header-placeholder"></div>
<div id="header"></div>
<!-- Hauptinhalt -->
<main class="main-content">
@ -20,7 +29,7 @@
</section>
<section class="card-grid" id="products_oldtimer">
<!-- Dynamische Produkte oder Fehlermeldung -->
<!-- Produkte -->
</section>
</main>
@ -29,35 +38,73 @@
</div>
<script>
fetch('/api/products/oldtimer')
.then(res => res.json())
.then(products => {
const container = document.getElementById('products_oldtimer');
container.innerHTML = ''; // sicherheitshalber leeren
// Funktion zum Hinzufügen zum Warenkorb
function zumWarenkorbHinzufuegen(product) {
let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
const existingProduct = warenkorb.find(p => p.product_id === product.id);
if (existingProduct) {
existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
} else {
warenkorb.push({
product_id: product.id,
product_name: product.name,
price: product.price,
quantity: 1
});
}
localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
zeigeWarenkorbAnzahl();
}
// Produkte laden
fetch('/api/products/oldtimer')
.then(res => res.json())
.then(products => {
const container = document.getElementById('products_oldtimer');
container.innerHTML = ''; // sicherheitshalber leeren
// Für jedes Produkt eine Karte erstellen
products.forEach(product => {
// Neues div für eine Produktkarte
const card = document.createElement('div');
// CSS-Styling hinzufügen
card.classList.add('card');
// Die Karte mit Produktdaten füllen
card.innerHTML = `
<img src="${product.image_url}" alt="${product.name}">
<h3>${product.name}</h3>
<p>Preis: ${product.price}€</p>
<p>${product.description}</p>
<p>Artikel Nr: ${product.id}</p>
<button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
`;
<img src="${product.image_url}" alt="${product.name}">
<h3>${product.name}</h3>
<p>Preis: ${product.price.toFixed(2)} €</p>
<p>${product.description}</p>
<p>Artikel Nr: ${product.id}</p>
<button class="add-to-cart">Zum Warenkorb hinzufügen</button>
`;
const addToCartButton = card.querySelector('.add-to-cart');
addToCartButton.addEventListener('click', () => {
zumWarenkorbHinzufuegen(product);
});
container.appendChild(card);
});
})
// Fehlerbehandlung
.catch(err => {
console.error('Fehler beim Laden der Oldtimer_Produkte:', err);
console.error('Fehler beim Laden der Produkte:', err);
// Anzeige einer Fehlermeldung auf der Webseite
const container = document.getElementById('products_oldtimer');
container.innerHTML = `
<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`;
<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`;
});
</script>
</body>
</html>
</html>

107
public/shop/shop_sportwagen.html
View File

@ -1,17 +1,26 @@
<!--
Diese Seite zeigt alle Sportwagen-Produkte des Webshops an.
Die Produkte werden dynamisch von der API geladen.
Bei einem Fehler wird eine passende Fehlermeldung angezeigt.
-->
<!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">
<script src="/header_footer"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop - Sportwagen</title>
<!-- Haupt-CSS-Datei -->
<link rel="stylesheet" href="/Styles/styles-main.css">
<!-- Icons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Script zum Laden von Header/Footer -->
<script src="/header_footer"></script>
</head>
<body>
<div class="wrapper">
<!-- Header -->
<div id="header-placeholder"></div>
<!-- Header -->
<div id="header"></div>
<!-- Hauptinhalt -->
<main>
@ -20,47 +29,79 @@
</section>
<section class="card-grid" id="products_sportwagen">
<!-- Dynamische Produkte oder Fehlermeldung -->
<!-- Einbindung Dynamische Produkte -->
</section>
</main>
<!-- Footer -->
<div id="footer"></div>
<!-- Footer -->
<div id="footer"></div>
</div>
<script>
fetch('/api/products/sportwagen')
.then(res => res.json())
.then(products => {
// Funktion zum Hinzufügen zum Warenkorb
function zumWarenkorbHinzufuegen(product) {
let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
const existingProduct = warenkorb.find(p => p.product_id === product.id);
if (existingProduct) {
existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
} else {
warenkorb.push({
product_id: product.id,
product_name: product.name,
price: product.price,
quantity: 1
});
}
localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
zeigeWarenkorbAnzahl();
}
// Produkte laden
fetch('/api/products/sportwagen')
.then(res => res.json())
.then(products => {
const container = document.getElementById('products_sportwagen');
container.innerHTML = '';
// Für jedes Produkt eine Karte erstellen
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>
<p>Artikel Nr: ${product.id}</p>
<button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
`;
container.appendChild(card);
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.toFixed(2)} €</p>
<p>${product.description}</p>
<p>Artikel Nr: ${product.id}</p>
<button class="add-to-cart">Zum Warenkorb hinzufügen</button>
`;
const addToCartButton = card.querySelector('.add-to-cart');
addToCartButton.addEventListener('click', () => {
zumWarenkorbHinzufuegen(product);
});
container.appendChild(card);
});
})
// Fehlermeldung
.catch(err => {
console.error('Fehler beim Laden der Sportwagen_Produkte:', err);
console.error('Fehler beim Laden der Produkte:', err);
// Fehlermeldung auf der Seite anzeigen
const container = document.getElementById('products_sportwagen');
container.innerHTML =
`<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div> `;
container.innerHTML = `
<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`;
});
</script>
</body>
</html>
</html>

186
public/startseite/startseite.html
View File

@ -1,99 +1,133 @@
<!--
Startseite des Modellauto-Webshops
Zeigt ein Infobereich, die neuesten Produkte (per API geladen) und die Vorteile bei uns zu bestellen
-->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modellauto - Startseite</title>
<!-- Haupt-CSS-Datei -->
<link rel="stylesheet" href="./Styles/styles-main.css">
<!-- Icons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Script zum Laden von Header/Footer -->
<script src="/header_footer"></script>
</head>
<body>
<div class="wrapper">
<!-- Header -->
<div id="header-placeholder"></div>
<div class="wrapper">
<!-- Header -->
<div id="header"></div>
<main>
<!-- Infobereich -->
<section style="padding: 40px 20px; text-align: center; background: #fff;">
<h2>Willkommen beim Modellauto-Shop</h2>
<p>Bei uns finden Sie hochwertige Modellautos – ob Oldtimer, Sportwagen, Lkw's oder Motorräder.
Perfekt für Sammler, Bastler und Fans.
</p>
</section>
<main>
<!-- Infobereich -->
<section style="padding: 40px 20px; text-align: center; background: #fff;">
<h2>Willkommen beim Modellauto-Shop</h2>
<p>Bei uns finden Sie hochwertige Modellautos – ob Oldtimer, Sportwagen, Lkw's oder Motorräder.
Perfekt für Sammler, Bastler und Fans.
</p>
</section>
<!-- Hauptinhalt -->
<h1>Unsere Neusten Produkte: </h1>
<section class="card-grid" id="latest-products">
<!-- Dynamische Produkte (5 aktuelle Produkte) -->
</section>
<!-- Hauptinhalt -->
<h1>Unsere neusten Produkte: </h1>
<section class="card-grid" id="latest-products">
<!-- Dynamische Produkte (5 neuesten Produkte) -->
</section>
<!-- JavaScript zum Abrufen und Anzeigen der neuesten Produkte -->
<script>
// API-Aufruf
fetch('/api/products/new')
// Antwort als JSON parsen
.then(res => res.json())
.then(products => {
const container = document.getElementById('latest-products');
container.innerHTML = ''; // sicherheitshalber leeren
<!-- JavaScript zum Abrufen und Anzeigen der neuesten Produkte -->
<script>
// Funktion zum Hinzufügen zum Warenkorb
function zumWarenkorbHinzufuegen(product) {
let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
// Für jedes Produkt eine Karte erzeugen
products.forEach(product => {
const card = document.createElement('div');
card.classList.add('card');
// HTML-Inhalt der Karte mit Produktdaten füllen
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>
`;
// Karte in Container einfügen
container.appendChild(card);
});
})
.catch(err => {
console.error('Fehler beim Laden der neuesten Produkte:', err);
const existingProduct = warenkorb.find(p => p.product_id === product.id);
const container = document.getElementById('latest-products');
container.innerHTML =
`<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`;
if (existingProduct) {
existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
} else {
warenkorb.push({
product_id: product.id,
product_name: product.name,
price: product.price,
quantity: 1
});
</script>
}
localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
alert(`${product.name} wurde zum Warenkorb hinzugefügt!`);
zeigeWarenkorbAnzahl();
}
// Produkte laden
fetch('/api/products/new')
.then(res => res.json())
.then(products => {
const container = document.getElementById('latest-products');
container.innerHTML = '';
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.toFixed(2)} €</p>
<p>${product.description}</p>
<p>Artikel Nr: ${product.id}</p>
<button class="add-to-cart">Zum Warenkorb hinzufügen</button>
`;
const addToCartButton = card.querySelector('.add-to-cart');
addToCartButton.addEventListener('click', () => {
zumWarenkorbHinzufuegen(product);
});
container.appendChild(card);
});
})
.catch(err => {
console.error('Fehler beim Laden der Produkte:', err);
const container = document.getElementById('latest-products');
container.innerHTML = `
<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
</div>`;
});
</script>
<!-- Info-Sektion -->
<section class="info-cards-section">
<div class="info-card">
<i class='bx bx-package'></i>
<h3>Versandkostenfrei ab 50€</h3>
<p>Schneller & sicherer Versand mit Sendungsverfolgung.</p>
</div>
<div class="info-card">
<i class='bx bx-credit-card'></i>
<h3>Flexible Zahlungsmethoden</h3>
<p>PayPal, Kreditkarte, Klarna, Vorkasse – Sie haben die Wahl.</p>
</div>
<div class="info-card">
<i class='bx bx-undo'></i>
<h3>14 Tage Rückgaberecht</h3>
<p>Unzufrieden? Kein Problem – Rückgabe einfach & unkompliziert.</p>
</div>
<div class="info-card">
<i class='bx bx-star'></i>
<h3>Top-Bewertungen</h3>
<p>Unsere Kunden lieben uns – überzeugen Sie sich selbst!</p>
</div>
</section>
</main>
<!-- Infobereich mit den Vorteilen -->
<section class="info-cards-section">
<div class="info-card">
<i class='bx bx-package'></i>
<h3>Versandkostenfrei ab 50€</h3>
<p>Schneller & sicherer Versand mit Sendungsverfolgung.</p>
</div>
<div class="info-card">
<i class='bx bx-credit-card'></i>
<h3>Flexible Zahlungsmethoden</h3>
<p>PayPal, Kreditkarte, Klarna, Vorkasse – Sie haben die Wahl.</p>
</div>
<div class="info-card">
<i class='bx bx-undo'></i>
<h3>14 Tage Rückgaberecht</h3>
<p>Unzufrieden? Kein Problem – Rückgabe einfach & unkompliziert.</p>
</div>
<div class="info-card">
<i class='bx bx-star'></i>
<h3>Top-Bewertungen</h3>
<p>Unsere Kunden lieben uns – überzeugen Sie sich selbst!</p>
</div>
</section>
</main>
<!-- Fußzeiele -->
<div id="footer"></div>
<!-- Fußzeiele -->
<div id="footer"></div>
</div>
</body>

61
scripts/einfügenHeaderFooter.js
View File

@ -1,16 +1,33 @@
/**
* Dieser Code lädt beim Start der Seite (DOMContentLoaded) Header und Footer dynamisch vom Server
* (über /header und /footer) und fügt sie in die vorgesehenen Elemente ein.
* Tritt ein Fehler auf (z.B. Datei nicht vorhanden oder Serverproblem),
* wird eine Fehlermeldung direkt auf der Webseite angezeigt.
*/
// Warten bis das gesamte DOM geladen ist
document.addEventListener("DOMContentLoaded", () => {
// Header laden
const headerTarget = document.getElementById("header-placeholder");
const headerTarget = document.getElementById("header");
if (headerTarget) {
// Header-Inhalt vom Server anfordern
fetch("/header")
.then(response => {
// Prüfen, ob die Antwort erfolgreich war
if (!response.ok) throw new Error("Header nicht gefunden");
return response.text();
})
.then(data => {
// Header-Inhalt in die Seite einfügen
headerTarget.innerHTML = data;
// WICHTIG: Jetzt den Warenkorb zählen, nachdem der Header geladen ist!
zeigeWarenkorbAnzahl();
zeigeLoginStatus();
})
.catch(error => {
// Fehlerbehandlung: Fehlermeldung im Header-Bereich anzeigen
headerTarget.innerHTML = `
<div style="background: #ffdede; color: #a00; padding: 10px; text-align: center;">
Fehler beim Laden des Headers.
@ -22,15 +39,19 @@ document.addEventListener("DOMContentLoaded", () => {
// Footer laden
const footerTarget = document.getElementById("footer");
if (footerTarget) {
// Footer-Inhalt vom Server anfordern
fetch("/footer")
.then(response => {
// Prüfen, ob die Antwort erfolgreich war
if (!response.ok) throw new Error("Footer nicht gefunden");
return response.text();
})
.then(data => {
// Footer-Inhalt in die Seite einfügen
footerTarget.innerHTML = data;
})
.catch(error => {
// Fehlerbehandlung: Die Fehlermeldung im Footer-Bereich anzeigen
footerTarget.innerHTML = `
<div style="background: #ffdede; color: #a00; padding: 10px; text-align: center;">
Fehler beim Laden der Fußzeile.
@ -38,4 +59,40 @@ document.addEventListener("DOMContentLoaded", () => {
console.error(error);
});
}
});
window.zeigeWarenkorbAnzahl = function() {
const warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
let anzahl = 0;
warenkorb.forEach(produkt => {
anzahl += produkt.quantity;
});
const anzahlElement = document.getElementById('cart-count');
if (anzahlElement) {
anzahlElement.textContent = anzahl;
}
console.log('Warenkorb-Anzahl:', anzahl);
}
window.zeigeLoginStatus= function (){
const userId = sessionStorage.getItem('user_id')
const loginBtn = document.querySelector('.login-btn')
if (!loginBtn) return
if (userId) {
loginBtn.textContent = 'Logout'
loginBtn.href = '/'
loginBtn.addEventListener('click', (e) => {
e.preventDefault()
sessionStorage.clear()
alert('Sie wurden ausgeloggt.')
location.reload()
})
} else {
loginBtn.textContent = 'Login'
loginBtn.href= '/login'
}
}
});

23
scripts/example.js
View File

@ -1,23 +0,0 @@
let sidebarEl = document.getElementById("mySidebar")
let mainEl = document.getElementById("main")
/* Set the width of the sidebar to 250px and the left margin of the page content to 250px */
function openNav() {
sidebarEl.style.width = "250px";
mainEl.style.marginLeft = "250px";
}
/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
sidebarEl.style.width = "0";
mainEl.style.marginLeft = "0";
}
/* Toggle the sidebar */
function toggleNav() {
if (sidebarEl.offsetWidth > 0) {
closeNav()
} else {
openNav()
}
}

7
scripts/login.js
View File

@ -1,7 +0,0 @@
let nameEl = document.getElementById("loginMail");
let passwordEl = document.getElementById("loginPassword");
function login() {
console.log(nameEl.value)
console.log(passwordEl.value)
}

17
scripts/query/get_products.js
View File

@ -1,17 +0,0 @@
const mysql = require('mysql');
const connection = mysql.createConnection({
host: "localhost",
user: "root",
password: "",
database: "webshop"
})
connection.connect(function (err) {
if (err) throw err
console.log("Connected to database")
connection.query("SELECT * FROM webshop.product LIMIT 10", function (err, result) {
if (err) throw err
console.log(result)
})
})

17
scripts/query/get_users.js
View File

@ -1,17 +0,0 @@
const mysql = require('mysql');
const connection = mysql.createConnection({
host: "localhost",
user: "root",
password: "",
database: "webshop"
})
connection.connect(function (err) {
if (err) throw err
console.log("Connected to database")
connection.query("SELECT * FROM webshop.user WHERE ID = 15", function (err, result) {
if (err) throw err
console.log(result)
})
})

15
scripts/routes/other/route-index.js
View File

@ -6,10 +6,6 @@ router.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/startseite/startseite.html'));
})
router.get('/example', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/example/index.html'));
})
// Route - Login
router.get('/login', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/login/login.html'));
@ -60,13 +56,12 @@ router.get('/shop', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/shop/shop_lkw.html'));
})
router.get('/bestellformular', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/bestellformular/bestellformular.html'));
})
// Route - Warenkorb
router.get('/Warenkorb', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/warenkorb/warenkorb.html'));
})
// Route - Bestellformualar
router.get('/bestellformular', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/bestellformular/bestellformular.html'));
})
@ -74,4 +69,10 @@ router.get('/bestellformular', (req, res) => {
router.get('/bestellung', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/bestellung/bestellung.html'));
})
router.get('/kontaktformular', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/kontaktformular/kontaktformular.html'));
})
module.exports = router;

20
server.js
View File

@ -52,6 +52,7 @@ app.get('/api/products', (req, res) => {
});
});
// API-Route für die 5 neuen Produkte
app.get('/api/products/new', async (req, res) => {
// SQL-Abfrage für Produktdaten
const sql = 'SELECT * FROM webshop.product ORDER BY created_at DESC LIMIT 4';
@ -67,6 +68,7 @@ app.get('/api/products/new', async (req, res) => {
});
});
// API-Route für die Motorrad-Produkte
app.get('/api/products/motorrad', async (req, res) => {
// SQL-Abfrage für Produktdaten
const sql = 'SELECT * FROM webshop.product WHERE category_id = 4';
@ -82,6 +84,7 @@ app.get('/api/products/motorrad', async (req, res) => {
});
});
// API-Route für die Oldtimer-Produkte
app.get('/api/products/oldtimer', async (req, res) => {
// SQL-Abfrage für Produktdaten
const sql = 'SELECT * FROM webshop.product WHERE category_id = 2';
@ -97,6 +100,7 @@ app.get('/api/products/oldtimer', async (req, res) => {
});
});
// API-Route für die Lkw-Produkte
app.get('/api/products/lkw', async (req, res) => {
// SQL-Abfrage für Produktdaten
const sql = 'SELECT * FROM webshop.product WHERE category_id = 3';
@ -112,6 +116,7 @@ app.get('/api/products/lkw', async (req, res) => {
});
});
// API-Route für die Sportwagen-Produkte
app.get('/api/products/sportwagen', async (req, res) => {
// SQL-Abfrage für Produktdaten
const sql = 'SELECT * FROM webshop.product WHERE category_id = 1';
@ -130,11 +135,15 @@ app.get('/api/products/sportwagen', async (req, res) => {
app.post('/api/user/registration', (req, res) => {
// SQL-Query für Nutzerregistration
const {name, lower_name, email, passwd} = req.body;
const sql = "INSERT INTO webshop.user (name, lower_name, email, passwd, passwd_hash_algo) VALUES (?, ?, ?, ?, 'none')"
// Query abschicken
db.query(sql, [name, lower_name, email, passwd], (err, results) => {
if (err) {
if (err.code === 'ER_DUP_ENTRY'){
res.status(409).json({message: 'Diese E-Mail Adresse ist bereits registriert.'})
}
console.error('Fehler beim Schreiben in die Datenbank: ', err);
res.status(500).send('Fehler beim Schreiben in die Datenbank');
return;
@ -145,7 +154,7 @@ app.post('/api/user/registration', (req, res) => {
app.post('/api/user/login', (req, res) => {
const {email, password} = req.body
const sql = 'SELECT * FROM user WHERE email = ?'
const sql = 'SELECT * FROM webshop.user WHERE email = ?'
db.query(sql, [email], (err, results) => {
if (err) {
@ -163,8 +172,10 @@ app.post('/api/user/login', (req, res) => {
req.session.userId = user.id;
req.session.email = user.email;
req.session.vorname = user.name;
req.session.nachname = user.lower_name;
res.json({message: 'Login erfolgreich', id: user.id})
res.json({message: 'Login erfolgreich', id: user.id, name: user.name, lower_name: user.lower_name})
})
})
@ -269,7 +280,7 @@ app.get('/api/pruefe-artikel', (req, res) => {
return res.status(400).json({ error: 'Keine Artikelnummer angegeben.' });
}
const query = 'SELECT id FROM product WHERE id = ?';
const query = 'SELECT id FROM webshop.product WHERE id = ?';
db.query(query, [artikelnummer], (err, results) => {
if (err) {
@ -285,7 +296,10 @@ app.get('/api/pruefe-artikel', (req, res) => {
const getIndexRoute = require('./scripts/routes/other/route-index');
app.use('/', getIndexRoute);
// Hier werden alle anderen Seiten abgefangen, die keine definierten Routen haben (404 Fehler)
// und gibt die 404.html aus.
app.use((req, res) => {
// Setzt den Statuscode auf 404 und sendet die '404.html'-Datei
res.status(404).sendFile(path.join(__dirname, 'public', '404.html'));
});

1
static/Styles/bestellformular/bestellformular.css
View File

@ -1,7 +1,6 @@
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
padding: 20px;
margin: 0;
display: flex;
flex-direction: column;

5
static/Styles/styles-main.css
View File

@ -55,6 +55,11 @@ header {
object-fit: contain;
}
.logo-link {
text-decoration: none;
color: inherit;
}
header h1 {
font-size: 30px;
color: #333;