ordersubmit

js/app.ts

@@ -29,6 +29,7 @@ $(document).ready(function() {
         });
         document.getElementById('cartLink')?.addEventListener('click', function() {
             $('#mmlMainContent').load('../components/cart.html');
+            
         });
     });
     $('#marmeladenladen_footer').load('../components/footer.html');

js/cart.js

@@ -1,6 +1,13 @@
 $(document).ready(function () {
     updateCartTotal();
     document.getElementById("emptycart").addEventListener("click", emptyCart);
+    document.getElementById("checkout").addEventListener("click", function () {
+        if (sessionStorage.getItem('cart') && document.cookie.indexOf("loggedIn=true") != -1) {
+            $('#mmlMainContent').load('../components/checkout.html');
+        } else {
+            $('#mmlMainContent').load('../components/login.html');
+        }
+    });
 });
 
 
@@ -40,7 +47,7 @@ function updateCartTotal() {
             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>";
+            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-center'><button type='button' class='btn btn-danger decreasecount float-start'>-</button>" + count + "<button type='button' class='btn btn-success increasecount float-end'>+</button></td><td class='text-end'>" + totalperproduct + "€</td></tr>";
             total += totalperproduct;
             total = parseFloat(total.toFixed(2));
             prodCount += count;
@@ -58,6 +65,17 @@ function updateCartTotal() {
     for (var i = 0; i < delbtns.length; i++) {
         delbtns[i].addEventListener("click", function() { removeProductFromCart(this); });
     }
+
+    var incbtns = document.getElementsByClassName("btn btn-success increasecount");
+    for (var i = 0; i < incbtns.length; i++) {
+        incbtns[i].addEventListener("click", function() { increaseCount(this); });
+    }
+
+    var decbtns = document.getElementsByClassName("btn btn-danger decreasecount");
+    for (var i = 0; i < decbtns.length; i++) {
+        decbtns[i].addEventListener("click", function() { decreaseCount(this); });
+    }
+
 }
 
 function removeProductFromCart(elem) {
@@ -76,4 +94,49 @@ function removeProductFromCart(elem) {
     sessionStorage.setItem('cart', stringCart);
     updateCartTotal();
     updateCartCount();
-}
+}
+
+//function to increase product count in cart
+function increaseCount(elem) {
+    console.log("triggered");
+    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) {
+            x.count++;
+            cart[i] = JSON.stringify(x);
+            console.log(x.count);
+            break;
+        }
+    }
+    var stringCart = JSON.stringify(cart);
+    sessionStorage.setItem('cart', stringCart);
+    updateCartTotal();
+    updateCartCount();
+}
+
+//function to decrease product count in cart
+function decreaseCount(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) {
+            x.count--;
+            if (x.count < 1) {
+                cart.splice(i, 1);
+                break;
+            } else {
+                cart[i] = JSON.stringify(x);
+                break;
+            }
+        }
+    }
+    var stringCart = JSON.stringify(cart);
+    sessionStorage.setItem('cart', stringCart);
+    updateCartTotal();
+    updateCartCount();
+}

js/checkout.js

