added product & shop

components/cart.html

@@ -0,0 +1,35 @@
+<div class="container maincontent cartpage">
+    <div class="cart-container">
+        <h1 class="display-2">Einkaufswagen</h1>
+        <table class="table table-striped table-hover table-bordered">
+            <thead>
+                <tr>
+                    <th><strong>Product ID</strong></th>
+                    <th class="text-center"><strong>Löschen</strong></th>
+                    <th><strong>Produktname</strong></th>
+                    <th class="text-end"><strong>Preis</strong></th>
+                    <th class="text-end"><strong>Anzahl</strong></th>
+                    <th class="text-end"><strong >Gesamtpreis pro Produkt</strong></th>
+                </tr>
+            </thead>
+            <tbody id="carttable">
+            </tbody>
+        </table>
+        <hr>
+        <table class="table table-striped" id="carttotals">
+            <tr>
+                <td><strong>Gesamtanzahl</strong></td>
+                <td class="text-end"><strong>Gesamtpreis</strong></td>
+            </tr>
+            <tr>
+                <td>x <span id="itemsquantity">0</span></td>
+                <td class="text-end"><span id="total">0</span>€</td>
+            </tr>
+        </table>
+        <div class="cart-buttons">
+            <button type="button" class="btn btn-danger" id="emptycart">Empty Cart</button>
+            <button type="button" class="btn btn-success float-end" id="checkout">Checkout</button>
+        </div>
+    </div>
+</div>
+<script src="../js/cart.js"></script>

components/main_nav.html

@@ -18,7 +18,7 @@
                     <a class="nav-link"  id="aboutLink">About</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" id="shopLink">Shop</a>
+                    <a class="nav-link" type="button" id="shopLink">Shop</a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link" id="contactLink">Contact</a>
@@ -49,9 +49,9 @@
             <a class="nav-icon d-none d-lg-inline" href="#" data-bs-toggle="modal" data-bs-target="#marmeladenladen_search">
                 <i class="fa fa-fw fa-search text-dark mr-2"></i>
             </a>
-            <a class="nav-icon position-relative text-decoration-none" href="#">
+            <a class="nav-icon position-relative text-decoration-none" type="button" id="cartLink">
                 <i class="fa fa-fw fa-cart-arrow-down text-dark mr-1"></i>
-                <span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-light text-dark">7</span>
+                <span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-light text-dark" id="cartCount"></span>
             </a>
             <a class="nav-icon position-relative text-decoration-none" href="#">
                 <i class="fa fa-fw fa-user text-dark mr-3"></i>

components/shop.html

@@ -0,0 +1,9 @@
+<div class="container wrapper maincontent shoppingpage">
+    <div class="alert alert-success fade show" role="alert" id="productAddedAlert">
+      </div>
+    <div class="container" id="productOverview">
+        <div class="row g-1" id="productOverviewDiv">
+        </div>
+    </div>
+</div>
+<script src="../js/getProducts.js"></script>

js/app.ts

