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

reworked warenkorb

Browse Source
This commit is contained in:
florianspengler 2025-04-29 14:45:07 +02:00
commit c6cf3c39ed
17 changed files with 273 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Seite nicht gefunden</title> <title>Seite nicht gefunden</title>
<!-- Haupt-CSS-Datei -->
<link rel="stylesheet" href="/Styles/styles-main.css"> <link rel="stylesheet" href="/Styles/styles-main.css">
<!-- Icons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <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> <script src="/header_footer"></script>
</head> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper">
<!-- Header --> <!-- Header -->
<div id="header-placeholder"></div> <div id="header"></div>
<!-- Hauptinhalt: Fehlermeldung -->
<main class="content" style="text-align: center; padding: 80px;"> <main class="content" style="text-align: center; padding: 80px;">
<h1>🚧 Seite nicht gefunden 🚧</h1> <h1>🚧 Seite nicht gefunden 🚧</h1>
<p>Diese Seite existiert nicht oder befindet sich noch in Arbeit.</p> <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> <a href="/" class="btn" style="width: auto; display: inline-block; margin-top: 20px;">Zur Startseite</a>
</main> </main>

19
public/bestellformular/bestellformular.html
View File

@ -6,12 +6,13 @@
<title>Bestellformular</title> <title>Bestellformular</title>
<link rel="stylesheet" href="/Styles/bestellformular/bestellformular.css"> <link rel="stylesheet" href="/Styles/bestellformular/bestellformular.css">
<link rel="stylesheet" href="./Styles/styles-main.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> <script src="/header_footer"></script>
</head> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper">
<!-- Header wird hier dynamisch geladen --> <!-- Header wird hier dynamisch geladen -->
<div id="header-placeholder"></div> <div id="header"></div>
<main> <main>
<div class="form-container"> <div class="form-container">
@ -37,23 +38,29 @@
<input type="text" id="ort" name="ort" required placeholder="Ort"> <input type="text" id="ort" name="ort" required placeholder="Ort">
<label for="ArtikelNr">Artikel Nr.:</label> <label for="ArtikelNr">Artikel Nr.:</label>
<div class="Artikel">
<button type="button" class="loeschen-button" onclick="loescheArtikel(this)">x</button>
<input type="text" class="ArtikelNrText" id="ArtikelNr" name="ArtikelNr" required placeholder="Artikel Nr.">
<input type="text" class="StueckzahlText" id="Stueckzahl" name="Stueckzahl" required placeholder="Anzahl">
<div class="verfuegbarkeit"></div>
</div>
<style> <style>
.Artikel{ .Artikel {
display: flex; display: flex;
align-content: center; align-content: center;
} }
.ArtikelNrText{ .ArtikelNrText {
max-width: 50%; max-width: 50%;
} }
.StueckzahlText{ .StueckzahlText {
max-width: 15%; max-width: 15%;
margin-left: 2.5%; margin-left: 2.5%;
} }
.loeschen-button{ .loeschen-button {
background-color: #ff6600; background-color: #ff6600;
color: white; color: white;
border: none; border: none;
@ -64,7 +71,7 @@
margin-right: 5px; margin-right: 5px;
} }
.verfuegbarkeit{ .verfuegbarkeit {
display: flex; display: flex;
align-content: center; align-content: center;
max-width: 20%; max-width: 20%;

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"> <footer class="footer">
<!-- Copyright-Hinweis -->
<p>&copy; 2025 Autohändler Webshop – Alle Rechte vorbehalten</p> <p>&copy; 2025 Autohändler Webshop – Alle Rechte vorbehalten</p>
<!-- Links zu Impressum und Datenschutz (keine Funktion) -->
<p> <p>
<a href="/impressum">Impressum</a> | <a href="/impressum">Impressum</a> |
<a href="/datenschutz">Datenschutz</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> <header>
<div class="logo-container"> <!-- Logo und Shop-Titel -->
<img src="/images/Logo.png" alt="Modellauto-Shop Logo" class="logo-img"> <a href="/" class="logo-link">
<h1>Modellauto - Shop</h1> <div class="logo-container">
</div> <img src="/images/Logo.png" alt="Modellauto-Shop Logo" class="logo-img">
<div class="header-right"> <h1>Modellauto - Shop</h1>
<a href="/login" class="login-btn">Login</a> </div>
<div class="header-right"> </a>
<a href="/warenkorb" class="cart"> <!-- Auf der rechten Seite des Headers befindet sich der Login-Button und der Warenkorb -->
<i class='bx bx-cart'></i> <div class="header-right">
<span class="cart-count" id="cart-count">0</span> <!-- Login-Button -->
</a> <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>
</div> </div>
</header> </header>
<!-- Navigationsmenü -->
<nav class="menu"> <nav class="menu">
<ul class="menu-list"> <ul class="menu-list">
<li class="menu-item"><a href="/">Startseite</a></li> <!-- Startseite Link -->
<li class="menu-item"> <li class="menu-item">
<a href="/shop">Shop</a> <a href="/"><i class='bx bx-home'></i> Startseite</a>
<ul class="submenu"> </li>
<li><a href="/shop/motorrad">Motorräder</a></li> <!-- Shop Link mit Dropdown-Menü für die verschiedene Unterkategorien -->
<li><a href="/shop/oldtimer">Oldtimer</a></li> <li class="menu-item">
<li><a href="/shop/sportwagen">Sportwagen</a></li> <a href="/shop"><i class='bx bx-store'></i> Shop</a>
<li><a href="/shop/lkw">LKWs</a></li> <ul class="submenu">
</ul> <li><a href="/shop/motorrad"></i> Motorräder</a></li>
</li> <li><a href="/shop/oldtimer"></i> Oldtimer</a></li>
<li class="menu-item"><a href="/ueberuns">Über uns</a></li> <li><a href="/shop/sportwagen"></i> Sportwagen</a></li>
<li class="menu-item"><a href="/kontakt">Kontakt</a></li> <li><a href="/shop/lkw"></i> LKWs</a></li>
</ul> </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="/kontakt"><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> </nav>

27
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> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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"> <link rel="stylesheet" href="./Styles/login/login.css">
<!-- Haupt-CSS-Datei -->
<link rel="stylesheet" href="./Styles/styles-main.css"> <link rel="stylesheet" href="./Styles/styles-main.css">
<!-- Icons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <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> <script src="/header_footer"></script>
<title>Login</title> <title>Login</title>
</head> </head>
<body> <body>
<!-- Header --> <!-- Header -->
<div id="header-placeholder"></div> <div id="header"></div>
<main class="main-content"> <main class="main-content">
<div class="login-container"> <div class="login-container">
<h2 class="login-title">Login</h2> <h2 class="title">Login</h2>
<!-- Login-Formular -->
<form class="login-form"> <form class="login-form">
<!-- Eingabefeld für Benutzername -->
<div class="input-group"> <div class="input-group">
<input id="email" type="text" placeholder="E-Mail" required/> <input id="email" type="text" placeholder="E-Mail" required/>
<i class="icon fas fa-user"></i> <i class="icon fas fa-user"></i>
</div> </div>
<!-- Eingabefeld für Passwort -->
<div class="input-group"> <div class="input-group">
<input id="password" type="password" placeholder="Passwort" required/> <input id="password" type="password" placeholder="Passwort" required/>
<i class="icon fas fa-lock"></i> <i class="icon fas fa-lock"></i>
</div> </div>
<button id="submit" type="submit" class="login-btn">Login</button>
<!-- Login-Button -->
<button type="submit" class="login-btn">Login</button>
<!-- Link zur Registrierungsseite -->
<p class="register-text"> <p class="register-text">
Noch keinen Account? <a href="/registrieren">Registrieren</a> Noch keinen Account? <a href="/registrieren">Registrieren</a>
</p> </p>
@ -65,6 +85,7 @@
} }
}) })
</script> </script>
<!-- Fußzeile --> <!-- Fußzeile -->
<div id="footer"></div> <div id="footer"></div>

