286 lines
10 KiB
JavaScript
286 lines
10 KiB
JavaScript
|
shoppingCartInit();
|
||
|
|
|
||
|
|
function shoppingCartInit() {
|
||
|
|
|
||
|
|
shoppingCartAppend();
|
||
|
|
let DELETE_FILTER = null;
|
||
|
|
|
||
|
|
let insufficientQtyActions = {
|
||
|
|
moreQtyAdd(e) {
|
||
|
|
$(e.target).parents('.mainselectcontainer').find('.insufficientqty').removeClass('d-none');
|
||
|
|
},
|
||
|
|
|
||
|
|
moreQtyRemove(e) {
|
||
|
|
$(e.target).parents('.mainselectcontainer').find('.insufficientqty').addClass('d-none');
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function shoppingCartAppend() {
|
||
|
|
let data = getCartData();
|
||
|
|
|
||
|
|
if (!data) {
|
||
|
|
$('.emptyShow').removeClass('d-none');
|
||
|
|
$('.checkoutbtn').addClass('d-none');
|
||
|
|
return;
|
||
|
|
};
|
||
|
|
|
||
|
|
let html = '';
|
||
|
|
let products = data;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// for(let i=0;i<products.length;i++){
|
||
|
|
// const {img,name,price,quantity,total} = products[i];
|
||
|
|
// ;
|
||
|
|
// html += shoppingCartDesktopHTML(products[i]);
|
||
|
|
// }
|
||
|
|
if (Object.keys(data).length === 0) {
|
||
|
|
$('.checkoutbtn').addClass('d-none');
|
||
|
|
$('.emptyShow').removeClass('d-none');
|
||
|
|
}
|
||
|
|
setLengthCart();
|
||
|
|
console.log(products, 'products');
|
||
|
|
for (let product in products) {
|
||
|
|
|
||
|
|
html += shoppingCartDesktopHTML({ ...products[product], total: products[product].quantity * products[product].price, id: product });
|
||
|
|
}
|
||
|
|
|
||
|
|
$('.appendItems').html(html);
|
||
|
|
|
||
|
|
|
||
|
|
addEventListenerCart();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
// event listeners
|
||
|
|
function addEventListenerCart() {
|
||
|
|
|
||
|
|
$('.quantitySelect').each(function (i, element) {
|
||
|
|
if (!$(element).hasClass('d-none')) {
|
||
|
|
$(element).off().change(function (e) {
|
||
|
|
insufficientQtyActions.moreQtyRemove(e);
|
||
|
|
let num = e.target.value;
|
||
|
|
if (num == 5) {
|
||
|
|
$(e.target).parents('.mainselectcontainer').find('.inputcartaddmore').removeClass('d-none');
|
||
|
|
$(e.target).addClass('d-none');
|
||
|
|
$(e.target).parents('.mainselectcontainer').find('.inputcartaddmore button').off().click(function (item) {
|
||
|
|
const val = $(item.target).parent().find('input').val();
|
||
|
|
;
|
||
|
|
let totalQty = $(this).parents('.mainselectcontainer').data('qty');
|
||
|
|
|
||
|
|
if (val <= 0 || totalQty < val) {
|
||
|
|
insufficientQtyActions.moreQtyAdd(e);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
let id = $(item.target).parents('.mainselectcontainer').data('id');
|
||
|
|
|
||
|
|
updateCartQuantity(id, val);
|
||
|
|
// $(item.target).parents('.mainselectcontainer').find('.inputcartaddmore').addClass('d-none');
|
||
|
|
// $(e.target).removeClass('d-none');
|
||
|
|
setLengthCart();
|
||
|
|
shoppingCartAppend();
|
||
|
|
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
let totalQty = $(e.target).parents('.mainselectcontainer').data('qty');
|
||
|
|
const val = $(e.target).parent().find('input').val();
|
||
|
|
if (val <= 0 || totalQty < val) {
|
||
|
|
insufficientQtyActions.moreQtyAdd(e);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let id = $(e.target).parents('.mainselectcontainer').data('id');
|
||
|
|
updateCartQuantity(id, num);
|
||
|
|
setLengthCart();
|
||
|
|
shoppingCartAppend();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
$(element).parents('.mainselectcontainer').find('.inputcartaddmore button').off().click(function (item) {
|
||
|
|
;
|
||
|
|
|
||
|
|
const val = $(item.target).parent().find('input').val()
|
||
|
|
let totalQty = $(this).parents('.mainselectcontainer').data('qty');
|
||
|
|
|
||
|
|
if (val <= 0 || totalQty < val) {
|
||
|
|
insufficientQtyActions.moreQtyAdd(item);
|
||
|
|
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
let id = $(item.target).parents('.mainselectcontainer').data('id');
|
||
|
|
updateCartQuantity(id, val);
|
||
|
|
// $(item.target).parents('.mainselectcontainer').find('.inputcartaddmore').addClass('d-none');
|
||
|
|
// $(e.target).removeClass('d-none');
|
||
|
|
setLengthCart();
|
||
|
|
shoppingCartAppend();
|
||
|
|
|
||
|
|
})
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.removeitemcartmodal').off('click').click(function () {
|
||
|
|
|
||
|
|
|
||
|
|
setCartData(DELETE_FILTER);
|
||
|
|
setLengthCart();
|
||
|
|
shoppingCartAppend();
|
||
|
|
|
||
|
|
let len = Object.keys(DELETE_FILTER).length
|
||
|
|
if (!len) {
|
||
|
|
|
||
|
|
$('.checkoutbtn').addClass('d-none');
|
||
|
|
$('.emptyShow').removeClass('d-none');
|
||
|
|
} else {
|
||
|
|
$('.checkoutbtn').removeClass('d-none');
|
||
|
|
$('.emptyShow').addClass('d-none');
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.btndeletecart').each(function (i, element) {
|
||
|
|
$(element).click(function (e) {
|
||
|
|
const cardId = $(e.target).data('cartid');
|
||
|
|
let data = getCartData();
|
||
|
|
console.log(data, 'cardId', cardId);
|
||
|
|
if (!data) return;
|
||
|
|
;
|
||
|
|
const products = data;
|
||
|
|
const productsFilter = {};
|
||
|
|
|
||
|
|
$('#modalremovecart').html(products[cardId].name);
|
||
|
|
for (let product in products) {
|
||
|
|
if (product != cardId) productsFilter[product] = products[product];
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
data = productsFilter;
|
||
|
|
|
||
|
|
console.log(data);
|
||
|
|
DELETE_FILTER = data;
|
||
|
|
// setCartData(data);
|
||
|
|
// setLengthCart();
|
||
|
|
// shoppingCartAppend();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.checkoutbtn').click(async function (e) {
|
||
|
|
$('.checkoutbtn').find('span').addClass('d-none');
|
||
|
|
$('.checkoutbtn').find('div').removeClass('d-none');
|
||
|
|
const res = await COOKIE_HELPER.validateToken();
|
||
|
|
if (!res.response) {
|
||
|
|
localStorage.setItem(CART_ADD, true);
|
||
|
|
window.location.href = '/login.html';
|
||
|
|
|
||
|
|
$('.checkoutbtn').find('span').removeClass('d-none');
|
||
|
|
$('.checkoutbtn').find('div').addClass('d-none');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
window.location.href = '/selectdelivery.html';
|
||
|
|
$('.checkoutbtn').find('span').removeClass('d-none');
|
||
|
|
$('.checkoutbtn').find('div').addClass('d-none');
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function getQuantityHTML(value, totalQty, id) {
|
||
|
|
return `<div data-id="${id}" data-qty="${totalQty}" class="mainselectcontainer w-100">
|
||
|
|
<div class="w-50">
|
||
|
|
|
||
|
|
<select class="quantitySelect form-select ${value >= 5 ? 'd-none' : ''}" value="${value}">
|
||
|
|
<option ${value == 1 ? 'selected="selected"' : null} value="1">
|
||
|
|
1
|
||
|
|
</option>
|
||
|
|
<option ${value == 2 ? 'selected="selected"' : null} value="2">
|
||
|
|
2
|
||
|
|
</option>
|
||
|
|
<option ${value == 3 ? 'selected="selected"' : null} value="3">
|
||
|
|
3
|
||
|
|
</option>
|
||
|
|
<option ${value == 4 ? 'selected="selected"' : null} value="4">
|
||
|
|
4
|
||
|
|
</option>
|
||
|
|
<option ${value == 5 ? 'selected="selected"' : null} value="5">
|
||
|
|
5+
|
||
|
|
</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class=" inputcartaddmore d-flex gap-2 ${value >= 5 ? '' : 'd-none'}">
|
||
|
|
<input min="1" class="form-control" style="max-width:100px" value="${value <= 5 ? '5' : value}" type="number" />
|
||
|
|
<button class="btn border-none bg-info">Add</button>
|
||
|
|
</div>
|
||
|
|
<div class="text-danger pt-2 insufficientqty d-none">Insufficient quantity</div>
|
||
|
|
</div>`
|
||
|
|
}
|
||
|
|
|
||
|
|
function shoppingCartDesktopHTML({ id, img, name, price, description, quantity, total, totalQty, productid, itemid }) {
|
||
|
|
const [currencySymbol, amt] = getCurrencySymbol(price);
|
||
|
|
let tamt = 0;
|
||
|
|
{
|
||
|
|
const [currencySymbol, amt] = getCurrencySymbol(total);
|
||
|
|
tamt = amt;
|
||
|
|
}
|
||
|
|
return `
|
||
|
|
<div class="d-none d-md-block">
|
||
|
|
|
||
|
|
<div class="row bg-white border-bottom py-4 d-flex justify-content-center align-items-center">
|
||
|
|
<div class="col-md-2 text-center"><img src="${img}" alt="${name}" class="img-fluid"></div>
|
||
|
|
<div class="col-md-4 ">
|
||
|
|
|
||
|
|
<a class="text-decoration-none text-blue fw-600 cursor-pointer" href="productdetails.html?productId=${productid}#itemid=${itemid}">${name}</a>
|
||
|
|
<small>${description || ''}</small>
|
||
|
|
<span class="badge d-none text-bg-warning">8 Offers ></span>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-2">
|
||
|
|
<p class="text-right m-0 fw-bold "><span class="d-none">${currencySymbol}</span> ${price}</p>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-2 ">
|
||
|
|
|
||
|
|
${getQuantityHTML(quantity, totalQty, id)}
|
||
|
|
</div>
|
||
|
|
<div class="col-md-2 ">
|
||
|
|
<div class="d-flex justify-content-between w-100">
|
||
|
|
<p class="fw-bold m-0">
|
||
|
|
${price}</p>
|
||
|
|
<span class="btndeletecart cursor-pointer fw-500 text-danger" data-cartid="${id}" data-bs-toggle="modal" data-bs-target="#deletecartmodal">x</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="row d-block d-md-none smallcart py-3">
|
||
|
|
<div class="row bg-white py-5 m-0">
|
||
|
|
<div class="col-4 text-center">
|
||
|
|
<img src="${img}" alt="${name}" class="img-fluid">
|
||
|
|
</div>
|
||
|
|
<div class="col-8 position-relative d-flex flex-column gap-1">
|
||
|
|
|
||
|
|
<div class="">
|
||
|
|
<span>
|
||
|
|
<a class="text-decoration-none text-blue fw-600 cursor-pointer" href="productdetails.html?productId=${productid}#itemid=${itemid}"><span class="">${name}</span></a>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p class="fw-bold m-0">
|
||
|
|
${currencySymbol}${tamt}</p>
|
||
|
|
</div>
|
||
|
|
<div class="text-truncate d-none">
|
||
|
|
<small>${description || ''}</small>
|
||
|
|
</div>
|
||
|
|
<div class="">
|
||
|
|
|
||
|
|
${getQuantityHTML(quantity, totalQty, id)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<span class="btndeletecart cursor-pointer fw-500 text-danger" data-cartid="${id}" data-bs-toggle="modal" data-bs-target="#deletecartmodal">x</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
}
|