anwi_website/dist/Js/products/laptopproduct.js

function ramProductsInit(){
    let RAM_ID =  '';
  
    async function init(){
        let id 
        if(location.search==''&&(location.href.includes('laptops')||location.href.includes('allinones'))){
            id = await  getallproductsFun();
        }else{
            id = await getProductIdService();
        }
        getRamData(id)
    }

    async function getProductsIds(nameArr){
        let resData = await API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/integrations/products/getallproducts`,true); 
        if(resData.isError){
            toasterHelper("error","Something went wrong!")
            return;
        }

        let res = resData.response;
                
        res = JSON.parse(res.result);
        let ids = [];

        for(let i=0;i<nameArr.length;i++){
            const currName = nameArr[i];
            let id = res.find((item)=>{
                if(currName === item.productname){
                    return item.productid;
                }
            })
            if(id){
                ids.push(id);
            }
        }

        return ids;

    }

    async function getallproductsFun(){
        let laptopStr = ['FYRO Flagship','Zeno Dualbook','Zeno Sleekbook'];
        let allInOnesStr = ['AIO Zeno','AIO Fyro']; 

        

        let name = window.location.href;

        name = name.includes('laptops') ?laptopStr : allInOnesStr;

        const ids = await getProductsIds(name);

        console.log(ids);

        return ids;

    }

    function getProductIdService(){
        return new Promise(async (reslove,reject)=>{
            
            let resData =await API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/integrations/products/getallproducts`,true); 
           if(resData.isError){
                alert(resData.errorMsg.message);
                return;
            }

            let res = resData.response;
                
            res = JSON.parse(res.result);

            // console.log(res);

            let searchName = window.location.search.split('?')[1];
            let urlPathName = window.location.pathname; 
            let searchTerm = '';
             if(urlPathName.includes('ram')){
                searchTerm = "RAM ORA";
            }else if(urlPathName.includes('storage')){
                searchTerm = `SSD ORA`;
            }else{
                searchTerm = searchName.replaceAll('%20',' ');
            }
            let resultItem = [];
            
            if(searchTerm.toLowerCase() === 'zeno'){
                for(let i=0;i<res.length;i++){
                    if(res[i].productname.includes("Zeno Sleekbook")||res[i].productname.includes("Zeno Dualbook")){
                        resultItem.push( res[i])
                        
                    }
                }
                
                return reslove(resultItem)
            }else if(searchTerm.toLowerCase() === 'fyro'){
                for(let i=0;i<res.length;i++){
                    if(res[i].productname.includes("FYRO Flagship")){
                        resultItem.push(res[i]);
                        return reslove(resultItem)
                    }
                }
            }else{
                for(let i=0;i<res.length;i++){
                    if(res[i].productname.includes(searchTerm)){
                        resultItem.push(res[i])
                        
                    }
                }
         
                return reslove(resultItem)
            }

            

        });
    }

    async function getRamData(ids){
        let resData;
        let res
        let data = [];
       let windowSearch = window.location.href;
        for(let i=0;i<ids.length;i++){
            let id = ids[i].productid;
            if (windowSearch.includes('laptops')||windowSearch.includes('allinones')) {
                resData = await API_SERVICES_ACTIONS.getAPIService(`apis/v4/Bizgaze/integrations/products/getitemwithoutbranch/productid/${id}`, true);
            }
            else {
                resData = await API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/integrations/products/itemtagscombination/productid/${id}`, true);
            }
            if(resData.isError){
                alert(resData.errorMsg.message);
                return;
            }
    
            res = resData.response;
            
            res = JSON.parse(res.result);
            data = [...data,...res];
        }
        
        
        
       

        console.log(data);
        let html = '';

        for(let i=0;i<data.length;i++){
            console.log(data[i].tagids);
            let tags_id = data[i].tagids;
            let tags_filter = tags_id.includes("106631360000087");
            let tags_filter_2 = tags_id.includes("106631360000088");
            let tags_filter_3 = tags_id.includes("106631360000089");
            
            if(tags_filter == false && tags_filter_2 == false && tags_filter_3 == false){
                        if(data[i].itemname.includes('AIO Fyro - 32')) continue;
                        html += getRamCardHTML(data[i]);
            }
            else{
                let data_name = tags_id.includes("106631360000087");
                let name_id = data[i].tagids.includes("106631360000087");
                if(data_name === true && name_id === true){
                    for(let j=0;j<data.length;j++){
                        if(j==0){
                            if(data[j].itemname.includes('AIO Fyro - 32')) continue;
                            html += getRamCardHTML(data[i]);
                        }
                    }
                   
                } 
            } 
        }
        $('.product_card_section').html(html);
        if(window.location.href.includes("?Zeno")){
            $('.product_card_section div.ram_card:nth-child(1)').addClass("d-none");
            $('.product_card_section div.ram_card:nth-child(6)').addClass("d-none");
        }
        if(window.location.href.includes("?FYRO")){
             $('.product_card_section div.ram_card:nth-child(3)').addClass("d-none");
             $('.product_card_section div.ram_card:nth-child(7)').addClass("d-none");
             $('.product_card_section div.ram_card:nth-child(8)').addClass("d-none");
        }
        // $('.ramcard').click(function(e){
     
        //     let sku = $(e.target).data('itemid');
        //     let itemid = $(e.target).data('itemid');
   
        //     window.location.href = `/productdetails.html?productId=${RAM_ID}#itemid=${itemid}`

        // })
    }

    function getRamCardHTML({itemname,pricelist,itemid,sku,itemimageurl,productid,tagnames}){
        let img = itemimageurl ? imgServerNameBuild(itemimageurl) : './dist/assets/imgs/nophoto.png'
        let tags = itemname.split('-');
        let ramTech = tags[tags.length-2];
        let tag_name = tagnames.split('|');
       
        let gb =  tags[tags.length-1];
        const [currencySymbol,amount] = getCurrencySymbol(pricelist);
        let priceAmt = `${currencySymbol} ${amount}`;

        let detailPageName;
        let addSearch = '';
        if (window.location.href.includes('laptops')) {
            detailPageName = 'laptopdetails';
            let name = itemname.toLowerCase().includes('zeno') ? 'Zeno' : 'Fyro';
            addSearch = `?${name}`;
        } else {
            detailPageName = 'productdetails';
            
        };

        let color_name = tag_name[tag_name.length-1].trim();
        let processor_name1 = tagnames.includes("i7");
        let processor_name2 = tagnames.includes("i5");
        let processor_name3 = tagnames.includes("i3");
        let dul_core = itemname.includes("Zeno Dualbook");
       
    
        let processor;
        if( processor_name1 === true){
            if(dul_core === true){
                processor = `i7`
            }else{
                processor = `i5 / i7`
            }
           
        }else if( processor_name2 === true){
            if(dul_core === true){
                processor = `i7`
            }else{
                processor = `i5 / i7`
            }
        }else if( processor_name3 === true){
            processor = `i3`
        }
        else if(itemname.includes("I7") || itemname.includes("i7")){
            let fyro_data_2 = itemname.includes("RTX 4060");
            if(fyro_data_2 === true){
                processor = `i5 / i7 / i9`
            }else{
                processor = `i5 / i7`
            }
           
        }else if(itemname.includes("I9") || itemname.includes("i9")){
            let fyro_data_1 = itemname.includes("RTX 4050");
            let fyro_data_2 = itemname.includes("RTX 4060");
            if(fyro_data_1 === true || fyro_data_2 === true){
                processor = `i5 / i7 / i9`
            }else{
                processor = `i9`
            }
          
        }else if(itemname.includes("I5") || itemname.includes("i5")){
            let fyro_data = itemname.includes("RTX 4060");
            if(fyro_data === true){
                processor = `i5 / i7 / i9`
            }
            else{
                processor = `i5 / i7 / i9`
            }
           
        }

       
        let item_color_1;
        let item_color_2;
        let item_color_3;
        let item_color_4;
        if(color_name == "Eucalyptus Green" || color_name == "Desert Brown"){
            item_color_1 = `#5e7975`;
            item_color_2 = `#624839`;
            item_color_3 = `#253746`;
        }else if( color_name == "Deep Sea Blue"){
            item_color_1 = `#5e7975`;
            item_color_2 = `#624839`;
            item_color_3 = `#253746`;
        }
        else{
            if(color_name.length <=14){
                item_color_4 = ``;
            }else{
                item_color_4 = `#0d0a08`;
            }
        }
        debugger;
        return `<div class="col-lg-4 col-md-6 mb-4 col-md-6 ram_card cursor-pointer">
            <div class="card border bg-gray-3 rounded-3 p-1 h-100">
            
            <a href="/${detailPageName}.html${addSearch}#productId=${productid}#itemid=${itemid}" class="">
            <img  src="${img}" alt="${itemname}" class="p-5" style="width:350px;height:300px"></a>
                <div class="card-body">
                    <a href="/${detailPageName}.html${addSearch}#productId=${productid}#itemid=${itemid}" class="">
                        <h5 class="card-title satoshi_font mb-0 px-2 text-center font-weight-600">${itemname}</h5>
                        </a>
                </div>
                <hr>
                <ul class="border-0 mb-0 d-flex h-100 justify-content-between px-md-3 px-4 list-group-flush p-0 text-secondary" style="list-style: none;">
                    <li class="processor_name"><img src="../dist/assets/imgs/processor.svg" class="w-20p pe-1"/><span class="pt-1">${processor?processor:""}</span></li>
                    <li class="d-flex justify-content-between">
                        <p item_color=${item_color_1} class="colors mb-0 me-1" ${item_color_1?`style="width:18px;height:18px;border-radius:0%;background-color:${item_color_1}"`:''}></p>
                        <p item_color=${item_color_2} class="mb-0 me-1" ${item_color_2?`style="width:18px;height:18px;border-radius:0%;background-color:${item_color_2}"`:''}></p>
                        <p item_color=${item_color_3} class="mb-0" ${item_color_3?`style="width:18px;height:18px;border-radius:0%;background-color:${item_color_3}"`:''}></p>
                        <p item_color=${item_color_4} class="mb-0" ${item_color_4?`style="width:18px;height:18px;border-radius:0%;background-color:${item_color_4}"`:''}></p>
                    </li>
                </ul>
                <ul class="border-0 d-flex h-100 justify-content-between px-md-3 px-4 list-group-flush p-0 text-secondary" style="list-style: none;">
                   
                    <li class="border-0 py-0">
                        <span class="satoshi_font">
                            <h6><img src="../dist/assets/imgs/laptop-icon.png" class="w-20p pe-1"/>${gb}</h6>
                        </span>
                    </li>
                    <li class="border-0 py-0">
                        <span class="satoshi_font"><h6>${pricelist?priceAmt:'Comming Soon'}</h6></span>
                    </li>
                </ul>
                <div class="card-body text-center">
                    <a href="/${detailPageName}.html${addSearch}#productId=${productid}#itemid=${itemid}" class="btn bg-white font-1-2 px-5 w-100">Details
                    </a>
                </div>
        
            </div>
        </div>`;
        
        
        
        return `<div class="col-lg-4 col-md-6 mb-4 col-md-6 ram_card cursor-pointer">
        <div class="card border bg-gray-3 rounded-3 p-1 h-100">
        
        <a href="/productdetails.html?productId=${RAM_ID}#itemid=${itemid}" class=""><img src="${img}" alt="${itemname}" class="w-100 h-100"></a>
            <div class="card-body">
            <a href="/productdetails.html?productId=${RAM_ID}#itemid=${itemid}" class="">
                <h5 class="card-title satoshi_font mb-0 px-2 text-center font-weight-600">${itemname}</h5>
                </a>
            </div>
            <ul class="border-0 d-flex h-100 justify-content-between px-md-3 px-4 list-group-flush p-0 text-secondary" style="list-style: none;">
                <li class="border-0 py-0">
                    <span class="satoshi_font">  <h6>${gb}</h6> <h6>${ramTech}</h6></span>
                </li>
                <li class="border-0 py-0">
                    <span class="satoshi_font"><h6>${priceAmt}</h6></span>
                </li>
            </ul>
            <div class="card-body text-center">
                <a href="/productdetails.html?productId=${RAM_ID}#itemid=${itemid}" class="btn bg-white font-1-2 px-5 w-100">Details
                </a>
            </div>
    
        </div>
    </div>`;

        //abhi anna design
        return ` 
        
            <!--desktop--->
            <div class="col-sm-4 p-3">
                <div class="product_card_3 shadow ram_card">
                    <div class="card-item-header">
                        <div class="card-header-sub-3"><a class=" py-md-1" href="/productdetails.html?productId=${RAM_ID}#itemid=${itemid}">
                        <img src="${img}" class="w-100 h-100"></a>
                        </div>
                    </div>
                    <div class="card-item-body">
                      <h3 cclass="mb-2"> <a href="/productdetails.html?productId=${RAM_ID}#itemid=${itemid}" class="" >  ${itemname} </a></h3>
                      <hr>
                        <h6>${gb}</h6> <h6>${ramTech}</h6><h6>${priceAmt}</h6>
                        <div class="py-2 card_product_footer">
                            <button   data-sku="${sku}" data-itemid="${itemid}" class="w-100 border-0 ramcard bg-transparent satoshi_font ram_btn" data_name="ORA 8GB DDR4 3200MHz Desktop RAM "  data_version="DDR4" data_device="Desktop" data_gb="8GB"   data_price="2900">Details </button>
                        </div>
                    </div>
                </div>
         </div>
           `;
        return `<div class="col-lg-3 col-md-6 ram_card">
        <div class="card shadow border-0 p-1 h-100">
            <a href="#">
                <img src="../dist/assets/imgs/Navbar/ora_ddr5_laptop.png" class="card-img-top" alt="...">
            </a>
            <div class="card-body">
                <a href="#" class="text-decoration-none text-dark">
                    <h5 class="card-title satoshi_font mb-0">
                        ${itemname}
                    </h5>
                </a>
            </div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item border-0 py-0">
                    <span class="satoshi_font">${gb} ${ramTech}</span>
                </li>
                <li class="list-group-item border-0 py-0">
                    <span class="satoshi_font">3200 Mhz</span>
                </li>
            </ul>
            <div class="card-body d-none">
                <button class="btn--md btn-primary w-100 card-link">
                    <span class="cost currency-symbol">₹</span><span class="cost product-price satoshi_font">${pricelist}</span>
                </button>
            </div>
            <div class="card-body text-center">
                <div  data-sku="${sku}" data-itemid="${itemid}" class="bg-black ramcard btn font-1-2 px-5 text-white w-100 satoshi_font" data_des="Upgrade your laptop with DDR4 Laptop
                    Memory, oering 3200 MHz speed in 8, 16,
                    and 32 GB capacities. Experience enhanced
                    thermal performance, increased longevity,
                    and superior performance with our
                    innovative graphene sticker technology." data_name="ORA 8GB DDR4 3200MHz Laptop RAM ">Details
                </div>
            </div>
        </div>
    </div>`
    }

    init();
}

ramProductsInit();