added product & shop

2022-05-23 09:26:57 +02:00
parent 8b0044470e
commit dd12b3f6ee
17 changed files with 473 additions and 19 deletions
--- a/js/app.ts
+++ b/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();
-            $('#main_nav_bar').find('#registerLink').hide();
-            $('#main_nav_bar').find('#logoutLink').show();
-            $('#main_nav_bar').find('#profileLink').show();
+            loggedInState();
        } else {
-            $('#main_nav_bar').find('#loginLink').show();
-            $('#main_nav_bar').find('#registerLink').show();
-            $('#main_nav_bar').find('#logoutLink').hide();
-            $('#main_nav_bar').find('#profileLink').hide();
+            loggedOutState();
        }
        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=/;';
-            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();
+            logout();
        });
        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;
+}
--- a/js/cart.js
+++ b/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();
+}
--- a/js/getProducts.js
+++ b/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;
+    }