anwi_website/dist/Js/shoppingcart/shoppingcart.js

shoppingCartInit();

debugger;
function shoppingCartInit() {

    shoppingCartAppend();

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

                })
            }
        });

        $('.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 = {};
                for (let product in products) {
                    if (product != cardId) productsFilter[product] = products[product];
                }


                data  = productsFilter;
                let len = Object.keys(data).length
                if(!len){

                    $('.checkoutbtn').addClass('d-none');
                    $('.emptyShow').removeClass('d-none');
                }else{
                    $('.checkoutbtn').removeClass('d-none');
                    $('.emptyShow').addClass('d-none');
                }
                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, id) {
        return `<div data-id="${id}" class="mainselectcontainer w-100">
        <div class="w-100">
        <label>Qty</label>
        <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>`
    }

    function shoppingCartDesktopHTML({ id, img, name, price, description, quantity, total }) {
        const [currencySymbol,amt] = getCurrencySymbol(price);
        return `
        <div class="row bg-white mt-3 rounded py-3 d-flex  ">
        <div class="col-md-2 text-center"><img src="${img}" alt="${name}" class="img-fluid"></div>
        <div class="col-md-4 d-flex justify-content-center align-items-center">
          
            <a class="text-decoration-none text-dark cursor-pointer" href="/productdetails.html?productId=${id}">${name}</a>
            <small>${description||''}</small>
            <span class="badge d-none text-bg-warning">8 Offers ></span>   
        </div>
        <div class="col-md-2 d-flex justify-content-center align-items-center">
            <p class="text-right"><span>${currencySymbol}</span> ${amt}</p>
        </div>
        <div class="col-md-2 d-flex justify-content-center align-items-center">
   
            ${getQuantityHTML(quantity, id)}
        </div>
        <div class="col-md-2 d-flex justify-content-center align-items-center">
            <div class="d-flex justify-content-between w-100">
                <p class="fw-bold"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-currency-rupee" viewBox="0 0 16 16">
                    <path d="M4 3.06h2.726c1.22 0 2.12.575 2.325 1.724H4v1.051h5.051C8.855 7.001 8 7.558 6.788 7.558H4v1.317L8.437 14h2.11L6.095 8.884h.855c2.316-.018 3.465-1.476 3.688-3.049H12V4.784h-1.345c-.08-.778-.357-1.335-.793-1.732H12V2H4v1.06Z"/>
                  </svg>${total}</p>
                <span class="btndeletecart cursor-pointer" data-cartid="${id}">x</span>
            </div>
        </div>
        <div class="warrenty-sec px-3 sec-space-4 d-none">
            <div class="row align-items-center border
                            py-2 mx-4">
                <div class="col-md-8">
                    <p class="mb-0"> <img src="./dist/assets/imgs/Home/Anwi-cart-logo.png" alt="shopping-cart-item-img"> Anwi Extended Warranty 2 Year: Protect your Laptop for another 2 years Learn more </p>
                </div>
                <div class="col-md-3">
                    <p class="text-end mb-0"> ₹3,200 (2 year)
                    </p>
                </div>
            </div>
            <div class="row align-items-center border
                            py-2 mx-4 mt-3">
                <div class="col-md-8">
                    <p class="mb-0"> <img src="./dist/assets/imgs/Home/Anwi-cart-logo-2.png" alt="shopping-cart-item-img"> Anwi Extended Warranty 2 Year: Protect your Laptop for another 2 years Learn more </p>
                </div>
                <div class="col-md-3">
                    <p class="text-end mb-0"> ₹2,900 (2 year)
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class=" bg-white mt-3 rounded py-3 d-block d-sm-none ">
        <div class="row">
            <div class=""></div>
        </div>


        <div>

        </div>
    </div>
        `;
    }
}