added product & shop
This commit is contained in:
StockiP
162
js/getProducts.js
Normal file
162
js/getProducts.js
Normal file
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user