anwi_website/dist/Js/shoppingcart/shoppingcart.js

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];
        //     debugger;
        //     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();
                            debugger;
                            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) {
                    debugger;

                    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;
                debugger;
                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="bg-gradient-anwi border-none btn text-white">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, amount] = getCurrencySymbol(price);
        debugger;
      let tamt = 0;
        {
            const [currencySymbol, amount] = getCurrencySymbol(total);
            tamt = amount;
        }
        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"><span>${currencySymbol}</span> ${amount}</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">
                 ${currencySymbol}${tamt}</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>
        `;
    }
}