31
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> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./Styles/registrieren/registrieren.css"> <title>Registrieren</title>
<link rel="stylesheet" href="./Styles/styles-main.css"> <!-- Registrieren-CSS-Datei -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <link rel="stylesheet" href="./Styles/registrieren/registrieren.css">
<script src="/header_footer"></script> <!-- Haupt-CSS-Datei -->
<title>Registrieren</title> <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> </head>
<body> <body>
<div class="page-container"> <div class="page-container">
<!-- Header --> <!-- Header -->
<div id="header-placeholder"></div> <div id="header"></div>
<!-- Registrierungsformular --> <!-- Registrierungsformular -->
<main class="content-wrapper"> <main class="content-wrapper">
<!-- Formular für Registrierung -->
<div class="register-wrapper"> <div class="register-wrapper">
<form action="register.php" method="POST"> <form action="register.php" method="POST">
<h2 class="title">Registrieren</h2> <h2 class="title">Registrieren</h2>
@ -38,6 +49,7 @@
<i class='bx bxs-lock-alt'></i> <i class='bx bxs-lock-alt'></i>
</div> </div>
<!-- Eingabe: Passwort bestätigen -->
<div class="input-box"> <div class="input-box">
<input type="password" id="confirmPassword" name="confirmPassword" placeholder="Passwort bestätigen" <input type="password" id="confirmPassword" name="confirmPassword" placeholder="Passwort bestätigen"
required> required>
@ -46,6 +58,7 @@
<button type="submit" class="btn" id="register">Registrieren</button> <button type="submit" class="btn" id="register">Registrieren</button>
<!-- Link zum Login für bestehende Nutzer -->
<div class="register-link"> <div class="register-link">
<br> <br>
<p>Bereits ein Konto? <a href="/login">Login</a></p> <p>Bereits ein Konto? <a href="/login">Login</a></p>

