code added

dist/Js/index/index.js

+function indexInit(){
+    function init(){
+        initData();
+    }
+    async function initData(){
+        const ids = await getProductIdService();
+        if(!ids) return;
+        let dataAcc = [];
+        for(let i=0;i<ids.length;i++){
+            let currId = ids[i];
+            let {productid} = currId;
+
+            let resData =await API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/integrations/products/itemtagscombination/productid/${productid}`,true); 
+
+            if(resData.isError){
+                alert(resData.errorMsg.message);
+                return;
+            }
+    
+            let res = resData.response;
+                
+            res = JSON.parse(res.result);
+    
+            dataAcc = [...dataAcc,...res.slice(0, 4)];
+
+        }
+
+   
+
+        shuffleArray(dataAcc);
+        console.log(dataAcc);
+        let html = '';
+       for(let i=0;i<dataAcc.length;i++){
+        html += getCardHTML({...dataAcc[i],img:dataAcc[i].itemimageurl})
+       }
+
+       $('.slider-hero').html(html);
+       
+
+        console.log(ids);
+        initSlider();
+
+        $('.topproductbtn').click(function (e){
+            let productid = $(e.target).data('productid');
+            let itemid = $(e.target).data('itemid');
+            let name =  $(e.target).data('name');
+            debugger;
+            window.location.href = `/productdetails.html?productId=${productid}#itemid=${itemid}`;
+        });
+    }
+
+    function initSlider(){
+        $('.slider-hero').slick({
+            dots: false,
+            lazyLoad: 'ondemand',
+            // autoplay: true,
+            // autoplaySpeed: 1000,
+            slidesToShow: 4,
+            slidesToScroll: 1,
+            responsive: [
+                {
+                  breakpoint: 1024,
+                  settings: {
+                    slidesToShow: 3,
+                    slidesToScroll: 3,
+                    infinite: true,
+                  }
+                },
+                {
+                  breakpoint: 600,
+                  settings: {
+                    slidesToShow: 2,
+                    slidesToScroll: 2
+                  }
+                },
+                {
+                  breakpoint: 480,
+                  settings: {
+                    slidesToShow: 1,
+                    slidesToScroll: 1
+                  }
+                },
+                {
+                    breakpoint: 1199,
+                    settings: {
+                        slidesToShow: 5,
+                        slidesToScroll: 1,
+                    }
+                },
+                {
+                    breakpoint: 991,
+                    settings: {
+                        slidesToShow: 3,
+                        slidesToScroll: 1,
+                    }
+                },
+                {
+                    breakpoint: 767,
+                    settings: {
+                        slidesToShow: 3,
+                        slidesToScroll: 1,
+                    }
+                },
+                {
+                    breakpoint: 575,
+                    settings: {
+                        autoplay: true,
+                        slidesToShow: 3,
+                    }
+                }
+                // You can unslick at a given breakpoint now by adding:
+                // settings: "unslick"
+                // instead of a settings object
+            ]
+        });
+
+        $(".slick-prev").addClass("btn text-white");
+        $(".slick-next").addClass("btn text-white");
+        $(".slick-prev").html("←");
+        $(".slick-next").html("→")
+    }
+    function getCardHTML({itemname,img,sku,itemid,productid}){
+        let defaultImg = img ? imgServerNameBuild(img): `./dist/assets/imgs/nophoto.png`;
+        return ` <div class="card h-100 mx-1 text-center bg-gray-4 border-0">
+        <div class="card-body h-100">
+            <div class="d-flex flex-column h-100 justify-content-between">
+                <img src="${defaultImg}" class="w-100"/>
+                <p class="mb-0 fs-7 py-2">${itemname}</p>
+                <p class="fw-600 text-primary mb-0 topproductbtn" data-name="${itemname}" data-sku="${sku}" data-productid="${productid}" data-itemid="${itemid}">Buy Now</p>
+            </div>
+        </div>
+    </div>`;
+        return ` <div class="card h-100 mx-1 text-center bg-gray-4 border-0 top_sell">
+        <div class="card-body">
+            <img src="${defaultImg}" class="w-100"/>
+            <p class="mb-0 fs-7 py-2">${itemname}</p>
+             <p class="fw-600 text-primary mb-0" data-sku="${sku}" data-productid="${productid}" data-itemid="${itemid}">Buy Now</p>
+             
+        </div>
+    </div>`;
+    }
+
+    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);
+
+          
+            let resultItem = [];
+
+            for(let i=0;i<res.length;i++){
+                if(resultItem.length == 2) break;
+                if(res[i].productname.includes('RAM ORA')||res[i].productname.includes('SSD ORA')){
+                    resultItem.push(res[i]);
+                  
+                }
+            }
+          
+            return reslove(resultItem)
+
+        });
+    }
+
+    
+
+    init();
+
+    
+}
+
+indexInit();

