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

- cleaned up and formatted code

Browse Source
This commit is contained in:
Fabian 2025-05-01 15:07:23 +02:00
parent 535d6e0737
commit 373d655bae
10 changed files with 75 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/Warenkorb/warenkorb.html
View File

@ -29,7 +29,7 @@
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
ladeWarenkorb(); ladeWarenkorb();
document.getElementById('zurKasseGehen').addEventListener('click', function() { document.getElementById('zurKasseGehen').addEventListener('click', function () {
window.location.href = '/bestellformular'; // Deine Bestellformular-Seite window.location.href = '/bestellformular'; // Deine Bestellformular-Seite
}); });
}); });
@ -116,6 +116,6 @@
localStorage.setItem('warenkorb', JSON.stringify(warenkorb)); localStorage.setItem('warenkorb', JSON.stringify(warenkorb));
ladeWarenkorb(); ladeWarenkorb();
} }
</script> </script>
</body> </body>
</html> </html>

7
public/bestellformular/bestellformular.html
View File

@ -24,7 +24,7 @@
<label for="nachname">Nachname:</label> <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">
<label for="kundenNr">Kunden Nr.:</label> <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.">
<label for="strasse">Straße:</label> <label for="strasse">Straße:</label>
@ -36,7 +36,7 @@
<label for="ort">Ort:</label> <label for="ort">Ort:</label>
<input type="text" id="ort" name="ort" required placeholder="Ort"> <input type="text" id="ort" name="ort" required placeholder="Ort">
<label>Artikel Nr. / Stückzahl:</label> <label>Artikel-Nr. / Stückzahl:</label>
<a class="button-submit" id="sendOrder">Bestellung absenden</a> <a class="button-submit" id="sendOrder">Bestellung absenden</a>
@ -56,7 +56,6 @@
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const formular = document.getElementById('bestellform');
const kundenNrInput = document.getElementById('KundenNr'); const kundenNrInput = document.getElementById('KundenNr');
const VornameInput = document.getElementById('Vorname'); const VornameInput = document.getElementById('Vorname');
const NachnameInput = document.getElementById('Nachname'); const NachnameInput = document.getElementById('Nachname');
@ -142,7 +141,7 @@
const result = await response.json(); const result = await response.json();
if (response.ok) { if (response.ok) {
// Bestellung erfolgreich -> Weiterleitung // Bestellung erfolgreich → Weiterleitung
warenkorbLeeren(); warenkorbLeeren();
window.location.href = "/bestellung"; window.location.href = "/bestellung";
} else { } else {

22
public/bestellung/bestellung.html
View File

@ -33,23 +33,23 @@
window.location.href = '/login'; window.location.href = '/login';
return; return;
} }
try { try {
const response = await fetch('/api/bestellung/daten', { const response = await fetch('/api/bestellung/daten', {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
body: JSON.stringify({ user_id: user_id }) body: JSON.stringify({user_id: user_id})
}); });
if (response.ok) { if (response.ok) {
const daten = await response.json(); const daten = await response.json();
const bestellungContainer = document.getElementById('bestellung'); const bestellungContainer = document.getElementById('bestellung');
bestellungContainer.innerHTML = ''; bestellungContainer.innerHTML = '';
const bestellungen = {}; const bestellungen = {};
daten.forEach(item => { daten.forEach(item => {
if (!bestellungen[item.order_id]) { if (!bestellungen[item.order_id]) {
bestellungen[item.order_id] = { bestellungen[item.order_id] = {
@ -68,24 +68,24 @@
const bestellung = bestellungen[orderId]; const bestellung = bestellungen[orderId];
const bestellCard = document.createElement('div'); const bestellCard = document.createElement('div');
bestellCard.className = 'bestell-info-card'; bestellCard.className = 'bestell-info-card';
let produkteHTML = ''; let produkteHTML = '';
bestellung.produkte.forEach(produkt => { bestellung.produkte.forEach(produkt => {
produkteHTML += ` produkteHTML += `
<p>• ${produkt.name} — ${produkt.quantity} Stück — Preis: ${produkt.preis.toFixed(2)} €</p> <p>• ${produkt.name} — ${produkt.quantity} Stück — Preis: ${produkt.preis.toFixed(2)} €</p>
`; `;
}); });
bestellCard.innerHTML = ` bestellCard.innerHTML = `
<h3>Bestellnummer: ${orderId}</h3> <h3>Bestellnummer: ${orderId}</h3>
${produkteHTML} ${produkteHTML}
</br> </br>
<p><strong>Gesamtsumme:</strong> ${bestellung.total.toFixed(2)} €</p> <p><strong>Gesamtsumme:</strong> ${bestellung.total.toFixed(2)} €</p>
`; `;
bestellungContainer.appendChild(bestellCard); bestellungContainer.appendChild(bestellCard);
} }
} else if (response.status === 404) { } else if (response.status === 404) {
document.getElementById('bestellung').innerHTML = '<p>Keine Bestellungen gefunden.</p>'; document.getElementById('bestellung').innerHTML = '<p>Keine Bestellungen gefunden.</p>';
} else { } else {
@ -95,10 +95,10 @@
console.error('Fehler: ', error); console.error('Fehler: ', error);
} }
} }
window.addEventListener('DOMContentLoaded', ladeBestellung); window.addEventListener('DOMContentLoaded', ladeBestellung);
</script> </script>
<!-- Footer wird dynamisch geladen --> <!-- Footer wird dynamisch geladen -->
<div id="footer"></div> <div id="footer"></div>
</body> </body>

15
public/header_footer/header.html
View File

@ -1,6 +1,6 @@
<!-- <!--
Header-Bereich Einbindung Header-Bereich Einbindung
Zeigt Logo, Link zur Startseite, Warenkorb (beispielhaft, keine Funktion) und Menüleiste an zeigt Logo, Link zur Startseite, Warenkorb (beispielhaft, keine Funktion) und Menüleiste an
--> -->
<header> <header>
<!-- Logo und Shop-Titel --> <!-- Logo und Shop-Titel -->
@ -24,7 +24,6 @@
<span class="cart-count" id="cart-count">0</span> <span class="cart-count" id="cart-count">0</span>
</a> </a>
</div> </div>
</div>
</header> </header>
<!-- Navigationsmenü --> <!-- Navigationsmenü -->
@ -38,17 +37,17 @@
<li class="menu-item"> <li class="menu-item">
<a href="/shop"><i class='bx bx-store'></i> Shop</a> <a href="/shop"><i class='bx bx-store'></i> Shop</a>
<ul class="submenu"> <ul class="submenu">
<li><a href="/shop/motorrad"></i> Motorräder</a></li> <li><a href="/shop/motorrad"> Motorräder</a></li>
<li><a href="/shop/oldtimer"></i> Oldtimer</a></li> <li><a href="/shop/oldtimer"> Oldtimer</a></li>
<li><a href="/shop/sportwagen"></i> Sportwagen</a></li> <li><a href="/shop/sportwagen"> Sportwagen</a></li>
<li><a href="/shop/lkw"></i> LKWs</a></li> <li><a href="/shop/lkw"> LKWs</a></li>
</ul> </ul>
</li> </li>
<!-- Link zu Über uns--> <!-- Link zu über uns-->
<li class="menu-item"> <li class="menu-item">
<a href="/ueberuns"><i class='bx bx-group'></i> Über uns</a> <a href="/ueberuns"><i class='bx bx-group'></i> Über uns</a>
</li> </li>
<!-- Link zur Kontakt Seite--> <!-- Link zur Kontaktseite-->
<li class="menu-item"> <li class="menu-item">
<a href="/kontaktformular"><i class='bx bx-envelope'></i> Kontakt</a> <a href="/kontaktformular"><i class='bx bx-envelope'></i> Kontakt</a>
</li> </li>

81
public/kontaktformular/kontaktformular.html
View File

@ -1,55 +1,58 @@
<!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>Kontaktformular</title> <title>Kontaktformular</title>
<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"> <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 --> <!-- Header -->
<div id="header"></div> <div id="header"></div>
<main> <main>
<section style="padding: 40px 20px; max-width: 700px; margin: 0 auto;"> <section style="padding: 40px 20px; max-width: 700px; margin: 0 auto;">
<h1>Kontaktieren Sie uns</h1> <h1>Kontaktieren Sie uns</h1>
<p style="margin-bottom: 30px;">Sie haben Fragen oder Anregungen? Schreiben Sie uns – wir melden uns schnellstmöglich!</p> <p style="margin-bottom: 30px;">Sie haben Fragen oder Anregungen? Schreiben Sie uns – wir melden uns
schnellstmöglich!</p>
<form id="contact-form"> <form id="contact-form">
<div class="input-box"> <div class="input-box">
<input type="text" name="name" placeholder="Ihr Name" required> <input type="text" name="name" placeholder="Ihr Name" required>
<i class='bx bx-user'></i> <i class='bx bx-user'></i>
</div> </div>
<div class="input-box"> <div class="input-box">
<input type="email" name="email" placeholder="Ihre E-Mail-Adresse" required> <input type="email" name="email" placeholder="Ihre E-Mail-Adresse" required>
<i class='bx bx-envelope'></i> <i class='bx bx-envelope'></i>
</div> </div>
<div class="input-box"> <div class="input-box">
<input type="text" name="betreff" placeholder="Betreff" required> <input type="text" name="betreff" placeholder="Betreff" required>
<i class='bx bx-edit-alt'></i> <i class='bx bx-edit-alt'></i>
</div> </div>
<div class="input-box"> <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> <textarea name="nachricht" placeholder="Ihre Nachricht" rows="6"
</div> style="width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;"
<button type="submit" class="btn">Nachricht senden</button> required></textarea>
</form> </div>
</section> <button type="submit" class="btn">Nachricht senden</button>
</main> </form>
</section>
</main>
<!-- Footer --> <!-- Footer -->
<div id="footer"></div> <div id="footer"></div>
</div> </div>
<script> <script>
document.getElementById('contact-form').addEventListener('submit', function(e) { document.getElementById('contact-form').addEventListener('submit', function (e) {
e.preventDefault(); e.preventDefault();
alert('Vielen Dank für Ihre Nachricht! Wir melden uns bald bei Ihnen.'); alert('Vielen Dank für Ihre Nachricht! Wir melden uns bald bei Ihnen.');
this.reset(); // Formular leeren this.reset(); // Formular leeren
}); });
</script> </script>
</body> </body>
</html> </html>

6
public/shop/shop.html
View File

@ -33,12 +33,12 @@
</section> </section>
</main> </main>
<!-- Fußzeiele --> <!-- Fußzeile -->
<div id="footer"></div> <div id="footer"></div>
<script> <script>
// 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')) || [];
const existingProduct = warenkorb.find(p => p.product_id === product.id); const existingProduct = warenkorb.find(p => p.product_id === product.id);

2
public/shop/shop_lkw.html
View File

@ -33,7 +33,7 @@
</section> </section>
</main> </main>
<!-- Fußzeiele --> <!-- Fußzeile -->
<div id="footer"></div> <div id="footer"></div>
</div> </div>

4
public/shop/shop_motorrad.html
View File

@ -38,8 +38,8 @@
</div> </div>
<script> <script>
// 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')) || [];
const existingProduct = warenkorb.find(p => p.product_id === product.id); const existingProduct = warenkorb.find(p => p.product_id === product.id);

6
public/shop/shop_oldtimer.html
View File

@ -37,9 +37,9 @@
<div id="footer"></div> <div id="footer"></div>
</div> </div>
<script> <script>
// 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')) || [];
const existingProduct = warenkorb.find(p => p.product_id === product.id); const existingProduct = warenkorb.find(p => p.product_id === product.id);

2
public/shop/shop_sportwagen.html
View File

@ -38,7 +38,7 @@
</div> </div>
<script> <script>
// 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')) || [];