22
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> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop</title> <title>Shop</title>
<!-- Haupt-CSS-Datei -->
<link rel="stylesheet" href="/Styles/styles-main.css"> <link rel="stylesheet" href="/Styles/styles-main.css">
<!-- Icons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <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> <script src="/header_footer"></script>
</head> </head>
<body> <body>
<!-- Header --> <!-- Header -->
<div id="header-placeholder"></div> <div id="header"></div>
<!-- Hauptinhalt --> <!-- Hauptinhalt -->
<section style="padding: 0px 30px; text-align: left;"> <section style="padding: 0px 30px; text-align: left;">
@ -18,8 +27,9 @@
</section> </section>
<main> <main>
<!-- "Container" für die dynamisch geladenen Produktkarten -->
<section class="card-grid" id="products"> <section class="card-grid" id="products">
<!-- Dynamische Produkte --> <!-- Produkte werden hier eingefügt -->
</section> </section>
</main> </main>
@ -50,15 +60,20 @@
} }
// Produkte laden // Produkte laden
// Daten von der API abrufen
fetch('/api/products') fetch('/api/products')
.then(res => res.json()) .then(res => res.json())
.then(products => { .then(products => {
const container = document.getElementById('products'); const container = document.getElementById('products');
container.innerHTML = ''; container.innerHTML = '';
// Für jedes Produkt eine eigene Karte erstellen und einfügen
products.forEach(product => { products.forEach(product => {
// Neues div-Element für die Produktkarte
const card = document.createElement('div'); const card = document.createElement('div');
// CSS-Styling hinzufügen
card.classList.add('card'); card.classList.add('card');
// HTML-Struktur der Produktkarte
card.innerHTML = ` card.innerHTML = `
<img src="${product.image_url}" alt="${product.name}"> <img src="${product.image_url}" alt="${product.name}">
<h3>${product.name}</h3> <h3>${product.name}</h3>
@ -73,12 +88,15 @@
zumWarenkorbHinzufuegen(product); zumWarenkorbHinzufuegen(product);
}); });
// Karte in den Container einfügen
container.appendChild(card); container.appendChild(card);
}); });
}) })
// Fehlermeldung
.catch(err => { .catch(err => {
console.error('Fehler beim Laden der Produkte:', err); console.error('Fehler beim Laden der Produkte:', err);
// Fehlermeldung auf der Seite anzeigen
const container = document.getElementById('products'); const container = document.getElementById('products');
container.innerHTML = ` container.innerHTML = `
<div class="error-message"> <div class="error-message">

18
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> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop - LKW's</title> <title>Shop - LKW's</title>
<!-- Haupt-CSS-Datei -->
<link rel="stylesheet" href="/Styles/styles-main.css"> <link rel="stylesheet" href="/Styles/styles-main.css">
<!-- Icons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <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> <script src="/header_footer"></script>
</head> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper">
<!-- Header --> <!-- Header -->
<div id="header-placeholder"></div> <div id="header"></div>
<!-- Hauptinhalt --> <!-- Hauptinhalt -->
<main> <main>
@ -29,6 +38,7 @@
</div> </div>
<script> <script>
// API-Abfrage, um Lkw-Produkte zu laden
// Funktion zum Hinzufügen zum Warenkorb // Funktion zum Hinzufügen zum Warenkorb
function zumWarenkorbHinzufuegen(product) { function zumWarenkorbHinzufuegen(product) {
let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || []; let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
@ -58,6 +68,7 @@
const container = document.getElementById('products_lkw'); const container = document.getElementById('products_lkw');
container.innerHTML = ''; container.innerHTML = '';
// Für jedes Produkt eine Karte erstellen
products.forEach(product => { products.forEach(product => {
const card = document.createElement('div'); const card = document.createElement('div');
card.classList.add('card'); card.classList.add('card');
@ -78,9 +89,11 @@
container.appendChild(card); container.appendChild(card);
}); });
}) })
// Fehlerbehandlung
.catch(err => { .catch(err => {
console.error('Fehler beim Laden der Produkte:', err); console.error('Fehler beim Laden der Produkte:', err);
// Anzeige einer Fehlermeldung auf der Webseite
const container = document.getElementById('products_lkw'); const container = document.getElementById('products_lkw');
container.innerHTML = ` container.innerHTML = `
<div class="error-message"> <div class="error-message">
@ -91,8 +104,5 @@
}); });
</script> </script>
<!-- Fußzeiele -->
<div id="footer"></div>
</body> </body>
</html> </html>

36
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> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop - Motorräder</title> <title>Shop - Motorräder</title>
<link rel="stylesheet" href="/Styles/styles-main.css"> <!-- Haupt-CSS-Datei -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <link rel="stylesheet" href="/Styles/styles-main.css">
<script src="/header_footer"></script> <!-- 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> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper">
<!-- Header --> <!-- Header -->
<div id="header-placeholder"></div> <div id="header"></div>
<!-- Hauptinhalt --> <!-- Hauptinhalt -->
<main class="main-content"> <main class="main-content">
@ -20,10 +29,13 @@
</section> </section>
<section class="card-grid" id="products_motorrad"> <section class="card-grid" id="products_motorrad">
<!-- Dynamische Produkte oder Fehlermeldung --> <!-- Produkte -->
</section> </section>
</main> </main>
<!-- Fußzeile -->
<div id="footer"></div>
</div>
<script> <script>
// Funktion zum Hinzufügen zum Warenkorb // Funktion zum Hinzufügen zum Warenkorb
@ -55,6 +67,7 @@
const container = document.getElementById('products_motorrad'); const container = document.getElementById('products_motorrad');
container.innerHTML = ''; container.innerHTML = '';
// Für jedes Produkt eine Karte erstellen
products.forEach(product => { products.forEach(product => {
const card = document.createElement('div'); const card = document.createElement('div');
card.classList.add('card'); card.classList.add('card');
@ -75,6 +88,7 @@
container.appendChild(card); container.appendChild(card);
}); });
}) })
// Fehlermeldung
.catch(err => { .catch(err => {
console.error('Fehler beim Laden der Produkte:', err); console.error('Fehler beim Laden der Produkte:', err);
@ -87,9 +101,5 @@
</div>`; </div>`;
}); });
</script> </script>
<!-- Fußzeiele -->
<div id="footer"></div>
</body> </body>
</html> </html>

