+
+
\ No newline at end of file
diff --git a/js/app.ts b/js/app.ts
index 46ed437..63dfdd2 100644
--- 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;
+}
\ No newline at end of file
diff --git a/js/cart.js b/js/cart.js
new file mode 100644
index 0000000..4d103fd
--- /dev/null
+++ 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 += "
+
+
+
+
+
+
+
+ ![${data[i].name}](../res/img/${data[i].image})
+
+
+
+ ${data[i].name}
+ ${data[i].price} €
+ ${data[i].description}
+
+
`;
+ 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;
+ }
\ No newline at end of file
diff --git a/logic/getProductData.php b/logic/getProductData.php
new file mode 100644
index 0000000..eeea580
--- /dev/null
+++ b/logic/getProductData.php
@@ -0,0 +1,35 @@
+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;
+}
+?>
\ No newline at end of file
diff --git a/res/css/style.css b/res/css/style.css
index 6731079..f44f198 100644
--- a/res/css/style.css
+++ b/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;
}
\ No newline at end of file
diff --git a/res/img/apfel.png b/res/img/apfel.png
new file mode 100644
index 0000000..21216a4
Binary files /dev/null and b/res/img/apfel.png differ
diff --git a/res/img/birne.png b/res/img/birne.png
new file mode 100644
index 0000000..22c2b5a
Binary files /dev/null and b/res/img/birne.png differ
diff --git a/res/img/brombeer.png b/res/img/brombeer.png
new file mode 100644
index 0000000..77a6005
Binary files /dev/null and b/res/img/brombeer.png differ
diff --git a/res/img/dirndl.png b/res/img/dirndl.png
new file mode 100644
index 0000000..44c5f12
Binary files /dev/null and b/res/img/dirndl.png differ
diff --git a/res/img/erdbeer.png b/res/img/erdbeer.png
new file mode 100644
index 0000000..ee4e3b6
Binary files /dev/null and b/res/img/erdbeer.png differ
diff --git a/res/img/himbeer.png b/res/img/himbeer.png
new file mode 100644
index 0000000..8dc2bdb
Binary files /dev/null and b/res/img/himbeer.png differ
diff --git a/res/img/marillen.png b/res/img/marillen.png
new file mode 100644
index 0000000..aad2682
Binary files /dev/null and b/res/img/marillen.png differ
diff --git a/res/img/pfirsich.png b/res/img/pfirsich.png
new file mode 100644
index 0000000..0c6ccb7
Binary files /dev/null and b/res/img/pfirsich.png differ
diff --git a/res/img/testimage.png b/res/img/testimage.png
new file mode 100644
index 0000000..708a633
Binary files /dev/null and b/res/img/testimage.png differ
+ 1 Stück | ${data[i].weight} g
+
+
+ ID: ${data[i].product_id}
+
+