dist/Js/main.js

     //     slidesToScroll: 3
     //   });
     
-      $('.slider-hero').slick({
-        dots: false,
-        lazyLoad: 'ondemand',
-        // autoplay: true,
-        // autoplaySpeed: 1000,
-        slidesToShow: 4,
-        slidesToScroll: 1,
-        responsive: [
-            {
-              breakpoint: 1024,
-              settings: {
-                slidesToShow: 3,
-                slidesToScroll: 3,
-                infinite: true,
-              }
-            },
-            {
-              breakpoint: 600,
-              settings: {
-                slidesToShow: 2,
-                slidesToScroll: 2
-              }
-            },
-            {
-              breakpoint: 480,
-              settings: {
-                slidesToShow: 1,
-                slidesToScroll: 1
-              }
-            },
-            {
-                breakpoint: 1199,
-                settings: {
-                    slidesToShow: 5,
-                    slidesToScroll: 1,
-                }
-            },
-            {
-                breakpoint: 991,
-                settings: {
-                    slidesToShow: 3,
-                    slidesToScroll: 1,
-                }
-            },
-            {
-                breakpoint: 767,
-                settings: {
-                    slidesToShow: 3,
-                    slidesToScroll: 1,
-                }
-            },
-            {
-                breakpoint: 575,
-                settings: {
-                    autoplay: true,
-                    slidesToShow: 3,
-                }
-            }
-            // You can unslick at a given breakpoint now by adding:
-            // settings: "unslick"
-            // instead of a settings object
-        ]
-    });
+    //   $('.slider-hero').slick({
+    //     dots: false,
+    //     lazyLoad: 'ondemand',
+    //     // autoplay: true,
+    //     // autoplaySpeed: 1000,
+    //     slidesToShow: 4,
+    //     slidesToScroll: 1,
+    //     responsive: [
+    //         {
+    //           breakpoint: 1024,
+    //           settings: {
+    //             slidesToShow: 3,
+    //             slidesToScroll: 3,
+    //             infinite: true,
+    //           }
+    //         },
+    //         {
+    //           breakpoint: 600,
+    //           settings: {
+    //             slidesToShow: 2,
+    //             slidesToScroll: 2
+    //           }
+    //         },
+    //         {
+    //           breakpoint: 480,
+    //           settings: {
+    //             slidesToShow: 1,
+    //             slidesToScroll: 1
+    //           }
+    //         },
+    //         {
+    //             breakpoint: 1199,
+    //             settings: {
+    //                 slidesToShow: 5,
+    //                 slidesToScroll: 1,
+    //             }
+    //         },
+    //         {
+    //             breakpoint: 991,
+    //             settings: {
+    //                 slidesToShow: 3,
+    //                 slidesToScroll: 1,
+    //             }
+    //         },
+    //         {
+    //             breakpoint: 767,
+    //             settings: {
+    //                 slidesToShow: 3,
+    //                 slidesToScroll: 1,
+    //             }
+    //         },
+    //         {
+    //             breakpoint: 575,
+    //             settings: {
+    //                 autoplay: true,
+    //                 slidesToShow: 3,
+    //             }
+    //         }
+    //         // You can unslick at a given breakpoint now by adding:
+    //         // settings: "unslick"
+    //         // instead of a settings object
+    //     ]
+    // });
 
     //pres overview slider
     $(".press_slider-hero").slick({

dist/Js/navbar.js

 let nav_html = `
 <header class="header-area section-padding-1 transparent-bar">
             <div class="header-large-device">
-                <div class="header-bottom sticky-bar" >
+                <div class="header-bottom sticky-bar"  style="
+                background: #ed3838;
+            ">
                     <div class="container">
                         <div class="header-bottom-flex">
                             <div class="logo-menu-wrap d-flex">

dist/Js/productdetails/productdetails.js

 
 
                     currentComb = itemtagscombinationRes[i];
-                    location.hash = itemtagscombinationRes[i].itemname.trim();
+                   // location.hash = itemtagscombinationRes[i].itemname.trim();
 
                     // $('.productname').html(itemtagscombinationRes[i].itemname);
                     // $('#skudetailitem').val(itemtagscombinationRes[i].sku)

dist/Js/products/products.js

         $('.product_card_section').html(html);
 
         $('.ramcard').click(function(e){
+            debugger;
             let sku = $(e.target).data('itemid');
             let itemid = $(e.target).data('itemid');
             debugger;
         
             <!--desktop--->
             <div class="col-sm-4 p-3">
-                <div class="product_card_1 shadow ram_card">
+                <div class="product_card_3 shadow ram_card">
                     <div class="card-item-header">
-                        <div class="card-header-sub-1"><a class=" py-md-1" href="/productdetails.html?productId=${RAM_ID}#itemid=${itemid}">
+                        <div class="card-header-sub-3"><a class=" py-md-1" href="/productdetails.html?productId=${RAM_ID}#itemid=${itemid}">
                         <img src="./dist/assets/imgs/Navbar/ora_ddr4_desktop.png" class="w-100 h-100"></a>
                         </div>
                     </div>

dist/Js/utils/helpers.js

     return Date.now().toString(36) + Math.random().toString(36).substr(2);
 }
 
+
+function shuffleArray(array) {
+    for (let i = array.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [array[i], array[j]] = [array[j], array[i]];
+    }
+}
+
 function getCurrencySymbol(value=0) {
     let type = 'INR'
     if (type) {

index.html

             background: #ffffff;
             left: 0;
         } */
+
+        .slick-track
+        {
+            display: flex !important;
+        }
+
+        .slick-slide
+        {
+            height: inherit !important;
+        }
     </style>
 </head>
 
             <div class="container mb-md-5 mb-5">
                 <h2 class="satoshi_font text-center py-md-5 py-4">Top Selling Products</h2>
                     <div class="row justify-content-center align-items-center pb-md-5 ">
-                        <div class="col-12">
-                            <div id="homepage-slider">
-                                <div class="slider-hero slick-initialized slick-slider"><button class="slick-prev slick-arrow btn text-white" aria-label="Previous" type="button" style="">←</button>
-                                    <div class="slick-list draggable"><div class="slick-track" style="opacity: 1; width: 4116px; transform: translate3d(-1176px, 0px, 0px);"><div class="card h-100 mx-1 text-center bg-gray-5 border-0 slick-slide slick-cloned" data-slick-index="-4" id="" aria-hidden="true" tabindex="-1" style="width: 286px;">
-                                        <div class="card-body">
-                                            <a href="./storageproducts.html" tabindex="-1">
-                                                <img src="./dist/assets/imgs/allin_imgs/ora4_storage.png" class="w-100">
-                                                <p class="mb-0 fs-7  item-title">ORA4 M.2 NVMe 2TB<br> PCI Express 4.0</p>
-                                                <p class="buy-now mb-0"> <span>Buy Now </span></p>
-                                            </a>
-                                        </div>
-                                    </div><div class="card h-100 mx-1 text-center bg-gray-5 border-0 top_sell slick-slide slick-cloned" data-slick-index="-3" id="" aria-hidden="true" tabindex="-1" style="width: 286px;">
-                                        <div class="card-body">
-                                            <img src="./dist/assets/imgs/allin_imgs/ora_desktop.png" class="w-100">
-                                            <p class="mb-0 fs-7  item-title">ORA 32GB DDR5 <br> 4800MHz Desktop Memory</p>
-                                            <p class=" buy-now mb-0"> <span>Buy Now </span></p>
-                                             <p class="selling_product d-none" data_name="ORA 32GB DDR5 4800MHz Desktop RAM " data_version="DDR5" data_device="Desktop" data_gb="32GB" data_price="15500">
-                                         </p>
-                                        </div>
-                                    </div><div class="card h-100 mx-1 text-center bg-gray-5 border-0 top_sell slick-slide slick-cloned" data-slick-index="-2" id="" aria-hidden="true" tabindex="-1" style="width: 286px;">
+                        <div class="col-10">
+                            <div id="homepage-slider" >
+                                <div class="slider-hero">
+                                    <div class="card h-100 mx-1 text-center bg-gray-4 border-0">
                                         <div class="card-body">
-                                            <img src="./dist/assets/imgs/allin_imgs/8gb_laptop.png" class="w-100">
-                                            <p class="mb-0 fs-7  item-title">ORA 8GB DDR5 <br> 4800MHz Laptop Memory</p>
-                                            <p class="buy-now mb-0"> <span>Buy Now </span></p>
-                                             <p class="selling_product d-none" data_name="ORA 8GB DDR5 4800MHz Laptop RAM " data_version="DDR5" data_device="Laptop" data_gb="8GB" data_price="5150">
-                                            </p>
-                                        </div>
-                                    </div><div class="card h-100 mx-1 text-center bg-gray-5 border-0 top_sell slick-slide slick-cloned" data-slick-index="-1" id="" aria-hidden="true" tabindex="-1" style="width: 286px;">
-                                        <div class="card-body">
-                                            <img src="./dist/assets/imgs/allin_imgs/32gb_laptop.png" class="w-100">
-                                            <p class="mb-0 fs-7  item-title">ORA 32GB DDR4 <br> 3200MHz Laptop Memory</p>
-                                            <p class="buy-now mb-0"> <span>Buy Now </span></p>
-                                             <p class="selling_product d-none" data_name="ORA 32GB DDR4 3200MHz Laptop RAM " data_version="DDR4" data_device="Laptop" data_gb="32GB" data_price="8450">
-                                            </p>
-                                        </div>
-                                    </div><div class="card h-100 mx-1 text-center bg-gray-5 border-0 slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" tabindex="0" style="width: 286px;">
-                                        <div class="card-body">
-                                            <a href="./storageproducts.html" tabindex="0">
-                                                <img src="./dist/assets/imgs/allin_imgs/ora3_storage.png" class="w-100">
-                                                <p class="mb-0 fs-7  item-title">ORA3 M.2 NVMe 512GB<br> PCI Express 3.0</p>
-                                                <p class=" buy-now mb-0"> <span>Buy Now </span></p>
+                                            <a href="./storageproducts.html">
+                                                <img src="./dist/assets/imgs/allin_imgs/ora3_storage.png" class="w-100"/>
+                                                <p class="mb-0 fs-7 py-2">ORA3 M.2 NVMe 512GB<br> PCI Express 3.0</p>
+                                                <p class="fw-600 text-primary mb-0">Buy Now</p>
                                             </a>
                                         </div>
-                                    </div><div class="card h-100 mx-1 text-center bg-gray-5 border-0 slick-slide slick-active" data-slick-index="1" aria-hidden="false" tabindex="0" style="width: 286px;">
+                                    </div>
+                                    <div class="card h-100 mx-1 text-center bg-gray-4 border-0">
                                         <div class="card-body">
-                                            <a href="./storageproducts.html" tabindex="0">
-                                                <img src="./dist/assets/imgs/allin_imgs/ora4_storage.png" class="w-100">
-                                                <p class="mb-0 fs-7  item-title">ORA4 M.2 NVMe 2TB<br> PCI Express 4.0</p>
-                                                <p class="buy-now mb-0"> <span>Buy Now </span></p>
+                                            <a href="./storageproducts.html">
+                                                <img src="./dist/assets/imgs/allin_imgs/ora4_storage.png" class="w-100"/>
+                                                <p class="mb-0 fs-7 py-2">ORA4 M.2 NVMe 2TB<br> PCI Express 4.0</p>
+                                                <p class="fw-600 text-primary mb-0">Buy Now</p>
                                             </a>
                                         </div>
-                                    </div><div class="card h-100 mx-1 text-center bg-gray-5 border-0 top_sell slick-slide slick-active" data-slick-index="2" aria-hidden="false" tabindex="0" style="width: 286px;">
+                                    </div>
+                                    <div class="card h-100 mx-1 text-center bg-gray-4 border-0 top_sell">
                                         <div class="card-body">
-                                            <img src="./dist/assets/imgs/allin_imgs/ora_desktop.png" class="w-100">
-                                            <p class="mb-0 fs-7  item-title">ORA 32GB DDR5 <br> 4800MHz Desktop Memory</p>
-                                            <p class=" buy-now mb-0"> <span>Buy Now </span></p>
-                                             <p class="selling_product d-none" data_name="ORA 32GB DDR5 4800MHz Desktop RAM " data_version="DDR5" data_device="Desktop" data_gb="32GB" data_price="15500">
+                                            <img src="./dist/assets/imgs/allin_imgs/ora_desktop.png" class="w-100"/>
+                                            <p class="mb-0 fs-7 py-2">ORA 32GB DDR5 <br> 4800MHz Desktop Memory</p>
+                                             <p class="fw-600 text-primary mb-0">Buy Now</p>
+                                             <p class="selling_product d-none" 
+                                             data_name="ORA 32GB DDR5 4800MHz Desktop RAM "
+                                             data_version="DDR5"
+                                             data_device="Desktop"
+                                             data_gb="32GB"
+                                             data_price="15500"
+                                             data_img="../dist/assets/imgs/allin_imgs/ora_desktop.png">
                                          </p>
                                         </div>
-                                    </div><div class="card h-100 mx-1 text-center bg-gray-5 border-0 top_sell slick-slide slick-active" data-slick-index="3" aria-hidden="false" tabindex="0" style="width: 286px;">
-                                        <div class="card-body">
-                                            <img src="./dist/assets/imgs/allin_imgs/8gb_laptop.png" class="w-100">
-                                            <p class="mb-0 fs-7  item-title">ORA 8GB DDR5 <br> 4800MHz Laptop Memory</p>
-                                            <p class="buy-now mb-0"> <span>Buy Now </span></p>
-                                             <p class="selling_product d-none" data_name="ORA 8GB DDR5 4800MHz Laptop RAM " data_version="DDR5" data_device="Laptop" data_gb="8GB" data_price="5150">
-                                            </p>
-                                        </div>
-                                    </div><div class="card h-100 mx-1 text-center bg-gray-5 border-0 top_sell slick-slide" data-slick-index="4" aria-hidden="true" tabindex="-1" style="width: 286px;">
+                                    </div>
+                                    <div class="card h-100 mx-1 text-center bg-gray-4 border-0 top_sell">
                                         <div class="card-body">
-                                            <img src="./dist/assets/imgs/allin_imgs/32gb_laptop.png" class="w-100">
-                                            <p class="mb-0 fs-7  item-title">ORA 32GB DDR4 <br> 3200MHz Laptop Memory</p>
-                                            <p class="buy-now mb-0"> <span>Buy Now </span></p>
-                                             <p class="selling_product d-none" data_name="ORA 32GB DDR4 3200MHz Laptop RAM " data_version="DDR4" data_device="Laptop" data_gb="32GB" data_price="8450">
+                                            <img src="./dist/assets/imgs/allin_imgs/8gb_laptop.png" class="w-100"/>
+                                            <p class="mb-0 fs-7 py-2">ORA 8GB DDR5 <br> 4800MHz Laptop Memory</p>
+                                             <p class="fw-600 text-primary mb-0">Buy Now</p>
+                                             <p class="selling_product d-none" 
+                                                data_name="ORA 8GB DDR5 4800MHz Laptop RAM "
+                                                data_version="DDR5"
+                                                data_device="Laptop"
+                                                data_gb="8GB"
+                                                data_price="5150"
+                                                data_img="../dist/assets/imgs/allin_imgs/8gb_laptop.png">
                                             </p>
                                         </div>
-                                    </div><div class="card h-100 mx-1 text-center bg-gray-5 border-0 slick-slide slick-cloned" data-slick-index="5" id="" aria-hidden="true" tabindex="-1" style="width: 286px;">
-                                        <div class="card-body">
-                                            <a href="./storageproducts.html" tabindex="-1">
-                                                <img src="./dist/assets/imgs/allin_imgs/ora3_storage.png" class="w-100">
-                                                <p class="mb-0 fs-7  item-title">ORA3 M.2 NVMe 512GB<br> PCI Express 3.0</p>
-                                                <p class=" buy-now mb-0"> <span>Buy Now </span></p>
-                                            </a>
-                                        </div>
-                                    </div><div class="card h-100 mx-1 text-center bg-gray-5 border-0 slick-slide slick-cloned" data-slick-index="6" id="" aria-hidden="true" tabindex="-1" style="width: 286px;">
-                                        <div class="card-body">
-                                            <a href="./storageproducts.html" tabindex="-1">
-                                                <img src="./dist/assets/imgs/allin_imgs/ora4_storage.png" class="w-100">
-                                                <p class="mb-0 fs-7  item-title">ORA4 M.2 NVMe 2TB<br> PCI Express 4.0</p>
-                                                <p class="buy-now mb-0"> <span>Buy Now </span></p>
-                                            </a>
-                                        </div>
-                                    </div><div class="card h-100 mx-1 text-center bg-gray-5 border-0 top_sell slick-slide slick-cloned" data-slick-index="7" id="" aria-hidden="true" tabindex="-1" style="width: 286px;">
-                                        <div class="card-body">
-                                            <img src="./dist/assets/imgs/allin_imgs/ora_desktop.png" class="w-100">
-                                            <p class="mb-0 fs-7  item-title">ORA 32GB DDR5 <br> 4800MHz Desktop Memory</p>
-                                            <p class=" buy-now mb-0"> <span>Buy Now </span></p>
-                                             <p class="selling_product d-none" data_name="ORA 32GB DDR5 4800MHz Desktop RAM " data_version="DDR5" data_device="Desktop" data_gb="32GB" data_price="15500">
-                                         </p>
-                                        </div>
-                                    </div><div class="card h-100 mx-1 text-center bg-gray-5 border-0 top_sell slick-slide slick-cloned" data-slick-index="8" id="" aria-hidden="true" tabindex="-1" style="width: 286px;">
+                                    </div>
+                                    <div class="card h-100 mx-1 text-center bg-gray-4 border-0 top_sell">
                                         <div class="card-body">
-                                            <img src="./dist/assets/imgs/allin_imgs/8gb_laptop.png" class="w-100">
-                                            <p class="mb-0 fs-7  item-title">ORA 8GB DDR5 <br> 4800MHz Laptop Memory</p>
-                                            <p class="buy-now mb-0"> <span>Buy Now </span></p>
-                                             <p class="selling_product d-none" data_name="ORA 8GB DDR5 4800MHz Laptop RAM " data_version="DDR5" data_device="Laptop" data_gb="8GB" data_price="5150">
+                                            <img src="./dist/assets/imgs/allin_imgs/32gb_laptop.png" class="w-100"/>
+                                            <p class="mb-0 fs-7 py-2">ORA 32GB DDR4 <br> 3200MHz Laptop Memory</p>
+                                             <p class="fw-600 text-primary mb-0">Buy Now</p>
+                                             <p class="selling_product d-none" 
+                                                data_name="ORA 32GB DDR4 3200MHz Laptop RAM "
+                                                data_version="DDR4"
+                                                data_device="Laptop"
+                                                data_gb="32GB"
+                                                data_price="8450"
+                                                data_img="../dist/assets/imgs/allin_imgs/32gb_laptop.png"
+                                                >
                                             </p>
                                         </div>
-                                    </div><div class="card h-100 mx-1 text-center bg-gray-5 border-0 top_sell slick-slide slick-cloned" data-slick-index="9" id="" aria-hidden="true" tabindex="-1" style="width: 286px;">
+                                    </div>
+                                    <div class="card h-100 mx-1 text-center bg-gray-4 border-0 top_sell">
                                         <div class="card-body">
-                                            <img src="./dist/assets/imgs/allin_imgs/32gb_laptop.png" class="w-100">
-                                            <p class="mb-0 fs-7  item-title">ORA 32GB DDR4 <br> 3200MHz Laptop Memory</p>
-                                            <p class="buy-now mb-0"> <span>Buy Now </span></p>
-                                             <p class="selling_product d-none" data_name="ORA 32GB DDR4 3200MHz Laptop RAM " data_version="DDR4" data_device="Laptop" data_gb="32GB" data_price="8450">
+                                            <img src="./dist/assets/imgs/allin_imgs/32gb_laptop.png" class="w-100"/>
+                                            <p class="mb-0 fs-7 py-2">oooooooooooooooooooDDR4 <br> 3200MHz Laptop Memory</p>
+                                             <p class="fw-600 text-primary mb-0">Buy Now</p>
+                                             <p class="selling_product d-none" 
+                                                data_name="ORA 32GB DDR4 3200MHz Laptop RAM "
+                                                data_version="DDR4"
+                                                data_device="Laptop"
+                                                data_gb="32GB"
+                                                data_price="8450"
+                                                data_img="../dist/assets/imgs/allin_imgs/32gb_laptop.png"
+                                                >
                                             </p>
                                         </div>
-                                    </div></div></div>
-                                    
-                                    
-                                    
-                                    
-                                <button class="slick-next slick-arrow btn text-white" aria-label="Next" type="button" style="">→</button></div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
             </div>
-            <div class="bg-gradient-anwi container-fluid mt-5  rounded-0 text-white" id="innovation_sections">
+            <div class="bg-gradient-anwi container my-5 my-md-5 rounded-3 text-white" id="innovation_sections">
                 <div class="row align-items-center">
                 <div class="col-md-3 text-center">
-                    <img src="./dist/assets/imgs/allin_imgs/innovation_img1.png" class="img-fluid">
+                    <img src="./dist/assets/imgs/allin_imgs/innovation_img1.png" class="img-fluid"/>
                 </div>
                 <div class="col-md-6 text-center">
                     <h1 class="">Innovation at your fingertips</h1>
                     <h5 class="mb-md-3 fw-600">Be the first to set your digital world on fire!</h5>
-                    <a href="#" class="btn rounded-3 bg-black text-white px-md-4">Know More..</a>
+                    <a href="./index1.html" class="btn rounded-3 bg-black text-white px-md-4">Know More</a>
                 </div>
                 <div class="col-md-3  text-center">
-                    <img src="./dist/assets/imgs/allin_imgs/innovation_img2.png" class="img-fluid">
+                    <img src="./dist/assets/imgs/allin_imgs/innovation_img2.png" class="img-fluid"/>
                 </div>
                 </div>
             </div>
     <!-- footer -->
     <div id="footer-head" class=""></div>
     <!-- end-footer -->
+   
     <script src="./libs/bootstrap/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/js/jquery.min.js"></script>
     <script src="./libs/owlcarousel/js/owl.carousel.min.js"></script>
     <script src="./dist/js/plugins/jquery-ui.js"></script>
     <script src="./dist/js/plugins/magnific-popup.js"></script> -->
     <!-- Main JS -->
+    <script src="./dist/js/utils/helpers.js"></script>
     <script src="./dist/js/main.js"></script>
+    <script src="./dist/js/index/index.js"></script>
 
 
     <script>

productdetails.html

     <div id="navbar-head"></div>
     <!-- end-navbar -->
     <!-- main-body -->
-    <main class="main-body home-main-container">
-        <section class="services h-100 pt-3  bg-gradient-anwi">
-            <div class="container pt-5 ">
-                <div class="text-center text-white ">
-                </div>
-            </div>
-        </section>
+    <main class="main-body home-main-container" style="margin-top: 30px;">
         <div class="container mainContanierProduct">
             <div class="row">
                 <div class="col-xl-7 ">
                             <div class="col-xl-12" type="button" data-toggle="modal" data-target="#exampleModal">
                                 <div
                                     class=" productDetailsShadow productDetailsMain  card border-0 box-shodow d-flex justify-content-center align-items-center">
-                                    <img src="./dist/assets/imgs/Navbar/Accessiories-1.png" alt=""
+                                    <img src="./dist/assets/imgs/nophoto.png" alt=""
                                         class="card-img img-fluid">
                                 </div>
                             </div>
                                 <input type="hidden" name="" id="skudetailitem">
                                 <h5 class="productname">ORA3, M.2 NVMe SSD </h5>
                             </div>
-                            <div class="small-font">Improve your system's responsiveness, run apps faster and multitask
-                                with ease. Compatibility assurance when using the Crucial System Scanner or Crucial
-                                Advisor Tool</div>
-                            <div>₹<span class="price">3000</span></div>
+                            <div class="small-font des_productdes"></div>
+                            <div>₹<span class="price"></span></div>
                             <div class="text-danger msgErrorDetailsItem d-none">Product out of stock</div>
                         </div>
 
                                 </div>
                             </div>
                         </div>
-                        <hr>
+                        <hr class="d-none">
                         <div>
-                            <ul>
+                            <ul class="d-none">
                                 <li class="small-font">No Cost EMI Available <a class="learnMoreA" href="">Learn
                                         More</a></li>
                                 <li class="small-font">Buy Anwi Extended Warranty 1 Year at ₹2,699 <a class="learnMoreA"
             
                 <div class="col-lg-12 ">
                     <div class="dec-review-topbar no-transition nav mb-65 productdetailstabs d-flex gap-4" role="tablist">
-                        <a class="active font-1-5 no-transition" data-bs-toggle="tab" href="#des-details1"  aria-selected="true" role="tab">Description</a>
+                        <!-- <a class="active font-1-5 no-transition" data-bs-toggle="tab" href="#des-details1"  aria-selected="true" role="tab">Description</a> -->
 
-                        <a data-bs-toggle="tab" href="#des-details2" aria-selected="false" role="tab" class="font-1-5 no-transition" tabindex="-1">Specification</a>
+                        <a data-bs-toggle="tab" href="#des-details2" aria-selected="false" role="tab" class="active font-1-5 no-transition" tabindex="-1">Specification</a>
                       
                     </div>
                     <div class="tab-content dec-review-bottom">
-                        <div id="des-details1" class="tab-pane active show" role="tabpanel">
+                        <!-- <div id="des-details1" class="tab-pane active show" role="tabpanel">
                             <div class="description-wrap wrap-content-product-tabs">
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, recusandae! Alias tempore, molestias, architecto provident excepturi voluptate non repellendus, repellat a quis iusto consequuntur quas beatae fugit nisi totam ratione nesciunt reiciendis quod? Quae, consequuntur quasi. Laudantium, doloribus aliquam incidunt error qui itaque aperiam quia ducimus cupiditate, magnam aliquid iste molestiae eveniet? Eaque veniam illo hic, possimus dolorum quaerat ratione in ex voluptas itaque ullam, maiores iusto illum blanditiis sequi. Ex, ab nemo vero libero pariatur architecto culpa! Recusandae at fugiat itaque libero amet corporis exercitationem dolorum? Tenetur repellat tempora perspiciatis quibusdam maxime facilis necessitatibus eius sint corporis nihil! Accusantium.</p>
                             </div>
-                        </div>
-                        <div id="des-details2" class="tab-pane" role="tabpanel">
+                        </div> -->
+                        <div id="des-details2" class="tab-pane active show" role="tabpanel">
                             <div class="specification-wrap table-responsive">
                                 <table class="table table-bordered wrap-content-product-tabs">
                                     <tbody class="append-specs">
     <script src="./dist/toaster/toastr.js"></script>
     <script src="./libs/bootstrap/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/Js/jquery.min.js"></script>
-    <script src="./dist/js/main.js"></script>