24
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> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop - Oldtimer</title> <title>Shop - Oldtimer</title>
<!-- Haupt-CSS-Datei -->
<link rel="stylesheet" href="/Styles/styles-main.css"> <link rel="stylesheet" href="/Styles/styles-main.css">
<!-- Icons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <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> <script src="/header_footer"></script>
</head> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper">
<!-- Header --> <!-- Header -->
<div id="header-placeholder"></div> <div id="header"></div>
<!-- Hauptinhalt --> <!-- Hauptinhalt -->
<main class="main-content"> <main class="main-content">
@ -20,7 +29,7 @@
</section> </section>
<section class="card-grid" id="products_oldtimer"> <section class="card-grid" id="products_oldtimer">
<!-- Dynamische Produkte oder Fehlermeldung --> <!-- Produkte -->
</section> </section>
</main> </main>
@ -56,11 +65,15 @@
.then(res => res.json()) .then(res => res.json())
.then(products => { .then(products => {
const container = document.getElementById('products_oldtimer'); const container = document.getElementById('products_oldtimer');
container.innerHTML = ''; container.innerHTML = ''; // sicherheitshalber leeren
// Für jedes Produkt eine Karte erstellen
products.forEach(product => { products.forEach(product => {
// Neues div für eine Produktkarte
const card = document.createElement('div'); const card = document.createElement('div');
// CSS-Styling hinzufügen
card.classList.add('card'); card.classList.add('card');
// Die Karte mit Produktdaten füllen
card.innerHTML = ` card.innerHTML = `
<img src="${product.image_url}" alt="${product.name}"> <img src="${product.image_url}" alt="${product.name}">
<h3>${product.name}</h3> <h3>${product.name}</h3>
@ -78,9 +91,12 @@
container.appendChild(card); container.appendChild(card);
}); });
}) })
// Fehlerbehandlung
.catch(err => { .catch(err => {
console.error('Fehler beim Laden der Produkte:', err); console.error('Fehler beim Laden der Produkte:', err);
// Anzeige einer Fehlermeldung auf der Webseite
const container = document.getElementById('products_oldtimer'); const container = document.getElementById('products_oldtimer');
container.innerHTML = ` container.innerHTML = `
<div class="error-message"> <div class="error-message">
@ -91,4 +107,4 @@
}); });
</script> </script>
</body> </body>
</html> </html>

