reworked warenkorb

public/Warenkorb/warenkorb.html

@@ -11,28 +11,144 @@
 <!-- Header wird hier dynamisch geladen -->
 <div id="header-placeholder"></div>
 <div class="warenkorb">
-  <h2>🛒 Dein Warenkorb</h2>
+  <main>
-
+      <h2>Dein Warenkorb</h2>
-  <div class="item">
+      <div id="warenkorb"></div>
-    <div class="info">
+      <div id="gesamtpreis-container"></div>
-      <span class="name">Produkt 1</span>
+      <button id="zurKasseGehen">Zur Kasse gehen</button>
-
+  </main>
-    </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>
 </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>

public/bestellformular/bestellformular.html

@@ -20,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">
@@ -40,10 +40,8 @@
                 <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
+                    <input type="text" class="ArtikelNrText" id="ArtikelNr" name="ArtikelNr" required placeholder="Artikel Nr.">
-                           placeholder="Artikel Nr.">
+                    <input type="text" class="StueckzahlText" id="Stueckzahl" name="Stueckzahl" required placeholder="Anzahl">
-                    <input type="text" class="StueckzahlText" id="Stueckzahl" name="Stueckzahl" required
-                           placeholder="Anzahl">
                     <div class="verfuegbarkeit"></div>
                 </div>
 
@@ -79,6 +77,11 @@
                         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>
@@ -86,10 +89,32 @@
     </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) {
@@ -254,6 +279,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>

public/header_footer/header.html

@@ -21,7 +21,7 @@
         <!-- 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">0</span>
+            <span class="cart-count" id="cart-count">0</span>
         </a>
     </div>
   </div>

public/login/login.html

@@ -71,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 {

public/registrieren/registrieren.html

@@ -67,6 +67,42 @@
         </div>
     </main>
 
+    <script>
+        document.getElementById('register').addEventListener('click', async (event) => {
+            event.preventDefault();
+
+            const formData = {
+                name: document.getElementById('vorname').value,
+                lower_name: document.getElementById('nachname').value,
+                email: document.getElementById('email').value,
+                passwd: document.getElementById('regPassword').value,
+            }
+
+            try {
+                const response = await fetch('/api/user/registration', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(formData)
+                })
+                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= '/'
+                } else {
+                    alert('Fehler bei der Registrierung.')
+                }
+            } catch (error) {
+                console.error('Fehler: ', error)
+                alert('Fehler beim Senden des Formulars.')
+            }
+        })
+
+    </script>
     <!-- Fußzeiele -->
     <div id="footer"></div>
 

public/shop/shop.html

@@ -37,12 +37,35 @@
 <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 => {
@@ -52,28 +75,35 @@
                 card.classList.add('card');
                 // HTML-Struktur der Produktkarte
                 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>
-                      <p>Preis: ${product.price}€</p>
+                    <p>Preis: ${product.price.toFixed(2)} €</p>
-                      <p>${product.description}</p>
+                    <p>${product.description}</p>
-                      <p>Artikel Nr: ${product.id}</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>
-                  `;
+                `;
+
+                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 =
+            container.innerHTML = `
-                `<div class="error-message">
+                <div class="error-message">
-                            <h3>Fehler beim Laden der Produkte</h3>
+                    <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>
+                    <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
-                        </div>`;
+                        Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
+                </div>`;
         });
 </script>
 </body>

public/shop/shop_lkw.html

@@ -39,39 +39,68 @@
 
 <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');
+                const card = document.createElement('div');
-              card.classList.add('card');
+                card.classList.add('card');
-              card.innerHTML = `
+                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 =
+            container.innerHTML = `
-                `<div class="error-message">
+                <div class="error-message">
-                <h3>Fehler beim Laden der Produkte</h3>
+                    <h3>Fehler beim Laden der Produkte</h3>
-                <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
+                    <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
-                   Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
+                        Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
-              </div> `;
+                </div>`;
         });
 </script>
 

public/shop/shop_motorrad.html

@@ -38,38 +38,67 @@
 </div>
 
 <script>
-  fetch('/api/products/motorrad')
+  // Funktion zum Hinzufügen zum Warenkorb
-          .then(res => res.json())
+  function zumWarenkorbHinzufuegen(product) {
-          .then(products => {
+        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 = ''; // sicherheitshalber leeren
+            container.innerHTML = '';
 
             // Für jedes Produkt eine Karte erstellen
             products.forEach(product => {
-              const card = document.createElement('div');
+                const card = document.createElement('div');
-              card.classList.add('card');
+                card.classList.add('card');
-              card.innerHTML = `
+                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);
 
