anwisystems/dist/js/products/accessories.js

function initAcc(){
    INIT();
    async function INIT(){
        const productsIds =  await getProductIds(['SSD ORA',"RAM ORA"]);
        appendWithIds(productsIds);
    }

    async function appendWithIds(productsIds){
        let html = '';
        for(let i=0;i<productsIds.length;i++){
            let productId = productsIds[i];
            let res = await API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/integrations/products/itemtagscombination/productid/${productId}`,true);

            if(res.isError){
                alert("something went wrong");
                return;
            }

            res = JSON.parse(res.response.result);
            console.log(res);

            
            for(let j=0;j<res.length;j++){
                html += getRamCardHTML(res[j]);
            }
        }

        $('.product_card_section').html(html)
    }

    async function getProductIds(productsIdReqArr){
        let resData = await API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/integrations/products/getallproducts`,true);
        
        if(resData.isError){
            alert("Something went wrong");
            return;
        }

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

        let productsIds = [];

        for(let i=0;i<resData.length;i++){
            let curr = resData[i];
            let productname = curr.productname;
            if(productsIdReqArr.includes(productname)){
                productsIds.push(curr.productid)
            }
        }
        console.log(productsIds);

        console.log(resData);
        return productsIds;

    }

    function getRamCardHTML({itemname,pricelist,itemid,sku,itemimageurl,productid}){
        let img = itemimageurl ? imgServerNameBuild(itemimageurl) : './dist/assets/imgs/nophoto.png'
        let tags = itemname.split('-');
        let ramTech = tags[tags.length-2];
        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';
        };
      
        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="w-100 h-100 p-5"></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 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>${pricelist?priceAmt:'Coming Soon'}</h6></span>
                    </li>
                </ul>
                <div class="card-body text-center">
                    <a href="/${detailPageName}.html?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>`
    }
}

initAcc();