34
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> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop - Sportwagen</title> <title>Shop - Sportwagen</title>
<link rel="stylesheet" href="/Styles/styles-main.css"> <!-- Haupt-CSS-Datei -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <link rel="stylesheet" href="/Styles/styles-main.css">
<script src="/header_footer"></script> <!-- 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> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper">
<!-- Header --> <!-- Header -->
<div id="header-placeholder"></div> <div id="header"></div>
<!-- Hauptinhalt --> <!-- Hauptinhalt -->
<main> <main>
@ -20,12 +29,12 @@
</section> </section>
<section class="card-grid" id="products_sportwagen"> <section class="card-grid" id="products_sportwagen">
<!-- Dynamische Produkte oder Fehlermeldung --> <!-- Einbindung Dynamische Produkte -->
</section> </section>
</main> </main>
<!-- Footer --> <!-- Footer -->
<div id="footer"></div> <div id="footer"></div>
</div> </div>
<script> <script>
@ -58,6 +67,7 @@
const container = document.getElementById('products_sportwagen'); const container = document.getElementById('products_sportwagen');
container.innerHTML = ''; container.innerHTML = '';
// Für jedes Produkt eine Karte erstellen
products.forEach(product => { products.forEach(product => {
const card = document.createElement('div'); const card = document.createElement('div');
card.classList.add('card'); card.classList.add('card');
@ -78,9 +88,11 @@
container.appendChild(card); container.appendChild(card);
}); });
}) })
// Fehlermeldung
.catch(err => { .catch(err => {
console.error('Fehler beim Laden der Produkte:', err); console.error('Fehler beim Laden der Produkte:', err);
// Fehlermeldung auf der Seite anzeigen
const container = document.getElementById('products_sportwagen'); const container = document.getElementById('products_sportwagen');
container.innerHTML = ` container.innerHTML = `
<div class="error-message"> <div class="error-message">

14
public/startseite/startseite.html
View File

@ -1,17 +1,25 @@
<!--
Startseite des Modellauto-Webshops
Zeigt ein Infobereich, die neuesten Produkte (per API geladen) und die Vorteile bei uns zu bestellen
-->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modellauto - Startseite</title> <title>Modellauto - Startseite</title>
<!-- Haupt-CSS-Datei -->
<link rel="stylesheet" href="./Styles/styles-main.css"> <link rel="stylesheet" href="./Styles/styles-main.css">
<!-- Icons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> <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> <script src="/header_footer"></script>
</head> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper">
<!-- Header --> <!-- Header -->
<div id="header-placeholder"></div> <div id="header"></div>
<main> <main>
<!-- Infobereich --> <!-- Infobereich -->
@ -25,7 +33,7 @@
<!-- Hauptinhalt --> <!-- Hauptinhalt -->
<h1>Unsere Neusten Produkte: </h1> <h1>Unsere Neusten Produkte: </h1>
<section class="card-grid" id="latest-products"> <section class="card-grid" id="latest-products">
<!-- Dynamische Produkte (5 aktuelle Produkte) --> <!-- Dynamische Produkte (5 neuesten Produkte) -->
</section> </section>
<!-- JavaScript zum Abrufen und Anzeigen der neuesten Produkte --> <!-- JavaScript zum Abrufen und Anzeigen der neuesten Produkte -->
@ -93,7 +101,7 @@
</script> </script>
<!-- Info-Sektion --> <!-- Infobereich mit den Vorteilen -->
<section class="info-cards-section"> <section class="info-cards-section">
<div class="info-card"> <div class="info-card">
<i class='bx bx-package'></i> <i class='bx bx-package'></i>

18
scripts/einfügenHeaderFooter.js
View File

@ -1,19 +1,31 @@
/**
* 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", () => { document.addEventListener("DOMContentLoaded", () => {
// Header laden // Header laden
const headerTarget = document.getElementById("header-placeholder"); const headerTarget = document.getElementById("header");
if (headerTarget) { if (headerTarget) {
// Header-Inhalt vom Server anfordern
fetch("/header") fetch("/header")
.then(response => { .then(response => {
// Prüfen, ob die Antwort erfolgreich war
if (!response.ok) throw new Error("Header nicht gefunden"); if (!response.ok) throw new Error("Header nicht gefunden");
return response.text(); return response.text();
}) })
.then(data => { .then(data => {
// Header-Inhalt in die Seite einfügen
headerTarget.innerHTML = data; headerTarget.innerHTML = data;
// 🚀 WICHTIG: Jetzt den Warenkorb zählen, nachdem der Header geladen ist! // 🚀 WICHTIG: Jetzt den Warenkorb zählen, nachdem der Header geladen ist!
zeigeWarenkorbAnzahl(); zeigeWarenkorbAnzahl();
}) })
.catch(error => { .catch(error => {
// Fehlerbehandlung: Fehlermeldung im Header-Bereich anzeigen
headerTarget.innerHTML = ` headerTarget.innerHTML = `
<div style="background: #ffdede; color: #a00; padding: 10px; text-align: center;"> <div style="background: #ffdede; color: #a00; padding: 10px; text-align: center;">
Fehler beim Laden des Headers. Fehler beim Laden des Headers.
@ -25,15 +37,19 @@ document.addEventListener("DOMContentLoaded", () => {
// Footer laden // Footer laden
const footerTarget = document.getElementById("footer"); const footerTarget = document.getElementById("footer");
if (footerTarget) { if (footerTarget) {
// Footer-Inhalt vom Server anfordern
fetch("/footer") fetch("/footer")
.then(response => { .then(response => {
// Prüfen, ob die Antwort erfolgreich war
if (!response.ok) throw new Error("Footer nicht gefunden"); if (!response.ok) throw new Error("Footer nicht gefunden");
return response.text(); return response.text();
}) })
.then(data => { .then(data => {
// Footer-Inhalt in die Seite einfügen
footerTarget.innerHTML = data; footerTarget.innerHTML = data;
}) })
.catch(error => { .catch(error => {
// Fehlerbehandlung: Die Fehlermeldung im Footer-Bereich anzeigen
footerTarget.innerHTML = ` footerTarget.innerHTML = `
<div style="background: #ffdede; color: #a00; padding: 10px; text-align: center;"> <div style="background: #ffdede; color: #a00; padding: 10px; text-align: center;">
Fehler beim Laden der Fußzeile. Fehler beim Laden der Fußzeile.

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

@ -60,13 +60,12 @@ router.get('/shop', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/shop/shop_lkw.html')); res.sendFile(path.join(__dirname, '../../../public/shop/shop_lkw.html'));
}) })
router.get('/bestellformular', (req, res) => { // Route - Warenkorb
res.sendFile(path.join(__dirname, '../../../public/bestellformular/bestellformular.html'));
})
router.get('/Warenkorb', (req, res) => { router.get('/Warenkorb', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/warenkorb/warenkorb.html')); res.sendFile(path.join(__dirname, '../../../public/warenkorb/warenkorb.html'));
}) })
// Route - Bestellformualar
router.get('/bestellformular', (req, res) => { router.get('/bestellformular', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/bestellformular/bestellformular.html')); res.sendFile(path.join(__dirname, '../../../public/bestellformular/bestellformular.html'));
}) })

8
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) => { app.get('/api/products/new', async (req, res) => {
// SQL-Abfrage für Produktdaten // SQL-Abfrage für Produktdaten
const sql = 'SELECT * FROM webshop.product ORDER BY created_at DESC LIMIT 4'; 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) => { app.get('/api/products/motorrad', async (req, res) => {
// SQL-Abfrage für Produktdaten // SQL-Abfrage für Produktdaten
const sql = 'SELECT * FROM webshop.product WHERE category_id = 4'; 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) => { app.get('/api/products/oldtimer', async (req, res) => {
// SQL-Abfrage für Produktdaten // SQL-Abfrage für Produktdaten
const sql = 'SELECT * FROM webshop.product WHERE category_id = 2'; 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) => { app.get('/api/products/lkw', async (req, res) => {
// SQL-Abfrage für Produktdaten // SQL-Abfrage für Produktdaten
const sql = 'SELECT * FROM webshop.product WHERE category_id = 3'; 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) => { app.get('/api/products/sportwagen', async (req, res) => {
// SQL-Abfrage für Produktdaten // SQL-Abfrage für Produktdaten
const sql = 'SELECT * FROM webshop.product WHERE category_id = 1'; const sql = 'SELECT * FROM webshop.product WHERE category_id = 1';
@ -287,7 +292,10 @@ app.get('/api/pruefe-artikel', (req, res) => {
const getIndexRoute = require('./scripts/routes/other/route-index'); const getIndexRoute = require('./scripts/routes/other/route-index');
app.use('/', getIndexRoute); 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) => { 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')); res.status(404).sendFile(path.join(__dirname, 'public', '404.html'));
}); });

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

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

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

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