-            // Fehlermeldung auf der Seite anzeigen
             const container = document.getElementById('products_motorrad');
             container.innerHTML = `
-          <div class="error-message">
+                <div class="error-message">
-            <h3>Fehler beim Laden der Produkte</h3>
+                    <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>
+                    <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
-          </div>`;
+                        Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
+                </div>`;
         });
 </script>
 </body>

public/shop/shop_oldtimer.html

@@ -37,7 +37,30 @@
     <div id="footer"></div>
 </div>
 
-<script>
+  <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
     fetch('/api/products/oldtimer')
         .then(res => res.json())
         .then(products => {
@@ -52,27 +75,35 @@
                 card.classList.add('card');
                 // Die Karte mit Produktdaten füllen
                 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>
-                      <p>Preis: ${product.price}€</p>
+                    <p>Preis: ${product.price.toFixed(2)} €</p>
-                      <p>${product.description}</p>
+                    <p>${product.description}</p>
-                      <p>Artikel Nr: ${product.id}</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>
-                  `;
+                `;
+
+                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">
+                <div class="error-message">
-            <h3>Fehler beim Laden der Produkte</h3>
+                    <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>
+                    <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
-          </div>`;
+                        Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
+                </div>`;
         });
 </script>
 </body>

public/shop/shop_sportwagen.html

@@ -38,40 +38,68 @@
 </div>
 
 <script>
-    // API-Anfrage, um Sportwagen-Produkte zu laden
+  // Funktion zum Hinzufügen zum Warenkorb
-  fetch('/api/products/sportwagen')
+    function zumWarenkorbHinzufuegen(product) {
-          .then(res => res.json())
+        let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
-          .then(products => {
+
+        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');
+                const card = document.createElement('div');
-              card.classList.add('card');
+                card.classList.add('card');
-              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>
-            <p>Preis: ${product.price}€</p>
+                    <p>Preis: ${product.price.toFixed(2)} €</p>
-            <p>${product.description}</p>
+                    <p>${product.description}</p>
-            <p>Artikel Nr: ${product.id}</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 Sportwagen_Produkte:', err);
+            console.error('Fehler beim Laden der Produkte:', err);
 
             // Fehlermeldung auf der Seite anzeigen
             const container = document.getElementById('products_sportwagen');
-            container.innerHTML =
+            container.innerHTML = `
-                `<div class="error-message">
+                <div class="error-message">
-              <h3>Fehler beim Laden der Produkte</h3>
+                    <h3>Fehler beim Laden der Produkte</h3>
-              <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
+                    <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
-                 Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
+                        Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
-            </div> `;
+                </div>`;
         });
 </script>
 

public/startseite/startseite.html

@@ -38,41 +38,66 @@
 
             <!-- JavaScript zum Abrufen und Anzeigen der neuesten Produkte -->
             <script>
-                // API-Aufruf
+    // Funktion zum Hinzufügen zum Warenkorb
-                fetch('/api/products/new')
+    function zumWarenkorbHinzufuegen(product) {
-                    // Antwort als JSON parsen
+        let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
-                    .then(res => res.json())
-                    .then(products => {
-                        const container = document.getElementById('latest-products');
-                        container.innerHTML = ''; // sicherheitshalber leeren
 
-                        // Für jedes Produkt eine eigene Karte erzeugen
+        const existingProduct = warenkorb.find(p => p.product_id === product.id);
-                        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);
-                        });
-                    })
-                    // Fehlerbehandlung bei API-Aufruf
-                    .catch(err => {
-                        console.error('Fehler beim Laden der neuesten Produkte:', err);
 
-                        const container = document.getElementById('latest-products');
+        if (existingProduct) {
-                        container.innerHTML =
+            existingProduct.quantity += 1; // Wenn schon vorhanden, Anzahl erhöhen
-                        `<div class="error-message">
+        } else {
-                            <h3>Fehler beim Laden der Produkte</h3>
+            warenkorb.push({
-                            <p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran – bitte versuchen Sie es später erneut.</p>
+                product_id: product.id,
-                        </div>`;
+                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/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>
 
 

scripts/einfügenHeaderFooter.js

@@ -20,6 +20,9 @@ document.addEventListener("DOMContentLoaded", () => {
             .then(data => {
                 // Header-Inhalt in die Seite einfügen
                 headerTarget.innerHTML = data;
+
+                // 🚀 WICHTIG: Jetzt den Warenkorb zählen, nachdem der Header geladen ist!
+                zeigeWarenkorbAnzahl();
             })
             .catch(error => {
                 // Fehlerbehandlung: Fehlermeldung im Header-Bereich anzeigen
@@ -54,4 +57,19 @@ 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);
+    }
 });

server.js

@@ -168,8 +168,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})
     })
 })