@@ -1,17 +1,13 @@
 $(document).ready(function() {
+    
     $('#mmlMainContent').load('../components/homepage.html');
     $('#top_nav_bar').load('../components/top_nav.html');
     $('#main_nav_bar').load('../components/main_nav.html', function() {
+        updateCartCount();
         if (document.cookie.indexOf('loggedIn=true') != -1) {
-            $('#main_nav_bar').find('#loginLink').hide();
+            loggedInState();
-            $('#main_nav_bar').find('#registerLink').hide();
-            $('#main_nav_bar').find('#logoutLink').show();
-            $('#main_nav_bar').find('#profileLink').show();
         } else {
-            $('#main_nav_bar').find('#loginLink').show();
+            loggedOutState();
-            $('#main_nav_bar').find('#registerLink').show();
-            $('#main_nav_bar').find('#logoutLink').hide();
-            $('#main_nav_bar').find('#profileLink').hide();
         }
         document.getElementById('registerLink')?.addEventListener('click', function() {
             $('#mmlMainContent').load('../components/register.html');
@@ -23,19 +19,63 @@ $(document).ready(function() {
             $('#mmlMainContent').load('../components/login.html');
         },);
         document.getElementById('logoutLink')?.addEventListener('click', function() {
-            document.cookie = 'loggedIn=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+            logout();
-            document.cookie = 'email=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
-            document.cookie = 'rememberme=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
-            $('#mmlMainContent').load('../components/homepage.html');
-            $('#main_nav_bar').find('#loginLink').show();
-            $('#main_nav_bar').find('#registerLink').show();
-            $('#main_nav_bar').find('#logoutLink').hide();
-            $('#main_nav_bar').find('#profileLink').hide();
         });
         document.getElementById('profileLink')?.addEventListener('click', function() {
             $('#mmlMainContent').load('../components/profile.html');
         });
+        document.getElementById('shopLink')?.addEventListener('click', function() {
+            $('#mmlMainContent').load('../components/shop.html');
+        });
+        document.getElementById('cartLink')?.addEventListener('click', function() {
+            $('#mmlMainContent').load('../components/cart.html');
+        });
     });
     $('#marmeladenladen_footer').load('../components/footer.html');
     $('#marmeladenladen_search').load('../components/modal.html');
 });
+
+function loggedInState() {
+    $('#main_nav_bar').find('#loginLink').hide();
+    $('#main_nav_bar').find('#registerLink').hide();
+    $('#main_nav_bar').find('#logoutLink').show();
+    $('#main_nav_bar').find('#profileLink').show();
+}
+
+function loggedOutState() {
+    $('#main_nav_bar').find('#loginLink').show();
+    $('#main_nav_bar').find('#registerLink').show();
+    $('#main_nav_bar').find('#logoutLink').hide();
+    $('#main_nav_bar').find('#profileLink').hide();
+}
+
+function logout() {
+    document.cookie = 'loggedIn=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+    document.cookie = 'email=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+    document.cookie = 'rememberme=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+    $('#mmlMainContent').load('../components/homepage.html');
+    $('#main_nav_bar').find('#loginLink').show();
+    $('#main_nav_bar').find('#registerLink').show();
+    $('#main_nav_bar').find('#logoutLink').hide();
+    $('#main_nav_bar').find('#profileLink').hide();
+}
+
+function updateCartCount() {
+    var items = getCartCount();
+    $('#cartCount').text(items);
+}
+
+function getCartCount() {
+    var items;
+    if (sessionStorage.getItem('cart')) {
+        var cart = JSON.parse(sessionStorage.getItem('cart')!) ?? [];
+        items = 0;
+        for (let i = 0; i < cart.length; i++) {
+            var object = JSON.parse(cart[i]);
+            items += object.count;
+        }
+    } else {
+        items = 0;
+    }
+    return items;
+}

js/cart.js

@@ -0,0 +1,79 @@
+$(document).ready(function () {
+    updateCartTotal();
+    document.getElementById("emptycart").addEventListener("click", emptyCart);
+});
+
+
+/* User Manually empty cart */
+function emptyCart() {
+    //remove cart session storage object & refresh cart totals
+    if (sessionStorage.getItem('cart')) {
+        sessionStorage.removeItem('cart');
+        updateCartTotal();
+        updateCartCount();
+        //clear message and remove class style
+    }
+}
+
+function updateCartTotal() {
+    //init
+    var total = 0;
+    var price = 0;
+    var items = 0;
+    var prodCount = 0;
+    var productname = "";
+    var carttable = "";
+    if (sessionStorage.getItem('cart')) {
+        //get cart data & parse to array
+        var cart = JSON.parse(sessionStorage.getItem('cart'));
+        //get no of items in cart 
+        items = cart.length;
+        //loop over cart array
+        for (var i = 0; i < items; i++) {
+            //convert each JSON product in array back into object
+            var x = JSON.parse(cart[i]);
+            //get property value of price;
+            productid = x.productid;
+            price = parseFloat(x.price);
+            productname = x.productname;
+            count = x.count;
+            totalperproduct = price * count;
+            totalperproduct = parseFloat(totalperproduct.toFixed(2));
+            //add price to total
+            carttable += "<tr><td>" + productid + "</td><td class='text-center'><button type='button' class='btn btn-danger removeproduct'>X</button></td><td>" + productname + "</td><td class='text-end'>" + price + "€</td><td class='text-end'>" + count + "</td><td class='text-end'>" + totalperproduct + "€</td></tr>";
+            total += totalperproduct;
+            total = parseFloat(total.toFixed(2));
+            prodCount += count;
+        }
+
+    }
+    //update total on website HTML
+    document.getElementById("total").innerHTML = total;
+    //insert saved products to cart table
+    document.getElementById("carttable").innerHTML = carttable;
+    //update items in cart on website HTML
+    document.getElementById("itemsquantity").innerHTML = prodCount;
+
+    var delbtns = document.getElementsByClassName("btn btn-danger removeproduct");
+    for (var i = 0; i < delbtns.length; i++) {
+        delbtns[i].addEventListener("click", function() { removeProductFromCart(this); });
+    }
+}
+
+function removeProductFromCart(elem) {
+    
+    var productid = elem.parentNode.parentNode.children[0].innerText;
+    var cart = JSON.parse(sessionStorage.getItem('cart'));
+    var items = cart.length;
+    for (var i = 0; i < items; i++) {
+        var x = JSON.parse(cart[i]);
+        if (x.productid == productid) {
+            cart.splice(i, 1);
+            break;
+        }
+    }
+    var stringCart = JSON.stringify(cart);
+    sessionStorage.setItem('cart', stringCart);
+    updateCartTotal();
+    updateCartCount();
+}

js/getProducts.js

@@ -0,0 +1,162 @@
+$(document).ready(function () {
+    getProducts();
+    document.getElementById("productAddedAlert").hidden = true;
+});
+
+function getProducts() {
+    //ajax call to php 
+    $.ajax({
+        url: '../logic/getProductData.php',
+        type: 'GET',
+        cache: false,
+        datatype: 'json',
+        data: {},
+        success: function (response) {
+            const data = JSON.parse(response);
+            //set data to fields
+            const productOverview = document.getElementById("productOverviewDiv");
+            for (let i = 0; i < data.length; i++) {
+                const product = document.createElement("div");
+                product.className = "product col-md-3";
+                product.id = data[i].id;
+                product.innerHTML = `<div class="card p-3">
+                                        <div class="text-center">
+                                            <img src="../res/img/${data[i].image}" class="card-img-top" alt="${data[i].name}" width=200>
+                                        </div>
+                                        <div class="product-details">
+                                            <span class="fw-bold d-block productname">${data[i].name}</span>
+                                            <span class="fw-bold d-block price">${data[i].price} €</span>
+                                            <span>${data[i].description}</span>
+                                            <div class="buttons d-flex flex-row shopbutton">
+                                                <div class="cart"><i class="fa fa-shopping-cart"></i></div> <button class="btn btn-success cart-button btn-block addtocart">Add to cart</button>
+                                            </div>
+                                            <div class="weight">
+                                                <small class="productweight">1 Stück | ${data[i].weight} g</small>
+                                            </div>
+                                            <div class="id">
+                                                <small class="productid">ID: ${data[i].product_id}</small>
+                                            </div>
+                                        </div>`;
+                productOverview.appendChild(product);
+            }
+
+            var btns = document.getElementsByClassName('btn btn-success cart-button btn-block addtocart');
+            for (var i = 0; i < btns.length; i++) {
+                btns[i].addEventListener('click', function () { addToCart(this); });
+            }
+        }
+    });
+}
+
+function addToCart(elem) {
+    //init
+    var productDetails = elem.parentNode.parentNode;
+    var productDetailsKids = productDetails.children;
+    var getprice;
+    var getproductName;
+    var getproductId;
+    var productCount;
+    var cart = [];
+    var stringCart;
+
+    for (let i = 0; i < productDetailsKids.length; i++) {
+        if (productDetailsKids[i].className == "fw-bold d-block price") {
+            getprice = productDetailsKids[i].innerText.replace(" €", "");
+        }
+        if (productDetailsKids[i].className == "fw-bold d-block productname") {
+            getproductName = productDetailsKids[i].innerText;
+        }
+        if (productDetailsKids[i].className == "id") {
+            getproductId = productDetailsKids[i].innerText.replace("ID: ", "");
+        }
+    }
+
+    //create product object
+    var product = {
+        productid: getproductId,
+        productname: getproductName,
+        price: getprice,
+        count: 1
+    };
+    //convert product data to JSON for storage
+    var stringProduct = JSON.stringify(product);
+    /*send product data to session storage */
+
+    if (!sessionStorage.getItem('cart')) {
+        //append product JSON object to cart array
+        cart.push(stringProduct);
+        //cart to JSON
+        stringCart = JSON.stringify(cart);
+        //create session storage cart item
+        sessionStorage.setItem('cart', stringCart);
+        addedToCart(getproductName);
+        updateCartCount();
+    }
+    else {
+        //get existing cart data from storage and convert back into array
+        cart = JSON.parse(sessionStorage.getItem('cart'));
+        var productExists = false;
+
+        for (let i = 0; i < cart.length; i++) {
+            var object = JSON.parse(cart[i]);
+            if (object.productid == getproductId) {
+                productExists = true;
+            }
+        }
+        if (!productExists) {
+            cart.push(stringProduct);
+            stringCart = JSON.stringify(cart);
+            sessionStorage.setItem('cart', stringCart);
+            addedToCart(getproductName);
+            updateCartCount();
+        }
+        else {
+            for (let i = 0; i < cart.length; i++) {
+                var object = JSON.parse(cart[i]);
+                if (object.productid == getproductId) {
+                    object.count++;
+                    cart[i] = JSON.stringify(object);
+                    stringCart = JSON.stringify(cart);
+                    sessionStorage.setItem('cart', stringCart);
+                    addedToCart(getproductName);
+                    updateCartCount();
+                }
+            }
+        }
+    }
+}
+
+    function addedToCart(pname) {
+        var message = pname + " was added to the cart";
+        var alerts = document.getElementById("productAddedAlert");
+        alerts.innerHTML = message;
+        if (!alerts.classList.contains("message")) {
+            alerts.classList.add("message");
+        }
+        alerts.hidden = false;
+        setTimeout(function () {
+            alerts.hidden = true;
+        }
+            , 3000);
+    }
+
+
+    function updateCartCount() {
+        var items = getCartCount();
+        $('#cartCount').text(items);
+    }
+
+    function getCartCount() {
+        var items;
+        if (sessionStorage.getItem('cart')) {
+            var cart = JSON.parse(sessionStorage.getItem('cart')) ?? [];
+            items = 0;
+            for (let i = 0; i < cart.length; i++) {
+                var object = JSON.parse(cart[i]);
+                items += object.count;
+            }
+        } else {
+            items = 0;
+        }
+        return items;
+    }

logic/getProductData.php

@@ -0,0 +1,35 @@
+<?php
+getData();
+function getData()
+{
+    require($_SERVER['DOCUMENT_ROOT'] . '/config/setupDBAccess.php');
+
+    $sql = "SELECT `product_id`, `name`, `price`, `description`, `stock`, `weight`, `image`, `category`, `created_at` FROM `products`";
+    $stmt = $db->prepare($sql);
+
+    $stmt->execute();
+    $stmt->store_result();
+    $stmt->bind_result($product_id, $name, $price, $description, $stock, $weight, $image, $category, $created_at);
+
+    $data = array();
+
+    while ($stmt->fetch()) {
+        $data[] = array(
+            'product_id' => $product_id,
+            'name' => $name,
+            'price' => $price,
+            'description' => $description,
+            'stock' => $stock,
+            'weight' => $weight,
+            'image' => $image,
+            'category' => $category,
+            'created_at' => $created_at
+        );
+    }
+    $data = json_encode($data);
+    $stmt->close();
+    $db->close();
+
+    echo $data;
+}
+?>

res/css/style.css

@@ -12,6 +12,9 @@
   background-color: #d86f23 !important;
   border-color: #ba5c19 !important;
 }
+.table-success {
+  background-color: #d86f23 !important;
+}
 
 /* Navbar */
 #top_nav_bar { min-height: 40px;}
@@ -86,4 +89,95 @@
 
 .registerform .form-control:read-only {
   background-color: #f07f7f;
+}
+
+
+/* shop page */
+.shoppingpage {
+  background: #eee;
+}
+.card{
+  border:1px solid #eee;
+  cursor: pointer;
+}
+.weight{
+  margin-top: -65px; 
+  transition: all 0.5s;  
+}
+.weight small{
+  color: #e2dede;
+}
+.id small{
+  color: white;
+}
+.shopbutton {
+  padding: 10px;
+  background-color: #d6d4d44f;
+  border-radius: 4px;
+  position: relative;
+  margin-top: 7px;
+  opacity: 0;
+  transition: all 0.8s;
+}
+.cart-button {
+  height: 48px
+}
+.cart-button:focus {
+  box-shadow: none
+}
+.cart {
+  position: relative;
+  height: 48px !important;
+  width: 50px;
+  margin-right: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #fff;
+  padding: 11px;
+  border-radius: 5px;
+  font-size: 14px;
+  transition: 1s ease-in-out;
+  overflow: hidden;
+}
+.cart-button.clicked span.dot {
+  animation: item 0.3s ease-in forwards
+}
+@keyframes item {
+  0% {
+      opacity: 1;
+      top: 30%;
+      left: 30%
+  }
+  25% {
+      opacity: 1;
+      left: 26%;
+      top: 0%
+  }
+  50% {
+      opacity: 1;
+      left: 23%;
+      top: -22%
+  }
+  75% {
+      opacity: 1;
+      left: 19%;
+      top: -18%
+  }
+  100% {
+      opacity: 1;
+      left: 14%;
+      top: 28%
+  }
+}
+.card:hover .buttons{
+  opacity: 1;
+}
+.card:hover .weight{
+   margin-top: 10px;
+}
+.card:hover{
+  transform: scale(1.04);
+  z-index: 2;
+  overflow: hidden;
 }