@@ -0,0 +1,169 @@
+$(document).ready(function () {
+    getProductsOnSide();
+    getUserData();
+    //add click listener to submit order button
+    $('#submitOrder').click(function () {
+        //supress default
+        event.preventDefault();
+        submitOrder();
+    });
+});
+
+function getTotalAmount() {
+    var cart = JSON.parse(sessionStorage.getItem('cart'));
+    var items = cart.length;
+    var total = 0;
+    for (var i = 0; i < items; i++) {
+        var x = JSON.parse(cart[i]);
+        total += x.price * x.count;
+    }
+    return total.toFixed(2);
+}
+
+
+function getProductsOnSide() {
+    var cart = JSON.parse(sessionStorage.getItem('cart'));
+    var items = cart.length;
+    for (var i = 0; i < items; i++) {
+        var x = JSON.parse(cart[i]);
+        /*console.log(x);
+        console.log(x.count);
+        console.log(x.productid)
+        console.log(x.price);
+        console.log(x.productname);*/
+        var total = x.count * x.price;
+        const productListSideways = document.getElementById('productListSideways');
+        const product = document.createElement('li');
+
+        product.className = "list-group-item d-flex justify-content-between lh-sm";
+        product.id = productid;
+        product.innerHTML = `<div>
+                                <h6 class="my-0">${x.productname}</h6>
+                                <small class="text-muted">${x.count} Stück x ${x.price} €</small>
+                            </div>
+                            <span class="text-muted">${total} €</span>`;
+        productListSideways.appendChild(product);
+    }
+    var gesamtMengeCart = getCartCount();
+    var totalMoneyAmount = getTotalAmount();
+    $('#gesamtMengeCart').text(gesamtMengeCart);
+    const totalAmount = document.createElement('li');
+    totalAmount.className = "list-group-item d-flex justify-content-between";
+    totalAmount.innerHTML = `<span>Gesamtpreis (EUR)</span>
+                            <strong>${totalMoneyAmount} €</strong>`;
+    productListSideways.appendChild(totalAmount);
+}
+
+function getUserData() {
+    const firstname = document.getElementById('firstName');
+    const lastname = document.getElementById('lastName');
+    const address = document.getElementById('address');
+    const plz = document.getElementById('zip');
+    const city = document.getElementById('city');
+    var username = getCookie('email');
+    var loggedIn = getCookie('loggedIn');
+    var sendData = {
+        "username": username,
+    };
+    stringData = JSON.stringify(sendData);
+    if (loggedIn == 'true') {
+        $.ajax({
+            url: '../logic/getUserData.php',
+            type: 'POST',
+            cache: false,
+            datatype: 'json',
+            data: stringData,
+            success: function (response) {
+                const data = JSON.parse(response);
+                //set data to fields
+                firstname.value = data.firstname;
+                lastname.value = data.lastname;
+                address.value = data.address;
+                plz.value = data.plz;
+                city.value = data.city;
+            }
+        });
+    } else {
+        window.location.href = '../index.html';
+    }
+}
+
+function getCookie(cname) {
+    let name = cname + "=";
+    let decodeCookie = decodeURIComponent(document.cookie);
+    let ca = decodeCookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0) == ' ') {
+            c = c.substring(1);
+        }
+        if (c.indexOf(name) == 0) {
+            return c.substring(name.length, c.length);
+        }
+    }
+    return "";
+}
+
+function paymentTypeClicked() {
+    if (document.getElementById('credit').checked) {
+        document.getElementById('creditCardData').style.display = 'block';
+    } else {
+        document.getElementById('creditCardData').style.display = 'none';
+    }
+}
+
+        
+function submitOrder() {
+    var cart = JSON.parse(sessionStorage.getItem('cart'));
+    var items = cart.length;
+    var total = getTotalAmount();
+    var firstname = document.getElementById('firstName').value;
+    var lastname = document.getElementById('lastName').value;
+    var address = document.getElementById('address').value;
+    var plz = document.getElementById('zip').value;
+    var city = document.getElementById('city').value;
+    if (document.getElementById('credit').checked) {
+        var paymentId = 2;
+        var creditCardNumber = document.getElementById('creditCardNumber').value;
+        var creditCardExpiration = document.getElementById('creditCardExpiration').value;
+        var creditCardCvv = document.getElementById('creditCardCvv').value;
+    } else {
+        var paymentId = 1;
+    }
+    var username = getCookie('email');
+    var loggedIn = getCookie('loggedIn');
+    var sendData = {
+        "username": username,
+        "firstname": firstname,
+        "lastname": lastname,
+        "address": address,
+        "plz": plz,
+        "city": city,
+        "total": total,
+        "cart": cart,
+        "paymentId": paymentId,
+    };
+    stringData = JSON.stringify(sendData);
+    if (loggedIn == 'true') {
+        $.ajax({
+            url: '../logic/submitOrder.php',
+            type: 'POST',
+            cache: false,
+            datatype: 'json',
+            data: stringData,
+            success: function (response) {
+                console.log(response);
+                if (response == 'success') {
+                    sessionStorage.removeItem('cart');
+                    updateCartCount();
+                    alert('Bestellung erfolgreich abgeschlossen');
+                    $('#mmlMainContent').load('../components/homepage.html');
+                } else {
+                    alert('Fehler beim Abschicken der Bestellung');
+                }
+            }
+        });
+    } else {
+        alert('Bitte einloggen');
+    }
+}