code added

dist/Js/auth/apiservice.js

-// let SERVERNAME = 'https://anwi.bizgaze.app';
+//let SERVERNAME = 'https://anwi.bizgaze.app';
 let SERVERNAME = 'https://beta.bizgaze.app';
-//let SERVERNAME = 'http://localhost:3088';
 const STAT = 'b276960fddf84e8cb63de6e32d31529b';
+
+
+
 async function getStatAPIService(url,data={}){
     let config = {
         url,
 }
 
 
-async function postAPIServiceWarranty(url,data={}){
-    let SERVERURL = 'https://anwi.bizgaze.app';
+async function postAPIService(url,data={}){
     let config = {
-        url:`${SERVERURL}/${url}`,
+        url:`${SERVERNAME}/${url}`,
         method:'post',
         data:data,
         headers: {
-            'Authorization': `Basic 6cdcfe22-1623-4740-97e0-363d518c0e8a`,
+            'Authorization': `Basic fffe5440-5be6-4c07-876f-113c13de7382`,
             'Content-Type': 'application/json'
         },
     }
 
     return response;
 }
-async function postAPIService(url,data={}){
-     let SERVERURL = 'https://beta.bizgaze.app';
-    //let SERVERURL = 'http://localhost:3088';
-    let config = {
-        url:`${SERVERURL}/${url}`,
-        method:'post',
-        data:data,
-    }
-    let response = await axios(config);
-
-    return response;
-}
 
 
 async function postAPIServiceLocal(url,data={}){
     let config = {
       url:`${SERVERNAME}/${url}`,
         method:'post',
-        data:JSON.stringify(data),
+        data:JSON.stringify(data    ),
         headers: {
-            'Authorization': `Basic c86af480-b5ef-43af-8ce9-503e5b831e2e`,
+            'Authorization': `Basic fffe5440-5be6-4c07-876f-113c13de7382`,
             'Content-Type': 'application/json'
         },
     }
     return response;
 }
 async function getAPIServiceLocal(url){
-    let SERVERURL = 'https://anwi.bizgaze.app';
     let config = {
-      url:`${SERVERURL}/${url}`,
+      url:`${SERVERNAME}/${url}`,
         method:'get',
+    
         headers: {
-            'Authorization': `Basic ed40b74d-561a-47af-b03b-4f29c5ff6937`,
+            'Authorization': `Basic fffe5440-5be6-4c07-876f-113c13de7382`,
             'Content-Type': 'application/json'
         },
     }
         if(!cookieData) return window.location.href = "/"
        }
         let token = isStat ?`stat ${this.statToken}` : `Basic ${cookieData.token}`;
-        // let token = isStat ?`stat ${this.statToken}` : `Basic ${this.token}`;
+        this.token = token;
         let successResFun = this.buildSuccessResponse;
         let failureResFun = this.buildFailureResponse;
         let config = {
                 return successResFun(response.data)
             }
             if(response.data.code == '417'){
-                window.location.href = '/index.html'
+                // window.location.href = '/index.html'
                 return failureResFun(response.data)
             }
             if(response.data.code != '0'){
 
     }
 
-
     buildURL(url){
         return `${this.baseURL}/${url}`;
     }
         if(!cookieData){
           return  justGetAPIService('/Account/Session/Validate')
         }
+
+      
+
+
     }
 
     
 
     removeCookie(token){
         Cookies.remove(token)
-}
-    async validateToken() {
+    }
+
+
+    async validateToken(){
         return await API_SERVICES_ACTIONS.getAPIService(`Account/Session/Validate`)
     }
 }
     setCookie :COOKIE_HELPER.setCookie,
     removeAuthCookie:COOKIE_HELPER.removeCookie.bind(null,AUTH)
 }
+
+
 function setCookieManual(token){
     Cookies.set(AUTH,{
         token,
 
 async function checkValidAuth(cb,redirect=undefined){
     debugger;
+
    document.querySelector('auth-loader').show();
     const res = await COOKIE_HELPER.validateToken();
-    debugger
     if(!res.response){
         if(redirect){
             window.location.href =redirect;
     cb();
    },300);
 }
+
+
+// setCookieManual('6eb70fee-35ef-4ca2-95cd-01ebdd616eb1');

dist/Js/auth/login.js

         COOKIE_HELPER_ACTIONS.setCookie({
           token: res.data.result.sessionId,
           userid: res.data.result.userId,
+          ...res.data.result
         });
         // setInitLoginLocal();
         window.localStorage.setItem("Useremail", userEmail);

dist/Js/components/authloader/authloader.js

 </style>
   <div class="overlayanwiAuth ">
   
+  <div style="
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width:40px;
+    display:none;
+    ">
 
+    <span>
+  <?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 116.31" style="enable-background:new 0 0 122.88 116.31" xml:space="preserve"><g><path d="M4.06,12.67C1.87,12.67,0,10.8,0,8.51c0-2.19,1.87-4.06,4.06-4.06h5.62c0.1,0,0.31,0,0.42,0c3.75,0.1,7.08,0.83,9.88,2.6 c3.12,1.98,5.41,4.99,6.66,9.47c0,0.1,0,0.21,0.1,0.31L27.78,21h2.34V4.12c0-2.27,1.85-4.12,4.12-4.12h21.67 c2.27,0,4.12,1.85,4.12,4.12v10.02c3.42-3.41,8.06-5.5,13.18-5.5c2.22,0,4.36,0.4,6.34,1.12c4.08-4.33,9.87-7.04,16.29-7.04 c10.96,0,20.07,7.88,21.99,18.28h0.99c2.29,0,4.06,1.87,4.06,4.06c0,0.42-0.11,0.83-0.21,1.25l-10.61,42.76 c-0.42,1.87-2.08,3.12-3.95,3.12l0,0H41.51c1.46,5.41,2.91,8.32,4.89,9.68c2.39,1.56,6.56,1.66,13.53,1.56h0.1l0,0h47.03 c2.29,0,4.06,1.87,4.06,4.06c0,2.29-1.87,4.06-4.06,4.06H60.04l0,0c-8.64,0.1-13.94-0.1-18.21-2.91 c-4.37-2.91-6.66-7.91-8.95-16.96l0,0L18.94,18.92c0-0.1,0-0.1-0.1-0.21c-0.62-2.29-1.66-3.85-3.12-4.68 c-1.46-0.94-3.43-1.35-5.72-1.35c-0.1,0-0.21,0-0.31,0H4.06L4.06,12.67L4.06,12.67z M84.38,37.69c0-1.28,1.27-2.32,2.83-2.32 c1.56,0,2.83,1.04,2.83,2.32v15.69c0,1.28-1.27,2.32-2.83,2.32c-1.56,0-2.83-1.04-2.83-2.32V37.69L84.38,37.69z M67.43,37.69 c0-1.28,1.27-2.32,2.83-2.32c1.56,0,2.83,1.04,2.83,2.32v15.69c0,1.28-1.27,2.32-2.83,2.32c-1.56,0-2.83-1.04-2.83-2.32V37.69 L67.43,37.69z M50.49,37.69c0-1.28,1.27-2.32,2.83-2.32c1.56,0,2.83,1.04,2.83,2.32v15.69c0,1.28-1.27,2.32-2.83,2.32 c-1.56,0-2.83-1.04-2.83-2.32V37.69L50.49,37.69z M85.57,13.37c2.31,2.05,4.14,4.66,5.29,7.63h19.85 c-1.68-6.65-7.7-11.58-14.87-11.58C91.89,9.42,88.29,10.91,85.57,13.37L85.57,13.37z M92.21,29.11L92.21,29.11l-38.01,0l0,0H30.07 l0,0l9.26,34.86h65.65l8.63-34.86H92.21L92.21,29.11z M55.31,21c0.11-0.29,0.23-0.57,0.35-0.85V7.2c0-1.64-1.35-2.99-2.99-2.99 H37.71c-1.64,0-2.99,1.34-2.99,2.99V21H55.31L55.31,21z M94.89,96.33c5.52,0,9.99,4.47,9.99,9.99s-4.47,9.99-9.99,9.99 c-5.51,0-9.99-4.47-9.99-9.99S89.38,96.33,94.89,96.33L94.89,96.33L94.89,96.33z M51.09,96.33c5.51,0,9.99,4.47,9.99,9.99 s-4.47,9.99-9.99,9.99s-9.99-4.47-9.99-9.99S45.57,96.33,51.09,96.33L51.09,96.33L51.09,96.33z"/></g>
+    </svg>
+    </span>
+    </div>
 <div class="authloaderanwi">
 <div class='loader' id='lrd1'></div>
 </div>
 class AuthLoader extends HTMLElement {
     constructor() {
       super();
+      console.log(this.payment);
       this._shadowRoot = this.attachShadow({ 'mode': 'open' });
       this._shadowRoot.appendChild(template.content.cloneNode(true));
     }
+
+    static get observedAttributes() {
+      return ['payment'];
+    }
+  
+    // define getters and setters for attributes
+    get payment() {
+      return this.getAttribute('payment');
+    }
+  
+    set payment(val) {
+      if (val) {
+        this.setAttribute('payment', val);
+      } else {
+        this.removeAttribute('payment');
+      }
+    }
     
 
     show(){
     }
 
     hide(){
-        // $('.overlayanwiAuth').addClass('display','none');
+         //$('.overlayanwiAuth').addClass('display','none');
         this._shadowRoot.querySelector('.overlayanwiAuth').style.display = "none";
     }
 }

dist/Js/localstorage/checkout.js

+const ALL_ADDRESS_LOCAL = 'ALL_ADDRESS_LOCAL';
+
+function setAddressLocal(payload){
+    let addressList = getAddressLocal();
+    addressList = addressList?addressList:[];
+    localStorage.setItem(ALL_ADDRESS_LOCAL,JSON.stringify({...addressList,...payload}))
+}
+
+function getAddressLocal(){
+    let res =  localStorage.getItem(ALL_ADDRESS_LOCAL)
+    if(!res) return null;
+
+    return JSON.parse(res);
+}
+
+function removeAddressLocal(){
+    localStorage.removeItem(ALL_ADDRESS_LOCAL);
+}

dist/Js/localstorage/loginauthlocal.js

+const INIT_LOGIN_AUTH = 'INIT_LOGIN_AUTH';
+
+function setInitLoginLocal(){
+    localStorage.setItem(INIT_LOGIN_AUTH,true);
+}
+
+function getInitLoginLocal(){
+    return JSON.parse(localStorage.getItem(INIT_LOGIN_AUTH));
+}
+
+
+function removeInitLoginLocal(){
+    localStorage.setItem(INIT_LOGIN_AUTH,false);
+}

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">
                                 <a href="./myaccount.html" class="my_avatar"><i class="fa-solid fa-user"></i></a>
                                 </div>
                                 <div class="same-style header-cart">
-                                    <a class="cart-active1" href="#"><i class="fa-solid fa-cart-shopping"></i></a>
+                                <a class="cart-active1 position-relative" href="./shopping-cart.html"><i class="fa-solid fa-cart-shopping"></i>
+                                <span class="position-absolute cartnumcount d-none"  style="top:-27%;right:-80%">0</span>
+                                </a>
                                 </div>
                             </div>
                         </div>
                                 <a href="./myaccount.html" class="my_avatar"><i class="fa-solid fa-user"></i></a>
                                 </div>
                                 <div class="same-style header-cart">
-                                    <a class="cart-active1" href="#"><i class="fa-solid fa-cart-shopping"></i></a>
+                                <a class="cart-active1 position-relative" href="./shopping-cart.html"><i class="fa-solid fa-cart-shopping"></i>
+                                <span class="position-absolute cartnumcount d-none"  style="top:-27%;right:-80%">0</span>
+                                </a>
                                 </div>
                             </div>
                         </div>

dist/Js/orderconfirmation.js

+function orderConfirmation(){
+    init();
+    function init(){
+        addFullLoader();
+        getOrderStatus();
+    }
+
+    function orderlistsummary({name,price,qty,total}){
+        let priceAmt = '';
+        let totalAmt = '';
+
+        
+        let [priceSysm,priceamt] = getCurrencySymbol(price)
+        priceAmt = `${priceSysm}${priceamt}`
+        
+
+        
+        let [qtySymb,qtyamt] = getCurrencySymbol(qty*price)
+       
+
+        totalAmt = `${qtySymb}${qtyamt}`
+
+        return `
+        <div class="row">
+                            <div class="col-4">
+                                <div class="row">
+                                    <div class="col-6">
+                                        <img class="w-100 h-100" src="http://127.0.0.1:5504/dist/assets/imgs/Navbar/Accessiories-2.png" alt="">
+                                    </div>
+                                    <div class="col-6 d-flex justify-content-center align-items-center">
+                                        <div class="itemname">${name}</div>
+                                        
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-3 d-flex align-items-center justify-content-center">
+                                ${priceAmt}
+                            </div>
+                            <div class="col-2 d-flex align-items-center justify-content-center">
+                               ${qty}
+                            </div>
+                            <div class="col-3 text-end">
+                               ${totalAmt}
+                             </div>
+                        </div>`;
+    }
+
+    function addFullLoader(){
+        document.querySelector('auth-loader').show();
+    }
+
+    function removeFullLoader(){
+        document.querySelector('auth-loader').hide();
+    }
+
+    async function getOrderStatus(){
+       
+        const searchParams = window.location.search.split('&');
+        let orderId = searchParams[0].split('=')[1];
+
+        debugger;
+        let orderRes = await API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/integrations/hyperfusionpaymentgateway/gethyperfusionpaymentdetails/orderid/${orderId}`);
+        if(orderRes.isError){
+            removeFullLoader();
+            return;
+        }
+        console.log(orderRes);
+        //payment_group
+       
+        orderRes = JSON.parse(orderRes.response.result)[0];
+        $('.paymentmethodconfirm').html(orderRes.payment_group)
+        if(orderRes.payment_status === 'FAILED'){
+            $('.ordercontainerconfirmError').removeClass('d-none');
+            $('.successorderconfirm').addClass('d-none');
+            removeFullLoader();
+            return;
+        }
+      
+        const res =  await API_SERVICES_ACTIONS.postAPIService(`apis/v4/bizgaze/transact/orders/updatepaymenttransactionstatus/refid/${orderId}`,null);
+
+        console.log(res,'ress');
+
+        if(res.isError){
+            console.log(res);
+            $('.ordercontainerconfirmError').removeClass('d-none');
+            $('.successorderconfirm').addClass('d-none');
+            removeFullLoader();
+            return;
+        }
+
+
+        if(!res.response.message.toLowerCase().includes('success')){
+            console.log(res);
+            $('.ordercontainerconfirmError').removeClass('d-none');
+            $('.successorderconfirm').addClass('d-none');
+            removeFullLoader();
+            return;
+        }
+
+        let resData = JSON.parse(res.response.result);
+
+        const {NetTotal,TaxAmount,OrderItems,CreatedDate,OrderNo
+        } = resData;
+        let [netcurrencySymbol,netamount] = getCurrencySymbol(NetTotal);    
+        $('.totalordersummary').html(`${netcurrencySymbol}${netamount}`);
+
+       {
+        let [ordercurrencySymbol,orderamount] = getCurrencySymbol(TaxAmount);
+        $('.totaltaxsummary').html(`${ordercurrencySymbol}${orderamount}`);
+       }
+
+       let orderItemsListHTML = '';
+
+       for(let i=0;i<OrderItems.length;i++){
+        const {ItemName:name,UnitPrice:price,Quantity:qty,UnitPrice:total} = OrderItems[i];
+        orderItemsListHTML += orderlistsummary({
+            name,
+            price,
+            qty,
+            total
+        });
+       }
+       let userData = COOKIE_HELPER_ACTIONS.getCookie();
+       let {name} = userData;
+       $('.username').html(name);
+       $('.orderlistconfirm').html(orderItemsListHTML);
+
+       $('.createdDateConfirm').html(CreatedDate);
+
+       $('.ordernumber').html(OrderNo);
+debugger;
+       localStorage.removeItem(CART_DATA)
+
+
+       removeFullLoader();
+        console.log(resData);
+
+    }
+
+
+   
+}
+
+    
+checkValidAuth(orderConfirmation)

dist/Js/productdetails/productdetails.js

+function startDetails(){
+    // http://127.0.0.1:5502/productdetails.html?productId=106633230000024
+    let productId = window.location.search.split('=')[1].split('&')[0];
+    console.log(productId);
+    let itemtagscombinationRes = null;
+    let labels = {};    
+    let isThereInLabel = {};
+    let currentComb = null;
+
+    let group = {};
+
+    let currentClick = null;
+    debugger;
+    if(productId){
+        getProductDetails(productId);
+        appendSpecs(productId)
+    }else{
+       window.location.href = "/notfound.html"
+    }
+
+    let specification_wrap_action = {
+        remove(){
+            debugger;
+            $('.specification-wrap').addClass('d-none');
+        },
+
+        add(){
+            $('.specification-wrap').removeClass('d-none');
+        }
+    }
+
+    let description_action = {
+        addVal(value){
+            $('.description-wrap > p').html(value);
+        },
+
+        removeVal(value){
+            $('.description-wrap > p').html('');
+        }
+    }
+
+    function getSpecsItemHTML({name,des,itemid,id}){
+        return ` <tr id="${id}" data-specitemid="${itemid}">
+        <td style="width:200px">${name}</td>
+        <td class="">${des}</td>
+    </tr>`;
+    }
+
+    async function appendSpecs(id){
+        let resData = await API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/integrations/products/itemspecifications/itemid/${id}`,true);
+
+        if(resData.isError){
+
+            return;
+        }
+
+        const res = resData.response;
+        console.log(JSON.parse(res.result));
+        const data = JSON.parse(res.result);
+        console.log(data);
+        let html = '';
+        for(let i=0;i<data.length;i++){
+            const {specificationname,specificationitemid,itemid,description} = data[i];
+            html += getSpecsItemHTML({
+                name:specificationname,id:specificationitemid,itemid,des:description
+            });
+        }
+        debugger;
+        
+        $('.append-specs').html(html)
+    }
+   
+
+    function getParentHTML(name,productid,id,isMain){
+        return `<div class="pb-2 $${name?.replace(" ",'')}-parent">
+        <h5 class="py-2 smallHeadingProductDetails">${name}</h5>
+        <div class="d-flex gap-2 ${id}container" data-tagid="${id}">
+           
+        </div>
+    </div>`;
+    }
+
+    function onClickHandler(e) {
+  
+        $(e).parent().find('.borderselector').removeClass('borderselector');
+    
+        $(e).addClass('borderselector')
+    
+    }
+
+    function getChildHTML(tagid,name,isTrue){
+        return `
+        <div  data-type="${tagid}-${name}" data-tagiditem="${tagid}" class="specsmallcard optiontaganwi ${isTrue?'borderselector':''} card small-font  p-3">
+            ${name}
+        </div>
+    `
+    }
+
+    function addeventlisteners(){
+      
+        $('.optiontaganwi').each(function (i,el){
+          $(el).click(function (e){
+            
+            $(e.target).parent().find('.borderselector').removeClass('borderselector');
+            $(e.target).addClass('borderselector')
+           searchComb();
+            currentClick = e.target;
+           // getAllCombination();
+          })
+        });
+    }
+
+    function searchComb(){
+        let valuesSelected = [];
+ 
+        
+        $('#addtocart').removeClass('disabled');
+        $('.msgErrorDetailsItem').addClass('d-none');
+        $('.borderselector').each(function (i,el){
+            let val = $(el).html();
+            valuesSelected.push(val.trim());
+        });
+
+        let labelRecord = {};
+
+        for(let label in labels){
+            labelRecord[label] = false;
+        }
+
+        console.log(labelRecord);
+        specification_wrap_action.add();
+        console.log(group);
+        let unFiler = null;
+        for(let i=0;i<itemtagscombinationRes.length;i++){
+            const currItem = itemtagscombinationRes[i];
+            const {tagnames} = currItem;
+           
+
+                let isTrue = true;
+                let labelFilter = labelRecord;
+                
+                for(let i=0;i<valuesSelected.length;i++){
+                  
+                    if(!tagnames.includes(valuesSelected[i])){
+                        isTrue = false
+                        
+                        unFiler = labelFilter;
+                        break;
+                    }
+                    labelFilter[group[valuesSelected[i]]] = true;
+                }
+    
+                if(isTrue){
+                    console.log(itemtagscombinationRes[i],'itemtagscombinationRes[i]');
+                    const {quantity} = itemtagscombinationRes[i];
+                    if(quantity>=$('#quantity').val() && quantity>=1){
+                        currentComb = itemtagscombinationRes[i];
+                        $('.productname').html(itemtagscombinationRes[i].itemname)
+                        $('.price').html(itemtagscombinationRes[i].pricelist);
+                        // location.hash = itemtagscombinationRes[i].itemname.trim();
+                        appendSpecs(itemtagscombinationRes[i].itemid)
+                        history.replaceState(null, null, `#itemid=${itemtagscombinationRes[i].itemid}#${itemtagscombinationRes[i].itemname.trim()}`);
+                        let searchparms = location.search;
+                   debugger;
+                       
+                   
+
+//                         const regex = /sku="(\w+)"/g;
+// const newParams = searchparms.replace("sku", `$1${itemtagscombinationRes[i].sku}$2`);
+//                         location.search = newParams;
+                        $('#skudetailitem').val(itemtagscombinationRes[i].sku)
+                    }else{
+                        debugger;
+                        let name = itemtagscombinationRes[i].itemname.split('-')[0];
+                        $('#addtocart').addClass('disabled');
+                        let itemsName = name;
+                        $('.borderselector').each(function (i,e){
+                            itemsName += ` ${$(e).html().trim()}`;
+                        });
+
+                       specification_wrap_action.remove();
+                        $('#skudetailitem').val(-1)
+                         $('.productname').html(itemsName)
+                         history.replaceState(null, null, `#`);
+                         
+                         $('.msgErrorDetailsItem').removeClass('d-none');
+                        $('.price').html('');
+                    }
+                  
+                    initAddToCart()
+                    return;
+                  
+                }
+            
+        }
+
+        let name = itemtagscombinationRes[0].itemname.split('-')[0];
+        let itemsName = name;
+        $('.borderselector').each(function (i,e){
+            itemsName += `- ${$(e).html().trim()}`;
+        })
+        specification_wrap_action.remove();
+            $('.productname').html(itemsName)
+            $('#skudetailitem').val(-1)
+        $('.price').html('');
+        $('#addtocart').addClass('disabled');
+        $('.msgErrorDetailsItem').removeClass('d-none');
+        
+        initAddToCart()
+    }
+
+    function getAllCombination(){
+     const currClickAttr =  $(currentClick).html().trim();
+
+     let isThere = [];
+     for(let item in isThereInLabel){
+        let {tagnames} = isThereInLabel[item];
+        if(tagnames.includes(currClickAttr)){
+            isThere.push( isThereInLabel[item])
+        }
+     }
+        let selected = [];
+        $('.borderselector').each(function (i,e){
+            selected.push($(e).html().trim())
+        });
+        
+        // console.log(selected);
+        // console.log(isThere);
+
+        let ishashObj = {};
+
+        for(let i=0;i<isThere.length;i++){
+            let  {tagnames,tagids} = isThere[i];
+            tagnames = tagnames.split('|');
+            tagids = tagids.split('|');
+
+            for(let j=0;j<tagnames.length;j++){
+                if(!ishashObj[tagnames[j]]){
+                    ishashObj[tagnames[j]] = tagids[j];
+                }
+            }
+        }
+
+        // console.log(ishashObj);
+
+        // for(let i=0;i<itemtagscombinationRes.length;i++){
+            
+        // }
+    
+    }
+
+
+    async function getProductDetails(id){
+        
+   
+
+        // let res = await getStatAPIService(`${SERVERNAME}/apis/v4/bizgaze/integrations/products/productattributelist/productid/${id}`);
+  
+        let resData = await API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/integrations/products/productattributelist/productid/${id}`,true);
+
+        if(resData.isError){
+            alert(resData.errorMsg.message);
+            return;
+        }
+
+        let res = resData.response;
+            
+        res = JSON.parse(res.result);
+        // console.log(res);
+
+      if(!res) return;
+
+        
+       
+
+        let html = '';
+     
+        for(let i=0;i<res.length;i++){
+            const currItem = res[i];
+            // parenttagid means under what label
+            // tag id means it know unquie id
+            const {parentattribute,parenttagid,tagid,attribute,productid} = currItem;
+
+            if(labels[parentattribute]){
+                labels[parentattribute].items.push({
+                    attribute,
+                    tagid:tagid
+                });
+            }else{
+                labels[parentattribute] = {
+                    id:parenttagid,
+                    items:[{
+                        attribute,
+                        tagid:tagid
+                    }]
+                };
+                html += getParentHTML(parentattribute,productid,parenttagid,i==0);
+            }
+
+        }
+        $('#spec-container-details').html(html);
+       
+
+        // console.log(labels,'labels');
+
+        let childIds = [];
+
+        for(let item in labels){
+            let {id,items} = labels[item];
+            // $(`[data-tagid=${id}]`)
+            let html = '';
+          
+            for(let i=0;i<items.length;i++){
+                const {attribute,tagid} = items[i]
+                childIds.push(tagid);
+                group[attribute] = item;
+                html +=  getChildHTML(tagid,attribute,i==0);
+            }
+            $(`[data-tagid="${id}"]`).html(html);
+        }
+
+        itemtagscombinationRes = await API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/integrations/products/itemtagscombination/productid/${id}`,true); 
+
+        itemtagscombinationRes = JSON.parse(itemtagscombinationRes.response.result);
+         console.log(itemtagscombinationRes);
+
+        let valuesSelected = [];
+
+        $('.borderselector').each(function (i,el){
+        
+            let val = $(el).html();
+            valuesSelected.push(val.trim());
+        });
+        debugger;
+        let searchParams = window.location.search.split("&");
+        let skuId = window.location.hash.split('=')[1];
+        // skuId = skuId.split('=')[1]
+        let isGo = true;
+        for(let i=0;i<itemtagscombinationRes.length;i++){
+            const currItem = itemtagscombinationRes[i];
+           
+            const {tagnames,sku,itemid} = currItem;
+          
+            isThereInLabel[tagnames] = itemtagscombinationRes[i];
+
+
+            let isTrue = true;
+            if(isGo){
+                // for(let i=0;i<valuesSelected.length;i++){
+                //     if(!tagnames.includes(valuesSelected[i])){
+                //         isTrue = false
+                //     }
+                // }
+                if(skuId != itemid){
+                    isTrue = false
+                }
+    
+                if(isTrue){
+                    debugger;
+                    console.log(itemtagscombinationRes[i],'itemtagscombinationRes[i]');
+                    currentComb = itemtagscombinationRes[i];
+                    $('.productname').html(itemtagscombinationRes[i].itemname);
+                    location.hash = itemtagscombinationRes[i].itemname.trim();
+                    $('#skudetailitem').val(itemtagscombinationRes[i].sku)
+                    $('.price').html(itemtagscombinationRes[i].pricelist)
+                    appendSpecs(itemtagscombinationRes[i].itemid)
+                    isGo = false;
+                    let {tagnames,tagids,pricelist} = itemtagscombinationRes[i];
+                        tagids = tagids.split('|');
+                        tagnames = tagnames.split('|');
+                        $('.optiontaganwi').removeClass('borderselector');
+             
+                        for(let i=0;i<tagids.length;i++){
+                        
+                            $(`[data-tagiditem="${tagids[i]}"]`).addClass('borderselector');
+                        } 
+                   // tagiditem
+                }
+            }
+        }
+
+
+        if(isGo){
+            console.log(itemtagscombinationRes[0]);
+            let {tagnames,tagids,pricelist} = itemtagscombinationRes[0];
+            tagids = tagids.split('|');
+            tagnames = tagnames.split('|');
+            $('.optiontaganwi').removeClass('borderselector');
+            currentComb = itemtagscombinationRes[0];
+            for(let i=0;i<tagids.length;i++){
+             
+                $(`[data-type="${tagids[i]}-${tagnames[i]}"]`).addClass('borderselector');
+            }
+
+            $('.price').html(pricelist);
+            //console.log(childIds);
+            // 
+          
+        }
+      
+        //getAllCombination(valuesSelected)
+
+      
+        
+        // for(let i=0;i<itemtagscombinationRes.length;i++){
+        //     const {tagnames} = itemtagscombinationRes[i];
+            
+        // }
+
+        $('#spec-container-details').children().slice(1).find('.specsmallcard').removeClass('specsmallcard');
+        addeventlisteners();
+        return;
+        // let resTwo = await postStatAPIService(`${SERVERNAME}/apis/v4/bizgaze/integrations/products/itemtagscombination/productid/${id}`);
+            
+      
+        //let html = '';
+        let attributesObj = {};
+        for(let i=0;i<res.length;i++){
+            const {parentattribute,tagid,productid} = res[i];
+            // let attributes = await postStatAPIService(`${SERVERNAME}/apis/v4/bizgaze/integrations/products/productattributelist/parenttagid/${tagid}`);
+            // attributesObj[tagid] = JSON.parse(attributes.data.result);
+            // console.log(attributes.data.result,tagid);
+            html += getParentHTML(parentattribute,productid,tagid,i==0);
+        }
+
+        $('#spec-container-details').html(html);
+
+       
+        // let attributes = await postStatAPIService(`${SERVERNAME}/apis/v4/bizgaze/integrations/products/productattributelist/parenttagid/${tagid}`);
+        return;
+        for(let attr in attributesObj){
+            const arr = attributesObj[attr];
+           
+            let html = '';
+            for(let i=0;i<arr.length;i++){
+                const {attribute,tagid} = arr[i];
+                html += getChildHTML(tagid,attribute,i==0);
+            }
+
+            
+            $(`[data-tagid="${attr}"]`).html(html);
+
+
+        }
+
+        let defaultValues = await postStatAPIService(`${SERVERNAME}/apis/v4/bizgaze/integrations/products/sellableitemlist/productid/${id}`);
+        defaultValues = JSON.parse(defaultValues.data.result);
+        let {itemname,price} = defaultValues[0];
+        $('.productname').html(itemname);
+        $('.price').html(price)
+
+        $('#spec-container-details').children().slice(1).find('.specsmallcard').removeClass('specsmallcard');
+
+
+        
+
+       // getQuantityById(id)
+       
+    
+
+    }
+
+    
+}
+
+
+
+startDetails();
+

dist/Js/products/products.js

+function ramProductsInit(){
+    let RAM_ID =  '';
+  
+    async function init(){
+        const id = await getProductIdService();
+        getRamData(id)
+    }
+
+    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 urlPathName = window.location.pathname; 
+            let searchTerm = '';
+             if(urlPathName.includes('ram')){
+                searchTerm = "RAM ORA";
+            }else if(urlPathName.includes('storage')){
+                searchTerm = `SSD ORA`;
+            }
+            let resultItem = null;
+
+            for(let i=0;i<res.length;i++){
+                if(res[i].productname.includes(searchTerm)){
+                    resultItem = res[i];
+                    break;
+                }
+            }
+            const {productid} = resultItem;
+            RAM_ID = productid;
+            console.log(resultItem);
+            return reslove(productid)
+
+        });
+    }
+
+    async function getRamData(id){
+        let resData =await API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/integrations/products/itemtagscombination/productid/${id}`,true); 
+
+        if(resData.isError){
+            alert(resData.errorMsg.message);
+            return;
+        }
+
+        let res = resData.response;
+            
+        res = JSON.parse(res.result);
+
+        console.log(res);
+        let html = '';
+
+        for(let i=0;i<res.length;i++){
+            html += getRamCardHTML(res[i]);
+        }
+
+        $('.product_card_section').html(html);
+
+        $('.ramcard').click(function(e){
+            let sku = $(e.target).data('itemid');
+            let itemid = $(e.target).data('itemid');
+            debugger;
+            window.location.href = `/productdetails.html?productId=${RAM_ID}#itemid=${itemid}`
+
+        })
+    }
+
+    function getRamCardHTML({itemname,pricelist,itemid,sku}){
+        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}`;
+        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="./dist/assets/imgs/Navbar/ora_ddr4_desktop.png" 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();
+}
+debugger;
+ramProductsInit();

dist/Js/ramproducts/ramproducts.js

+function ramProductsInit(){
+    const RAM_ID = 106633230000024;
+    function init(){
+        getRamData(RAM_ID)
+    }
+    async function getRamData(id){
+        let resData =await API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/integrations/products/itemtagscombination/productid/${id}`,true); 
+
+        if(resData.isError){
+            alert(resData.errorMsg.message);
+            return;
+        }
+
+        let res = resData.response;
+            
+        res = JSON.parse(res.result);
+
+        console.log(res);
+        let html = '';
+
+        for(let i=0;i<res.length;i++){
+            html += getRamCardHTML(res[i]);
+        }
+
+        $('.ramsContainer').html(html);
+
+        $('.ramcard').click(function(e){
+            let sku = $(e.target).data('sku');
+            let itemid = $(e.target).data('itemid');
+
+            window.location.href = `/productdetails.html?productId=${RAM_ID}?sku=${sku}`
+
+        })
+    }
+
+    function getRamCardHTML({itemname,pricelist,itemid,sku}){
+        let tags = itemname.split('-');
+        let ramTech = tags[tags.length-2];
+        let gb =  tags[tags.length-1];
+        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();

dist/Js/shoppingcart/addtocart.js

+const CART_DATA = 'CART_DATA';
+
+let cartLength = 0;
+const CART_ADD = 'CART_ADD';
+function getCartData(){
+    const data = localStorage.getItem(CART_DATA);
+    if(data) return JSON.parse(data);
+    return null;
+}
+
+function removeCartData(){
+    localStorage.removeItem(CART_DATA);
+}
+
+function setCartData(data){
+    localStorage.setItem(CART_DATA,JSON.stringify(data));
+}
+
+function setLengthCart(){
+  const data =   getCartData();
+  if(!data) return;
+
+  
+  let length = 0;
+
+  for(let item in data){
+    let curr = data[item];
+    length += parseInt(curr.quantity);
+  }
+
+  if(length>0){
+    $('.cartnumcount').removeClass('d-none').html(length);
+  }else{
+    $('.cartnumcount').addClass('d-none').html(0);
+  }
+
+}
+
+
+function getQuantityById(id){
+   const data =  getCartData();
+   if(!data) return;
+
+   for(let item in data){
+        if(id == item){
+            $('#quantity').val(products[item].quantity);
+        }
+    }
+}
+
+function updateCartQuantity(id,val){
+    const data = getCartData();
+    if(!data) return;
+
+
+    data[id].quantity = val;
+
+    
+    setCartData(data);
+    updateSummaryPriceAdd();
+
+}
+
+function removeCartItem(id){
+    debugger;
+    let data = getCartData();
+    if(!data) return;
+
+    let newdata = {};
+   
+    for(let item in data){
+        if(item != id){
+            newdata[item] = data[item];
+        }
+    }
+
+    setCartData(newdata);
+    updateSummaryPriceAdd();
+
+    return Object.keys(newdata).length;
+}
+
+function updateSummaryPriceAdd(){
+    let data = getCartData();
+    let totalSummaryPrice = $('.totalSummaryPrice');
+    let totalPrice = $('.totalPrice');
+    let currecy = $('.currecy');
+    let noofitems = $('.noofitems');
+    if(!data) return;
+    let len = 0;
+    let totalAmt = 0;
+    for(let item in data) {
+        let {price,quantity} = data[item];
+        totalAmt += parseInt(price*quantity);
+        len += parseInt(quantity);
+    }
+    const [currencySymbol,amount] = getCurrencySymbol(totalAmt);
+    noofitems.html(len);
+
+    totalSummaryPrice.html(amount);
+    totalPrice.html(amount);
+    currecy.html(currencySymbol);
+
+
+}
+
+function initAddToCart(){
+
+    addEventListeners();
+
+    function addToCartFun(){
+        const data = getCartData();
+          
+        let id =  window.location.search.split('=')[1];
+        if(!data){
+          
+            let cartObj = {};
+           debugger;
+      
+            cartObj[$('#skudetailitem').val()]  = {
+                name:$('.productname').html(),
+                price:$('.price').html(),
+                quantity:$('#quantity').val(),
+                img:$('.productDetailsMain img').attr('src'),
+                sku:$('#skudetailitem').val()
+            }
+
+
+            addtoCart(cartObj);
+            //$('.cartnumcount').removeClass('d-none').html(1);
+            setLengthCart();
+           
+        }else{
+            //if(!data[id]) data['length']++;
+            let name = $('.productname').html();
+            let price = $('.price').html();
+            let quantity = $('#quantity').val();
+            let img = $('.productDetailsMain img').attr('src');
+            let sku = $('#skudetailitem').val();
+
+           
+       
+            if(data[$('#skudetailitem').val()]){
+                data[$('#skudetailitem').val()] = {
+                    name:name,
+                    price:price,
+                    quantity: parseInt(data[sku].quantity)+parseInt(quantity),
+                    img:img,
+                    sku:sku
+                }
+                addtoCart(data);
+            }else{
+                data[$('#skudetailitem').val()] = {
+                    name:name,
+                    price:price,
+                    quantity:parseInt(quantity),
+                    img:img,
+                    sku:sku
+                }
+                addtoCart(data);
+            }
+            
+        }
+
+        setLengthCart();
+
+    }
+    
+    function addEventListeners(){
+        $('#addtocart').html('Add to cart')
+        $('#addtocart').off().click((e)=>{
+            debugger    
+            $('#addtocart').off().click(function (el){
+                window.location.href = '/shopping-cart.html';
+
+            });
+
+            addToCartFun();
+            debugger;
+            toasterHelper('success',"Item added to cart");
+           
+           $('#addtocart').html('Go to cart');
+        });
+
+        $('.buynow').off('click').click(async (e)=>{
+            addToCartFun();
+            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';
+
+        });
+    }
+
+    function addtoCart(data){
+        const currData = getCartData();
+        let newData = {...currData,...data};
+        setCartData(newData);
+    }
+}
+
+initAddToCart();

dist/Js/shoppingcart/select_delivery.js

+function initSelectDevlivery() {
+    let editMode = false;
+    let countryId = null;
+    let currencyId = null;
+    let billingInfo = null;
+    let userName = null;
+   
+    let orderBtnAction = {
+        removeOrdernowBtn() {
+            $('.ordernowbtn').parent().addClass('d-none');
+        },
+
+        addOrdernowBtn() {
+            $('.ordernowbtn').parent().removeClass('d-none');
+        }
+    }
+
+    let addresslistAction = {
+        removeAddressContainer(){
+            $('.addresslist').addClass('d-none');
+        },
+        addAddressContainer(){
+            $('.addresslist').removeClass('d-none');
+        }
+    }
+
+    let changeAddressBtnAction = {
+        removeChangeAddressBtn() {
+            $('.changeAddressBtn').addClass('d-none');
+        },
+        addChangeAddressBtn() {
+            $('.changeAddressBtn').removeClass('d-none');
+        }
+        
+    }
+
+    let changesaveCancelBtnAction = {
+        removeChangeCancelBtn() {
+            $('.saveanddeliverCanel').addClass('d-none');
+        },
+        addChangeCancelBtn() {
+            $('.saveanddeliverCanel').removeClass('d-none');
+        }
+        
+    }
+
+    let saveFormLoading = {
+        addSpinner(){
+            $('.saveanddeliver').find('.spinner-border').removeClass('d-none');
+            $('.saveanddeliver').find('span').addClass('d-none');
+        },
+
+        removeSpinner(){
+            $('.saveanddeliver').find('.spinner-border').addClass('d-none');
+            $('.saveanddeliver').find('span').removeClass('d-none');
+        },
+    }
+    let paymentgatewaypageAction = {
+        addPaymentgatewaypage(){
+            $('.paymentgatewaypage').removeClass('d-none');
+        },
+
+        removePaymentgatewaypage(){
+            $('.paymentgatewaypage').addClass('d-none');
+        }
+    }
+
+    let paymentContainerAction = {
+        paymentContainerAdd(){
+            $('.orderslist').parent().removeClass('d-none');
+        },
+
+        paymentContainerRemove(){
+            $('.orderslist').parent().addClass('d-none');
+        }
+    }
+
+    const {phonenumber_errorhandler,addressdes_errorhandler,zipcode_errorhandler,state_errorhandler} = factoryErrorControl();
+
+    function init() {
+        getAddressRes();
+        loadEvents();
+        updateSummaryPriceAdd();
+        // changeAddressBtnAction.removeChangeAddressBtn();
+
+    }
+
+    function removeAllFormError(){
+        phonenumber_errorhandler.removeError();
+        addressdes_errorhandler.removeError();
+        zipcode_errorhandler.removeError();
+        state_errorhandler.removeError();
+
+        $('.errMsgFormEdit').addClass('d-none');
+        $('.errMsgFormEdit').html('');
+
+    }
+
+    async function getAddressRes() {
+        let cookieRes = COOKIE_HELPER_ACTIONS.getCookie();
+        console.log(cookieRes);
+        const { errorMsg, isError, response } = await API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/integrations/products/getbillinginfo/contactid/${cookieRes.userId}`);
+
+        let res = JSON.parse(response.result);
+        console.log(res, 'befores');
+        res = res[res.length - 1];
+
+        //createBillingForm();
+
+        const {cityid, lobid,organizationname,addressline,cityname,phonenumber,zipcode,name } =res;
+        billingInfo = res;
+        debugger;
+        console.log(res);
+        if (cityid != 0) {
+            $('.addnewAddressContainer').addClass('d-none');
+            $('.detailsAddressBg').removeClass('detailsAddressBg');
+            $('.ordersummaryheader').addClass('detailsAddressBg');
+            $('.displayadress').removeClass('d-none')
+            // $('.addresslist').removeClass('d-none');
+            loadShippingProducts();
+            userName = organizationname;
+            
+            setAddressHeader({name:organizationname,phonenumber,addressline,cityname,zipcode});
+            debugger;
+           
+            editMode = true;
+
+
+            // adding values
+
+            $('#phonenumber').val(phonenumber);
+            $('#addressdes').val(addressline);
+            $('#zipcode').val(zipcode);
+            debugger;
+            $('.userNamelogin').html(`${userName}`);
+            changeAddressBtnAction.addChangeAddressBtn()
+            getCountryStateCurrency();
+        }else{
+            $('.userNamelogin').html(`${organizationname}`);
+            loadShippingProducts();
+            paymentContainerAction.paymentContainerRemove();
+            getCountryStateCurrency();
+            orderBtnAction.removeOrdernowBtn();
+            $('.detailsAddressBg').removeClass('detailsAddressBg');
+            $('.selectAddress').addClass('detailsAddressBg');
+        }
+    }
+
+    function setAddressHeader({name,phonenumber,addressline,cityname,zipcode}){
+        $('.innerDisplayAddress').html(`${name}-${phonenumber}, ${addressline}, ${cityname} - `);
+        $('.zipcodeAddress').html(`${zipcode}`);
+
+    }
+
+    function checkForm(){
+   
+        let number = $('#phonenumber').val();
+        let zipcode = $('#zipcode').val();
+        let state = $('#state').val();
+        let address = $('#addressdes').val();
+
+        let isTrue = false;
+        if(!number || number.length!=10){
+            isTrue = true;
+            phonenumber_errorhandler.addError();
+        }
+
+        if(zipcode.length<6 || zipcode.length>6){
+            isTrue = true;
+            zipcode_errorhandler.addError();
+        }
+
+        if(!state){
+            isTrue = true;
+            state_errorhandler.addError();
+        }
+
+        if(!address){
+            isTrue = true;
+            addressdes_errorhandler.addError();
+        }
+
+        return isTrue;
+
+
+    }
+
+    async function createBillingForm(){
+        debugger;
+        let cookieRes = COOKIE_HELPER_ACTIONS.getCookie();
+        let { userId, name } = cookieRes;
+        const ctyId =   await getCountryId();
+        
+        let stateId = parseInt($('#state').val());
+         let payload = {
+                "cityid": stateId,
+                "CityName":$(`[data-id="${stateId}"`).html(),
+                "addressline1": $('#addressdes').val(),
+
+                "OrganizationType": 2,
+                "organizationname": name,
+                //"OrganizationId":,
+                "ContactName": name,
+                "ContactId": userId,
+                "countryname": 'india',
+                "countryid": ctyId,
+                "statename":$(`[data-id="${stateId}"`).html(),
+                "phonenumber": $('#phonenumber').val(),
+
+                "OrganizationId": userId,
+                "currencyid": 2,
+                "taxno": '0',
+                "BillingInfoExists": false,
+                "lobid": 0,
+                "lobname": "IT Products",
+                "gstindetailid": 0,
+                zipcode:$('#zipcode').val()
+            }
+            const res = await API_SERVICES_ACTIONS.postAPIService('apis/v4/bizgaze/crm/address/savebillinginfo', payload);
+            // http://localhost:3088/apis/v4/bizgaze/crm/address/savebillinginfo
+
+
+            setAddressHeader({name,phonenumber:$('#phonenumber').val(),addressline: $('#addressdes').val(),cityname:$(`[data-id="${stateId}"`).html(),zipcode:$('#zipcode').val()});
+
+            return new Promise((reslove,reject) => {
+                reslove(res);
+            })
+        console.log(res);
+    }
+
+    async function saveForm() {
+        
+        let cookieRes = COOKIE_HELPER_ACTIONS.getCookie();
+        let { userId, name } = cookieRes;
+        const { errorMsg, isError, response } = await API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/integrations/products/getbillinginfo/contactid/${cookieRes.userId}`);
+
+        let resAnwi = JSON.parse(response.result);
+        console.log(resAnwi, 'befores');
+        resAnwi = resAnwi[resAnwi.length - 1];
+
+        let stateId = parseInt($('#state').val());
+        let payload = {
+            ...resAnwi,
+            phonenumber:$('#phonenumber').val(),
+            addressline1:$('#addressdes').val(),
+            zipcode:$('#zipcode').val(),
+            cityid:stateId,
+            CityName:$(`[data-id="${stateId}"`).html(),
+           
+        }
+
+        console.log(payload,"ertyuioghjkl");
+
+
+      
+        //
+        const res = await API_SERVICES_ACTIONS.postAPIService('apis/v4/bizgaze/crm/address/savebillinginfo', payload);
+
+        return new Promise((reslove,reject) => {
+            reslove(res);
+        })
+    }
+
+    async function loadEvents() {
+        $('.addnewAddressContainer').off('click').click(function (e) {
+            $('.addnewAddressContainer').addClass('d-none');
+            $('.addresslist').removeClass('d-none');
+            changeAddressBtnAction.removeChangeAddressBtn();
+            changesaveCancelBtnAction.addChangeCancelBtn();
+           
+        });
+
+        $('.saveanddeliverCanel').off('click').click(function (){
+           if(!editMode){
+            $('.addnewAddressContainer').removeClass('d-none');
+            $('.addresslist').addClass('d-none');
+            changeAddressBtnAction.removeChangeAddressBtn();
+            changesaveCancelBtnAction.removeChangeCancelBtn();
+           }else{
+            loadShippingProducts();
+            addresslistAction.removeAddressContainer()
+            changeAddressBtnAction.addChangeAddressBtn();
+            paymentContainerAction.paymentContainerAdd();
+            $('.displayadress').removeClass('d-none');
+           }
+        });
+
+        
+        $('.saveanddeliver').off('click').click(async function (e) {
+           
+            saveFormLoading.addSpinner()
+            let isErrorForm =  checkForm();
+
+            if(isErrorForm){ 
+                saveFormLoading.removeSpinner();
+                return;
+            }
+            let res;
+            if(editMode){
+                res = await saveForm();
+            }else{
+                res = createBillingForm();
+            }
+            saveFormLoading.removeSpinner();
+
+       
+            const {isError,errorMsg,response} = res;
+            console.log(errorMsg);
+            if(isError){
+
+                $('.errMsgFormEdit').removeClass('d-none');
+                $('.errMsgFormEdit').html(`${errorMsg.message}`);
+
+
+
+                return;
+            }
+            debugger;
+            editMode = true;
+            let {name} = COOKIE_HELPER.getCookie();
+            // phonenumber:$('#phonenumber').val(),
+            // addressline1:$('#addressdes').val(),
+            // zipcode:$('#zipcode').val(),
+            // cityid:stateId,
+            // CityName:$(`[data-id="${stateId}"`).html(),
+            let stateId = parseInt($('#state').val());
+            setAddressHeader({name,addressline:$('#addressdes').val(),cityname:$(`[data-id="${stateId}"`).html(),phonenumber:$('#phonenumber').val(),zipcode:$('#zipcode').val()});
+
+
+            $('.errMsgFormEdit').html('');
+             loadShippingProducts();
+            addresslistAction.removeAddressContainer()
+            changeAddressBtnAction.addChangeAddressBtn();
+            paymentContainerAction.paymentContainerAdd();
+            $('.displayadress').removeClass('d-none');
+         
+
+        });
+        $('.changeAddressBtn').off('click').click(function (e){
+            console.log(e.target);
+            removeOrderSummary();
+            changeAddressBtnAction.removeChangeAddressBtn();
+            $('.displayadress').addClass('d-none')
+        })
+
+        $('.ordernowbtn').off().click(async function (e){
+            let cookieRes = COOKIE_HELPER_ACTIONS.getCookie();
+            let { userId, name } = cookieRes;
+           
+            paymentgatewaypageAction.addPaymentgatewaypage();
+            let payload = {
+                "OrganizationName": name,
+                "BranchId": 106632280000001,
+                "OrderItems": [
+                    {            
+                        "UnitPrice": 20,
+                        "Quantity": 1,
+                        "SKU": "11",
+                        "DiscountValue": 0,
+                        "DiscountPercent": 0
+                    }
+                ]
+            }
+            $('.paymentgatewaypage').removeClass('d-none');
+            const data = getCartData();
+       
+            let orderItems = [];
+            for(let i in data){
+                const {price,quantity,sku} = data[i];
+                let payload = {
+                    "UnitPrice": price,
+                    "Quantity": quantity,
+                    "SKU": sku,
+                    "DiscountValue": 0,
+                    "DiscountPercent": 0
+                }
+                orderItems.push(payload)
+            }
+
+            payload['OrderItems'] = orderItems;
+
+            debugger;
+          try {
+            const res =  await API_SERVICES_ACTIONS.postAPIService(`apis/v4/bizgaze/integrations/salesorder/save`,payload);
+          console.log(res.response.result);;
+
+          if(!res.response.result){
+            paymentgatewaypageAction.removePaymentgatewaypage();
+          }
+
+
+         
+        //   `http://localhost:3088/apis/v4/bizgaze/transact/orders/getpaymentgatewaytransaction/refid/106633780000069`
+
+          let response =  await  API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/transact/orders/getpaymentgatewaytransaction/refid/${res.response.result}`);
+         let  {PaymentLink} = JSON.parse(response.response.result);
+         window.location.href = PaymentLink;
+          } catch (error) {
+            paymentgatewaypageAction.removePaymentgatewaypage();
+          }
+        });
+    }
+
+    function getItemProductHTML(item) {
+        const { img, name, price, quantity, sku, id } = item;
+
+        return ` <div class="align-items-center item-product-add d-flex justify-content-between" data-id="${id}" data-sku="${sku}">
+        <div style="max-width: 100px;" class="">
+            <img class="w-100" src="${img}" alt="">
+        </div>
+       <div>
+        <div>
+            <div style="font-size:12px">${name}</div>
+        </div>
+        <div>
+            <span style="font-size:12px" class="font-weight-600">${getCurrencySymbol(price)}</span> <span>x <span class="qtyitem" style="font-size:12px">${quantity}</span></span>
+        </div>
+       </div>
+    </div>`;
+        return ` <div class="item-product-add" data-id="${id}" data-sku="${sku}">
+        <div class="row py-2">
+            <div class="col-sm-2">
+               <div class="w-100 d-flex justify-content-around">
+                <div class="d-flex flex-column align-items-baseline">
+                    <div class="px-4 py-2 selectaddressimgshow">
+                        <img class="w-100" src="${img}" alt="" class="w-100">
+                    </div>
+                    <div class="addresscontrol w-100 d-flex justify-content-center gap-1">
+                        <div class="rounded-contain btnminus">
+                            -
+                        </div>
+                        <div class="w-100p">
+                            <input class="qtyshowinput" disabled value="${quantity}" type="number">
+                        </div>
+                        <div class="rounded-contain btnplus">
+                            +
+                        </div>
+                    </div>
+                   </div>
+               </div>
+            </div>
+            <div class="col-sm-10">
+                <div class="row h-100">
+                   <div class="col-sm-8">
+                    <div class="h-100 d-flex flex-column justify-content-between">
+                        <div> ${name}</div>
+                        <div>
+                           <span>$</span> ${price} <span class="d-none">56% Off 2 offers applied</span>
+                        </div>
+                    <div class="d-flex gap-3">
+                        <span class="text-uppercase d-none">Save for later</span>
+                        <span class="text-uppercase cursor-pointer removecartItem">Remove</span>
+                    </div>
+                    </div>
+                   </div>
+                </div>
+            </div>
+        </div>
+      </div>`;
+    }
+
+    async function getCountryId(){
+        const countryRes = await API_SERVICES_ACTIONS.getAPIService('apis/v4/bizgaze/integrations/products/getcountry');;
+        
+        if (countryRes.isError) {
+            alert("something went wrong");
+            console.log(countryRes);
+            return;
+        }
+
+        let ctyId = 0
+        let countryData = JSON.parse(countryRes.response.result);
+
+        console.log(countryData);
+
+        for (let i = 0; i < countryData.length; i++) {
+            if (countryData[i].countryname.toLowerCase() === 'india') {
+                countryId = countryData[i].countryid;
+                ctyId = countryId
+                countrynameData = countryData[i].countryname;
+                break;
+            }
+        }
+
+        return ctyId;
+
+    }
+
+    async function getCountryStateCurrency() {
+        const countryRes = await API_SERVICES_ACTIONS.getAPIService('apis/v4/bizgaze/integrations/products/getcountry');;
+
+        if (countryRes.isError) {
+            alert("something went wrong");
+            console.log(countryRes);
+            return;
+        }
+
+
+        let countryData = JSON.parse(countryRes.response.result);
+
+        console.log(countryData);
+
+        for (let i = 0; i < countryData.length; i++) {
+            if (countryData[i].countryname.toLowerCase() === 'india') {
+                countryID = countryData[i].countryid;
+                countrynameData = countryData[i].countryname;
+                break;
+            }
+        }
+
+        const stateRes = await API_SERVICES_ACTIONS.getAPIService(`apis/v4/bizgaze/integrations/products/getcities/countryid/${countryID}`);
+
+        if (stateRes.isError) {
+            alert("something went wrong");
+            console.log(stateRes);
+            return;
+        }
+
+        let stateData = JSON.parse(stateRes.response.result);
+
+        console.log(stateData, 'state');
+
+
+        $('#state').html('');
+        console.log("start")
+        let html = '';
+        statesList = stateData;
+        for (let i = 0; i < stateData.length; i++) {
+            html += `<option value="${stateData[i].cityid}" data-id="${stateData[i].cityid}">${stateData[i].cityname}</option>`
+
+        }
+
+        $('#state').append(html);
+
+        $("#state").select2({
+            placeholder: "Select a City",
+            allowClear: true
+        });
+
+        const currencyRes = await API_SERVICES_ACTIONS.getAPIService('apis/v4/bizgaze/integrations/products/getcurrencies');
+
+        if(currencyRes.isError){
+            alert("something went wrong");
+            console.log(currencyRes);
+            return;
+        }
+
+        let currencyData = JSON.parse(currencyRes.response.result);
+
+        console.log(currencyData,'currencyDatacurrencyDatacurrencyData');
+
+        for(let i=0;i<currencyData.length;i++){
+            const curr = currencyData[i];
+            if(curr.currencyname.toLowerCase().includes('india')){
+                currencyid = curr.currencyid;
+            }
+        }
+    }
+
+    function loadShippingProducts(){
+        $('.detailsAddressBg').removeClass('detailsAddressBg');
+        $('.ordersummaryheader ').addClass('detailsAddressBg')
+debugger;
+        const products = getCartData();
+        console.log(products);
+        if (Object.keys(products||{}).length) orderBtnAction.addOrdernowBtn();
+
+        let productsHTML = '';
+        for (let item in products) {
+            const currItem = products[item];
+            productsHTML += getItemProductHTML({ ...currItem, id: item })
+        }
+        $('.orderlistcart').html(productsHTML);
+        // $('.orderslist').html(productsHTML);
+        $('.orderslist').html(` <label for="online">
+        Online
+        <input checked data-op="online" name="payment" type="radio" class="paymentbtn   " id="online">
+    </label>
+    <label for="cod">
+        Cash on develiop
+        <input data-op="cod" name="payment" type="radio" class="paymentbtn  " id="cod">
+    </label>`);
+
+    $('.paymentbtn').off().click(function (e){
+        const data = $(e.target).data('op');
+        if(data == 'online'){
+            orderBtnAction.addOrdernowBtn();
+        }else{
+            orderBtnAction.removeOrdernowBtn();
+        }
+    })
+        $('.btnminus').each(function (i, el) {
+            $(el).off().click(function (elm) {
+                let id = $(elm.target).parents('.item-product-add').data('id');
+                let val = parseInt($(elm.target).parents('.item-product-add').find('.qtyshowinput').val());
+                if (val <= 1) return;
+                val--;
+                updateCartQuantity(id, val)
+                $(elm.target).parents('.item-product-add').find('.qtyshowinput').val(val)
+            });
+        })
+        $('.btnplus').each(function (i, el) {
+            $(el).off().click(function (elm) {
+                let id = $(elm.target).parents('.item-product-add').data('id');
+                let val = parseInt($(elm.target).parents('.item-product-add').find('.qtyshowinput').val());
+                if (val >= 11) return;
+                val++;
+                updateCartQuantity(id, val)
+                $(elm.target).parents('.item-product-add').find('.qtyshowinput').val(val);
+            });
+        })
+        $('.removecartItem').each(function (i, el) {
+            $(el).click(function (elm) {
+                let id = $(elm.target).parents('.item-product-add').data('id');
+
+                let len = removeCartItem(id);
+                $(`.item-product-add[data-id="${id}"]`).remove();
+                if (!len) {
+                    orderBtnAction.removeOrdernowBtn();
+                }
+            });
+
+
+        })
+    }
+
+    function removeOrderSummary(){
+        $('.detailsAddressBg').removeClass('detailsAddressBg');
+        $('.selectAddress').addClass('detailsAddressBg');
+        $('.orderslist').html('');
+        orderBtnAction.removeOrdernowBtn();
+
+       // $('.detailsAddressBtn').addClass('d-none');
+        addresslistAction.addAddressContainer();
+        $('.saveanddeliver').removeClass('d-none');
+        $('.saveanddeliverCanel').removeClass('d-none')
+    }
+
+    function factoryErrorControl(){
+        let inputsArr = ['phonenumber','addressdes','zipcode','state'];
+
+        let controls = {};
+        for(let i=0;i<inputsArr.length;i++){
+            const id =inputsArr[i];
+
+            controls[`${id}_errorhandler`] = {
+                addError(){
+                    debugger;
+                    $(`#${id}`).parents('.col-sm-6').find('.invalid-feedback').addClass('d-block');
+                },
+                removeError(){
+                    $(`#${id}`).parents('.col-sm-6').find('.invalid-feedback').addClass('d-block');
+                }
+            }
+
+        }
+
+        return controls;
+    }
+
+    init();
+
+}
+
+checkValidAuth(initSelectDevlivery);

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>
+        `;
+    }
+}

dist/Js/utils/helpers.js

+
+const uid = function(){
+    return Date.now().toString(36) + Math.random().toString(36).substr(2);
+}
+
+function getCurrencySymbol(value=0) {
+    let type = 'INR'
+    if (type) {
+        const ans = new Intl.NumberFormat('en-US', { style: 'currency', currency: type }).format(value);;
+        const res = ans.split(/(\D+)/);
+        const currencySymbol = res[1];
+        const amount = res.slice(2,res.length).join('')
+
+
+        return [currencySymbol,amount]
+    } else {
+        console.log("errrrrrrrrrrrrrrrrrrrrrrrrr",type);
+        return ['',0];
+    }
+}
+
+function toasterHelper(type,message){
+    // toasterOpts()
+Command: toastr[type](message);
+function toasterOpts(){
+    toastr.options = {
+      "closeButton": true,
+      "debug": false,
+      "newestOnTop": true,
+      "progressBar": true,
+      "positionClass": "toast-top-center",
+      "preventDuplicates": true,
+      "onclick": null,
+      "showDuration": "300",
+      "hideDuration": "1000",
+      "timeOut": "5000",
+      "extendedTimeOut": "1000",
+      "showEasing": "swing",
+      "hideEasing": "linear",
+      "showMethod": "fadeIn",
+      "hideMethod": "fadeOut"
+    }
+  }
+}

dist/css/pages/orderconfirmation.css

+/* html,body{
+    height: 100%;
+} */
+.orderconfirmationMain{
+    /* height: 100%; */
+  
+    padding-top: 5rem;
+
+    display: flex;
+    
+    justify-content: center;
+}
+
+.ordercontainerconfirm{
+    max-width: 800px;
+    height: max-content;
+}
+
+.summaryconfirmdetails{
+    width: 250px;
+}

dist/css/pages/productdetails.css

-*{
-    font-family:"Satoshi", sans-serif;
-}
 .font-w600{
     font-weight: 600;
 }
  
 }
 
-/* .productDetailsShadow{
+.productDetailsShadow{
    
-} */
+}
 
 .learnMoreA{
     text-decoration: none;
     font-size: 1rem;
 }
 
-/* .bgproductDGen{
+.bgproductDGen{
     
-} */
+}
 
 .product-item-gallery{
     background: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
 
 .product-item-gallery.active-gallery-img{
     border: 3px solid;
+}
+
+.disable-item{
+    pointer-events: none;
+    background: #f3f3f3;
+}
+
+.tabsContainer{
+    margin-top: 100px !important;
+    transition: none !important;
+}
+
+
+.no-transition{
+    transition: none !important;
+}
+
+
+.productdetailstabs .active{
+    transition: none !important;
+    border-bottom: 3px solid;
+    font-weight: 600;
+
+}
+
+.tabsContainer .wrap-content-product-tabs{
+    margin-top: 40px !important;
 }

dist/css/pages/selectdelivery.css

+html,body{
+    height: 100%;
+}
+
+:root{
+    --info-header-color: blue;
+}
+
+h5{
+    margin: 0;
+    padding: 0;
+}
+
+.mianselectdelivery{
+    min-height: 100vh;
+}
+
+.info-numberbox{
+    width: 20px;
+    /* height: 20px; */
+    background-color: white;
+    color: var(--info-header-color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+    font-weight: 700;
+}
+
+.info-numberbox.selectdonefiled{
+    background-color: #f3f3f3;
+}
+
+.addresslabel{
+    position: relative;
+}
+
+.addressedit{
+    position: absolute;
+    top: 0;
+    right: 0;
+    cursor: pointer;
+    text-transform: uppercase;
+    font-weight: 500;
+    font-size: 14px;
+}
+
+.addresscontrol input{
+    width: 50px;
+}
+
+.rounded-contain{
+    width: 25px;
+    height: 25px;
+   border: 1px solid #c2c2c2;
+    border-radius: 25px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.selectaddressimgshow{
+    width: 130px;
+}
+
+.displayadress{
+    
+}
+
+.changeaddressbtn{
+    position: absolute;
+    top:50%;
+    right: 0;
+
+    width: max-content;
+
+
+    transform: translateY(-50%);
+}
+
+.detailsAddressBg{
+    background: #2E1835;
+    color: white;
+}
+
+.detailsAddressBtn{
+    background-color: #F89C1F;
+    border: none;
+    padding: 0.5rem;
+    border-radius: 5px;
+    cursor: pointer;
+    color: white;
+}
+
+.paymentgatewaypage{
+    width: 100vw;
+    height: 100vh;
+
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.378);
+    color: white;
+    font-weight: 800;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    z-index: 9999;
+}
+
+.select2-container--default{
+    width: 100% !important;
+}
+
+.select2-selection__clear span{
+    display: none !important;
+}
+
+.select2-selection__rendered {
+    line-height: 50px !important;
+}
+.select2-container .select2-selection--single {
+    height: 60px !important;
+}
+.select2-selection__arrow {
+    height: 50px !important;
+}
+
+[name="payment"]:checked ~ label{
+    border: 1px solid blue  ;
+}

orderconfirmation.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+
+    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="./dist/css/main.css" />
+    <link rel="stylesheet" href="./dist/css/vendor/bootstrap.min.css">
+    <link rel="stylesheet" href="./dist/css/style.css">
+    <link rel="stylesheet" href="./dist/css/fontawesome.all.min.css">
+    <link rel="stylesheet" href="./dist/css/fontawesome.min.css">
+
+    <link rel="stylesheet" href="./dist/css/pages/orderconfirmation.css">
+    <title>Anwi</title>
+
+</head>
+
+<body>
+    <!-- navbar -->
+    <div id="navbar-head"></div>
+    <!-- end-navbar -->
+    <!-- main-body -->
+    <auth-loader></auth-loader>
+    <main class="orderconfirmationMain">
+        <section class="container d-flex justify-content-center">
+            <div class="ordercontainerconfirm ordercontainerconfirmError d-none  d-flex flex-column align-items-center justify-content-center">
+                <div class="p-3">
+                    <div class="text-center text-danger font-5">
+                        <i class="fa fa-warning"></i>
+                    </div>
+                    <div class="text-center">
+                    
+                        <h2>Payment Failed</h2>
+                    </div>
+                    <div>Please try a different payment method  </div>
+                </div>
+            </div>
+            <div class="ordercontainerconfirm successorderconfirm card">
+                <div class="p-3">
+                    <h2>Thank You!</h2>
+                    <div class="font-weight-600"> Hi, <span class="username">User</span></div>
+                    <div>Your order has been confirmed and will be shipping right away!</div>
+                </div>
+                <hr class="m-0 p-0"/>
+                <div class="p-3">
+                    <div>
+                        Details
+                    </div>
+                    <div class="row">
+                        <div class="col-sm-4">
+                            <div class="font-weight-600">Date</div>
+                            <div class="createdDateConfirm">Nov-03-2021</div>
+                        </div>
+                        <div class="col-sm-4">
+                            <div class="font-weight-600">Order Number</div>
+                            <div class="ordernumber">123456789</div>
+                        </div>
+                        <div class="col-sm-4">
+                            <div class="font-weight-600">Payment Method</div>
+                            <div class="paymentmethodconfirm">Visa 24-BLK</div>
+                        </div>
+                    </div>
+                </div>
+                <hr class="m-0 p-0"/>
+                <div class="p-3">
+                    <div>
+                        <div class="row">
+                            <div class="col-4 font-weight-600">
+                                Order Summary
+                            </div>
+                            <div class="col-3 text-center font-weight-600">
+                                Unit Price
+                            </div>
+                            <div class="col-2 text-center font-weight-600">
+                               Qty
+                            </div>
+                            <div class="col-3 text-end font-weight-600">
+                               Total
+                             </div>
+                        </div>
+                        <div class="orderlistconfirm">
+
+                        </div>
+                    </div>
+                </div>
+                <hr class="m-0 p-0"/>
+                <div class="d-flex justify-content-end p-3">
+                   <div  class="summaryconfirmdetails">
+                    <div class="d-flex justify-content-between">
+                        <div class="">Shipping </div>
+                        <div>0 Rs</div>
+                    </div>
+                     <div class="d-flex justify-content-between">
+                        <div class="">Tax </div>
+                        <div class="totaltaxsummary">50 Rs</div>
+                    </div>
+                     <div class="d-flex justify-content-between">
+                        <div class="font-weight-600 ">Total </div>
+                        <div class="totalordersummary">1050 Rs</div>
+                    </div>
+                   </div>
+                </div>
+            </div>
+
+        </section>
+    </main>
+    <!-- end main-body -->
+    <!-- footer -->
+    <div id="footer-head" class="sec-space-1"></div>
+    <!-- end-footer -->
+
+
+
+    <script src="./libs/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <script src="./dist/js/jquery.min.js"></script>
+    <script src="./dist/js/navbar.js"></script>
+
+    <script src="./dist/js/footer.js"></script>
+    <script src="./libs/cookies.min.js"></script>
+
+
+
+    <!--  -->
+    <script src="./libs/bootstrap/js/bootstrap.bundle.min.js"></script>
+        <script src="./dist/js/fontawesome.all.js"></script>
+    <script src="./dist/js/fontawesome.min.js"></script>
+
+
+    <script src="./dist/js/utils/helpers.js"></script>
+    <script src="./dist/js/footer.js"></script>
+    <script src="./libs/axios.min.js"></script>
+    <script src="./dist/js/components/authloader/authloader.js"></script>
+    <script src="./dist/js/auth/apiservice.js"></script>
+    <script src="./dist/js/shoppingcart/addtocart.js"></script>
+
+
+    <script src="./dist/js/orderconfirmation.js"></script>
+
+  
+
+</body>
+
+</html>

productdetails.html

     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <link rel="shortcut icon" type="image/x-icon" href="./dist/assets/imgs/favicon.gif">
+
     <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
     <link rel="stylesheet" href="./dist/css/main.css" />
     <link rel="stylesheet" href="./styles/style.css">
     <link rel="stylesheet" href="./libs/Owlcarousel/Css/owl.carousel.min.css">
     <link rel="stylesheet" href="./libs/Owlcarousel/Css/owl.theme.default.min.css">
-    <link rel="stylesheet" href="./dist/css/pages/productdetails.css">
+    <link rel="stylesheet" href="dist/css/pages/productdetails.css">
+
+    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="./dist/css/main.css" />
     <link rel="stylesheet" href="./style.css">
+    <link rel="stylesheet" href="./libs/owlcarousel/Css/owl.carousel.min.css">
+    <link rel="stylesheet" href="./libs/owlcarousel/Css/owl.theme.default.min.css">
+    <!-- <link rel="stylesheet" href="./dist/css/font_icon.min.css"> -->
+
+    <link rel="stylesheet" href="./libs/toaster/toastr.css" />
 
     <link rel="stylesheet" href="./dist/css/vendor/bootstrap.min.css">
     <link rel="stylesheet" href="./dist/css/vendor/bootstrap.min.css">
     <link rel="stylesheet" href="./dist/css/style.css">
     <link rel="stylesheet" href="./dist/css/fontawesome.all.min.css">
     <link rel="stylesheet" href="./dist/css/fontawesome.min.css">
-    <title>Products | Anwi</title>
+    <link rel="stylesheet" href="./dist/toaster/toastr.css" />
+    
+    <title>Anwi</title>
 
 </head>
 
     <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=" bgproductDGen border-0 ">
+                    <div class=" bgproductDGen  border-0 ">
                         <div class="row">
-                            <div class="d-none col-xl-2">
-                                <div class=" d-flex flex-column gap-2 p-2">
-                                    <div class="product-item-gallery active-gallery-img">
+                            <div class="d-none">
+                            <!-- <div class="d-none d-xl-flex flex-column col-xl-2"> -->
+                                <div class=" d-flex flex-column gap-2 p-2 d-none">
+                                   <!--  <div class="product-item-gallery active-gallery-img">
                                         <img src="./dist/assets/imgs/Navbar/Accessiories-1.png" alt=""
                                             class="w-100 h-100">
                                     </div>
                                     <div class="product-item-gallery ">
                                         <img src="https://www.pngall.com/wp-content/uploads/5/RAM-PNG.png" alt=""
                                             class="w-100 h-100">
-                                    </div>
+                                    </div> -->
                                 </div>
                             </div>
-                            <div class="col-xl-10" type="button" data-toggle="modal" data-target="#exampleModal">
+                            <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="#" alt="" class="card-img img-fluid">
+                                    <img src="./dist/assets/imgs/Navbar/Accessiories-1.png" alt=""
+                                        class="card-img img-fluid">
                                 </div>
                             </div>
 
                     <div class="card border-0">
                         <div>
                             <div>
-                                <h5 class="productname" style="font-size:1.5rem">ORA3, M.2 NVMe SSD </h5>
+                                <input type="hidden" name="" id="skudetailitem">
+                                <h5 class="productname">ORA3, M.2 NVMe SSD </h5>
                             </div>
-                            <div class="small-font product_desc d-none">Elevate your laptop's capabilities with DDR5
-                                Laptop Memory, featuring 4800 MHz speed
-                                in 8, 16, and 32 GB capacities. Benefit from
-                                unparalleled thermal performance, extended
-                                component lifespan, and consistently fast
-                                speeds thanks to our cutting-edge graphene
-                                sticker technology.</div>
-                            <div class="py-2">₹ <span class="price" style="font-size:1.5rem;font-weight:600">
-                                    3000</span></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="text-danger msgErrorDetailsItem d-none">Product out of stock</div>
                         </div>
 
                         <hr>
 
-                        <div class="d-none">
+                        <!-- <div class="d-none">
                             <h5 class="my-3 smallHeadingProductDetails ">Processor And Graphics
                             </h5>
                             <div class="d-flex gap-2">
-                                <div class="specsmallcard borderselector card small-font  p-3">
+                                <div class="specsmallcard  borderselector card small-font  p-3">
                                     Intel® Core i5-9400F
                                 </div>
                                 <div class="specsmallcard card small-font  p-3">
                                     Intel® Core i5-9400F
                                 </div>
                             </div>
-                        </div>
+                        </div> -->
                         <div class="pb-2 d-none">
                             <h5 class="pt-2 smallHeadingProductDetails">Colors</h5>
                             <!-- <div class="d-flex gap-2 colors-display-container">
                         <div id="spec-container-details">
 
                         </div>
-                        <div class="pb-2 memory-parent">
+
+
+                        <!-- <div class="pb-2 memory-parent d-none">
                             <h5 class="py-2 smallHeadingProductDetails">Memory</h5>
                             <div class="d-flex gap-2 memorycontainer">
-                                <div data-type="memory-desktop" data-device="Desktop"
+                                <div data-type="memory-desktop"
                                     class="specsmallcard borderselector card small-font  p-3">
                                     Desktop
                                 </div>
-                                <div data-type="memory-laptop" class="specsmallcard card small-font p-3" data-device="Laptop">
+                                <div data-type="memory-laptop" class="specsmallcard card small-font   p-3">
                                     Laptop
                                 </div>
                             </div>
                         </div>
 
-                        <div class="memory-details">
+                        <div class="memory-details d-none">
                             <h5 class="py-2 smallHeadingProductDetails">RAM Memory Technology</h5>
                             <div class="d-flex gap-2 pb-2 ramtech">
-                                <div type="button" onclick="onClickHandler(this)" 
+                                <div type="button" onclick="onClickHandler(this)"
                                     class="specsmallcard-mini borderselector card small-font  p-3">
-                                   <span data-version="DDR4">DDR4</span> 
+                                    DDR4
                                 </div>
-                                <div type="button" onclick="onClickHandler(this)" data-version="DDR5"
-                                    class="specsmallcard-mini card small-font  p-3">
-                                    <span data-version="DDR5">DDR5</span> 
+                                <div type="button" onclick="onClickHandler(this)"
+                                    class="specsmallcard-mini card small-font   p-3">
+                                    DDR5
                                 </div>
                             </div>
 
                                 <div class="d-flex gap-2 computersize">
 
                                     <div type="button" onclick="onClickHandler(this)"
-                                        class="specsmallcard-mini borderselector card small-font  p-3" data-gb="8 ">
-                                        8 GB 
+                                        class="specsmallcard-mini borderselector card small-font  p-3">
+                                        8 GB
                                     </div>
                                     <div type="button" onclick="onClickHandler(this)"
-                                        class="specsmallcard-mini card small-font p-3" data-gb="16GB">
+                                        class="specsmallcard-mini card small-font   p-3">
                                         16 GB
                                     </div>
                                     <div type="button" onclick="onClickHandler(this)"
-                                        class="specsmallcard-mini card small-font p-3" data-gb="32GB">
+                                        class="specsmallcard-mini card small-font   p-3">
                                         32 GB
                                     </div>
                                 </div>
                             </div>
-                        </div>
+                        </div> -->
 
-                        <div class="pb-2 d-none">
+
+
+
+                        <!-- <div class="pb-2 d-none">
                             <h5 class="py-2 smallHeadingProductDetails">Storage</h5>
                             <div class="d-flex gap-2">
-                                <div class="specsmallcard borderselector card small-font p-3">
+                                <div class="specsmallcard borderselector card small-font  p-3">
+
                                     256 GB SSD Capacity
+
                                 </div>
                                 <div class="specsmallcard card small-font   p-3">
                                     1 TB SSD Capacity
                                 </div>
                             </div>
-                        </div>
+                        </div> -->
 
 
                         <div class="d-none">
                                 <span class="qtybtn qtybtright bgGreyLight">+</span>
                             </div>
                         </div>
-                        <div class="card border-0 p-4 bgGreyLight my-3 d-none">
+                        <!-- <div class="card border-0 p-4 bgGreyLight my-3 d-none">
                             <div class="row">
                                 <div class="col-sm-8 small-font ">
-                                    Anwi NoteBook Pro Lustrous Gray i5 11th Gen + Iris Xe Graphics 16GB RAM + 512GB NVMe
+                                    Mi NoteBook Pro Lustrous Gray i5 11th Gen + Iris Xe Graphics 16GB RAM + 512GB NVMe
                                     SSD. * 1
+
                                 </div>
                                 <div class="col-sm-4">
                                     ₹59,999
+
                                 </div>
                             </div>
                             <div class="row">
                                     ₹59,999
                                 </div>
                             </div>
-                        </div>
+                        </div> -->
 
                         <!--  -->
                         <!-- <hr> -->
                                 </div>
                             </div>
                         </div>
-
-                        <div class="d-none">
+                        <hr>
+                        <div>
                             <ul>
                                 <li class="small-font">No Cost EMI Available <a class="learnMoreA" href="">Learn
                                         More</a></li>
                             </ul>
                         </div>
                         <hr>
-                        <div class="pb-2">
+                        <div class="pb-2 quantityHTML">
                             <span>Quantity :</span>
-                            <select name="quantity" class="p-2 rounded" id="quantity">
+                            <select name="quantity" id="quantity">
                                 <option value="1">1</option>
                                 <option value="2">2</option>
                                 <option value="3">3</option>
                             <button id="addtocart" class="w-100 btn bg-black text-white" style="border-radius: 5px;">
                                 Add to cart
                             </button>
-                            <button class="w-100 btn bg-black text-white" style="border-radius: 5px;">
+                            <button class="w-100 btn buynow bg-black text-white" style="border-radius: 5px;">
                                 Buy Now
                             </button>
                         </div>
 
                 </div>
             </div>
-            <div class="row py-4">
-                <div class="py-2">
-                    <h1 class="font-weight-600 product_heading satoshi_font text-black-50">The Advantages of
-                        Graphene-Based Insulation</h1>
-                    <p class="font-weight-500 mb-0 py-3 satoshi_font text-black-50">Introducing the all-new ORA memory
-                        series powered by Anwi Systems, specially craÿed for high-performance Laptops, PCs, and
-                        All-in-ones with graphene-based insulation to provide an exceptional
-                        heat dissipation effect.</p>
-                    <p class="font-weight-500 mb-0 pb-3 satoshi_font text-black-50">ORA memory series featured by Anwi
-                        Systems with graphene-based insulation to provide a more effective
-                        heat dissipation effect. The graphene cooling module allows natural convection or forced air
-                        cooling for
-                        fully enhanced heat dissipation. ORA memory series is the first on the market built specifically
-                        for high-</p>
+
+            <!-- tabs -->
+            <div class="row tabsContainer">
+            
+                <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 data-bs-toggle="tab" href="#des-details2" aria-selected="false" role="tab" class="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 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 class="specification-wrap table-responsive">
+                                <table class="table table-bordered wrap-content-product-tabs">
+                                    <tbody class="append-specs">
+                                        <tr>
+                                            <td class="width1">Data Transfer Rate</td>
+                                            <td>Anwi Ram</td>
+                                        </tr>
+                                        <tr>
+                                            <td>Memory Speed</td>
+                                            <td>3200</td>
+                                        </tr>
+                                        <!-- <tr>
+                                            <td class="width1">Models</td>
+                                            <td>FX 829 v1</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="width1">Categories</td>
+                                            <td>Digital Print</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="width1">Size</td>
+                                            <td>60’’ x 40’’</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="width1">Brand </td>
+                                            <td>Individual Collections</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="width1">Color</td>
+                                            <td>Black, White</td>
+                                        </tr> -->
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                       
+                    </div>
                 </div>
+              
             </div>
         </div>
 
-
-
     </main>
     <!-- footer -->
     <div id="footer-head" class="sec-space-1"></div>
     <!-- end-footer -->
 
-    <!-- modal open -->
-    <!-- Button trigger modal -->
-    <!-- <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#authmodal">
-        Launch demo modal
-    </button>
   
-    <div class="modal fade" id="authmodal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
-        <div class="modal-dialog">
-            <div class="modal-content">
-               
-                <div class="modal-body">
-                    hello world
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                    <button type="button" class="btn btn-primary">Save changes</button>
-                </div>
-            </div>
-        </div>
-    </div> -->
+
     <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/navbar.js"></script>
-    <script src="./dist/js/footer.js"></script>
-    <script src="./dist/js/productdetails.js"></script>
-    <!-- <script src="./dist/js/addtocart.js"></script> -->
-      <script src="./libs/cookies.min.js"></script>
-
+    <script src="./libs/axios.min.js"></script>
     <script src="./dist/js/fontawesome.all.js"></script>
     <script src="./dist/js/fontawesome.min.js"></script>
-    <script src="./dist/js/vendor/modernizr-3.11.7.min.js"></script>
-    <script src="./dist/js/vendor/jquery-v3.6.0.min.js"></script>
-    <script src="./dist/js/vendor/jquery-migrate-v3.3.2.min.js"></script>
     <script src="./dist/js/vendor/bootstrap.min.js"></script>
-    <script src="./dist/js/plugins/slick.js"></script>
-    <script src="./dist/js/plugins/wow.js"></script>
-    <script src="./dist/js/plugins/svg-injector.min.js"></script>
-    <script src="./dist/js/plugins/jquery.nice-select.min.js"></script>
-    <script src="./dist/js/plugins/mouse-parallax.js"></script>
-    <script src="./dist/js/plugins/images-loaded.js"></script>
-    <script src="./dist/js/plugins/isotope.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/main.js"></script>
-    <script>
-        let product_data = localStorage.getItem("product_data");
-        if(product_data === null){
-            let top_data = localStorage.getItem("top_data");
-            let t_data = JSON.parse(top_data);
-            $(".productname").html(t_data.name);
-            $(".price").html(t_data.price);
-            $(".productDetailsMain").find("img").attr("src",t_data.img);
-            $(".memorycontainer").find(".borderselector").removeClass("borderselector");
-            $(".memorycontainer").find("[data-device='"+t_data.device+"']").addClass("borderselector");
-            $(".memory-details").find(".borderselector").removeClass("borderselector");
-            $(".memory-details").find("[data-version='"+t_data.version+"']").addClass("borderselector");
-            $(".computersize").find("[data-gb='"+t_data.gb+"']").addClass("borderselector");
-
-        }else{
-            let data = JSON.parse(product_data);
-            $(".productname").html(data.name);
-            $(".price").html(data.price);
-            $(".memorycontainer").find(".borderselector").removeClass("borderselector");
-            $(".memorycontainer").find("[data-device='"+data.device+"']").addClass("borderselector");
-            $(".memory-details").find(".borderselector").removeClass("borderselector");
-            $(".memory-details").find("[data-version='"+data.version+"']").addClass("borderselector");
-            $(".computersize").find("[data-gb='"+data.gb+"']").addClass("borderselector");
-        }
-        
-
-
-       
-       
-    // $(".product_desc").html(data.description);
-    // $(".productDetailsMain").find("img").attr("src",data.image)
-    </script>
+
+    <!--  -->
+    <!-- <script src="./libs/toaster/toastr.js"></script> -->
+    <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="./libs/cookies.min.js"></script>
+  
+
+    <script src="./dist/js/navbar.js"></script>
+<script src="./dist/js/footer.js"></script>
+    <script src="./dist/js/utils/helpers.js"></script>
+    <script src="./dist/js/auth/apiservice.js"></script>
+    <script src="./dist/js/shoppingcart/addtocart.js"></script>
+    <script src="./dist/js/shoppingcart/shoppingcart.js"></script>
+    <script src="./dist/js/productdetails/productdetails.js"></script>
+
+
+
+
 </body>
 
 </html>

ramproducts.html

     <div id="navbar-head" class="shadow"></div>
     <!-- end-navbar -->
     <!-- main-body -->
-    
-    <main class="main-body home-main-container">
+    <main class="main-body home-main-container pt-md-0 pt-5">
         <section class="services h-100 pt-3  bg-gradient-anwi">
             <div class="container pt-5 ">
                 <div class="text-center text-white ">
                 </div>
             </div>
         </section>
-
         <section class="position-relative bg-black">
             <!-- <img src="./dist/assets/imgs/allin_imgs/ssd_img.png" class="img-fluid w-100" alt="ssd_img"/> -->
             <iframe src="https://player.vimeo.com/video/816131155?h=4667fd18e1&autoplay=1&loop=1&autopause=0&badge=0&player_id=0&controls=0&muted=1" width="1536px" height="860px" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
             <p class="bg-blue mb-0 p-2 px-3 rounded-circle shadow" id="unmute"><i class="fa-sharp fa-volume-xmark"></i></p>
         </div> -->
         </section>
-        <section class="pt-2" id="ora_products">
-            <div class="products-container">
-                <div class="product-cards">
-                    <div class="tab-content container" id="pills-tabContent1">
-                        <!------------------------------ RAM-------------------------->
-                        <div class="tab-pane fade show active" id="pills-network-cards" role="tabpanel" aria-labelledby="pills-network-cards-tab">
-                            <div class="py-md-5">
-                                <div class="text-center">
-                                    <h1 class="satoshi_font pb-md-4 pb-3">Discover the revolution of ORA</h1>
-                                    <p class="fs-6 satoshi_font fw-500 pb-md-4">
-                                        ORA Memory Series, harnessing cutting-edge</br>
-                                        Graphene technology for blazing-fast heat absorption in NVMe SSDs.</br>
-                                        Boasting an ultra-slim 1mm Heatsink, we defy temperature limits and redefine storage performance.
-                                    </p>
-                                </div>
-                                <div class="tab-content  rounded-4" id="pills-tabContent">
-                                    <div class="text-center py-md-5 py-4">
-                                        <span class="bg-black fs-5 px-md-4 py-md-2 py-2 px-4 rounded-3 text-white">Join the future with Anwi Systems</span>
-                                    </div>
-                                    <!-- first tab-pane -->
-                                    <div class="tab-pane fade show active" id="pills-network-cards-card" role="tabpanel" aria-labelledby="pills-network-cards-card-tab">
-                                        <div class="row g-4 pb-5 px-md-4">
-                                            <div class="col-lg-4 col-md-6 col-md-6 ram_card">
-                                                <div class="card border bg-gray-3 rounded-3 p-1 h-100">
-                                                    <img src="./dist/assets/imgs/Navbar/ora_ddr4_desktop.png" class="card-img-top" alt="...">
-                                                    <div class="card-body">
-                                                        <h5 class="card-title satoshi_font mb-0">ORA 8GB DDR4 3200MHz Desktop RAM </h5>
-                                                    </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">8GB DDR4</span>
-                                                        </li>
-                                                        <li class="border-0 py-0">
-                                                            <span class="satoshi_font">3200 Mhz</span>
-                                                        </li>
-                                                    </ul>
-                                                    <div class="card-body text-center">
-                                                        <a href="#"
-                                                            class="btn bg-white font-1-2 px-5 w-100 satoshi_font"
-                                                            data_name="ORA 8GB DDR4 3200MHz Desktop RAM "
-                                                            data_version="DDR4"
-                                                            data_device="Desktop"
-                                                            data_gb="8GB"
-                                                            data_price="2900">Details
-                                                        </a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="col-lg-4 col-md-6 col-md-6 ram_card">
-                                                <div class="card border bg-gray-3 rounded-3 p-1 h-100">
-                                                        <img src="./dist/assets/imgs/Navbar/ora_ddr5_desktop.png" class="card-img-top" alt="...">
-                                                    <div class="card-body">
-                                                            <h5 class="card-title satoshi_font mb-0">
-                                                                ORA 16GB DDR4 3200MHz Desktop RAM 
-                                                            </h5>
-                                                    </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">16GB DDR5</span>
-                                                        </li>
-                                                        <li class=" border-0 py-0">
-                                                            <span class="satoshi_font">3200 Mhz</span>
-                                                        </li>
-                                                    </ul>
-                                                    <div class="card-body text-center">
-                                                        <a href="#"
-                                                            class="btn bg-white font-1-2 px-5 w-100 satoshi_font"
-                                                            data_name="ORA 16GB DDR4 3200MHz Desktop RAM "
-                                                            data_version="DDR4"
-                                                            data_device="Desktop"
-                                                            data_gb="16GB"
-                                                            data_price="4750">Details 
-                                                        </a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                             <div class="col-lg-4 col-md-6 col-md-6 ram_card">
-                                                <div class="card border bg-gray-3 rounded-3 p-1 h-100">
-                                                  
-                                                        <img src="./dist/assets/imgs/Navbar/ora_ddr4_laptop.png" class="card-img-top" alt="...">
-                                                    
-                                                    <div class="card-body">
-                                                       
-                                                            <h5 class="card-title satoshi_font mb-0">
-                                                                ORA 32GB DDR4 3200MHz Desktop RAM
-                                                            </h5>
-                                                    </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">32GB DDR4</span>
-                                                        </li>
-                                                        <li class=" 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 satoshi_font">₹</span><span
-                                                                class="cost product-price satoshi_font">999</span>
-                                                        </button>
-                                                    </div>
-                                                    <div class="card-body text-center">
-                                                        <a href="#"
-                                                            class="btn bg-white font-1-2 px-5 w-100 satoshi_font"
-                                                            data_name="ORA 32GB DDR4 3200MHz Desktop RAM "
-                                                            data_version="DDR4"
-                                                            data_device="Desktop"
-                                                            data_gb="32GB"
-                                                            data_price="9450">Details
-                                                        </a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="col-lg-4 col-md-6 col-md-6 ram_card">
-                                                <div class="card border bg-gray-3 rounded-3 p-1 h-100">
-                                                   
-                                                        <img src="./dist/assets/imgs/Navbar/ora_ddr5_laptop.png" class="card-img-top" alt="...">
-                                                  
-                                                    <div class="card-body">
-                                                        <a href="#"
-                                                            class="text-decoration-none text-dark">
-                                                            <h5 class="card-title satoshi_font mb-0">
-                                                                ORA 8GB DDR4 3200MHz Laptop RAM
-                                                            </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">8GB DDR4</span>
-                                                        </li>
-                                                        <li class=" 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">999</span>
-                                                        </button>
-                                                    </div>
-                                                    <div class="card-body text-center">
-                                                        <a href="#"
-                                                            class="btn bg-white font-1-2 px-5 w-100 satoshi_font"
-                                                            data_name="ORA 8GB DDR4 3200MHz Laptop RAM "
-                                                            data_version="DDR4"
-                                                            data_device="Laptop"
-                                                            data_gb="8GB"
-                                                            data_price="2990">Details 
-                                                        </a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="col-lg-4 col-md-6 col-md-6 ram_card">
-                                                <div class="card border bg-gray-3 rounded-3 p-1 h-100">
-                                                        <img src="./dist/assets/imgs/Navbar/ora_ddr4_desktop.png" class="card-img-top" alt="...">
-                                                    <div class="card-body">
-                                                            <h5 class="card-title satoshi_font mb-0">
-                                                                ORA 16GB DDR4 3200MHz Laptop RAM
-                                                            </h5>
-                                                    </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">16GB DDR4</span>
-                                                        </li>
-                                                        <li class=" border-0 py-0">
-                                                            
-                                                            <span class="satoshi_font">3200 Mhz</span>
-                                                        </li>
-                                                        
-                                                    </ul>
-                                                    <div class="card-body text-center">
-                                                        <a href="#"
-                                                            class="btn bg-white font-1-2 px-5 w-100 satoshi_font"
-                                                            data_name="ORA 16GB DDR4 3200MHz Laptop RAM "
-                                                            data_version="DDR4"
-                                                            data_device="Laptop"
-                                                            data_gb="16GB"
-                                                            data_price="4750">Details
-                                                        </a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="col-lg-4 col-md-6 col-md-6 ram_card">
-                                                <div class="card border bg-gray-3 rounded-3 p-1 h-100">
-                                                        <img src="./dist/assets/imgs/Navbar/ora_ddr5_desktop.png" class="card-img-top" alt="...">
-                                                    <div class="card-body">
-                                                            <h5 class="card-title satoshi_font mb-0">
-                                                                ORA 32GB DDR4 3200MHz Laptop RAM
-                                                            </h5>
-                                                    </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">32GB DDR4</span>
-                                                        </li>
-                                                        <li class=" border-0 py-0">
-                                                            
-                                                            <span class="satoshi_font">3200 Mhz</span>
-                                                        </li>
-                                                    </ul>
-                                                    <div class="card-body text-center">
-                                                        <a href="#"
-                                                            class="btn bg-white font-1-2 px-5 w-100 satoshi_font"
-                                                            data_name="ORA 32GB DDR4 3200MHz Laptop RAM "
-                                                            data_version="DDR4"
-                                                            data_device="Laptop"
-                                                            data_gb="32GB"
-                                                            data_price="8450">Details
-                                                        </a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                             <div class="col-lg-4 col-md-6 col-md-6 ram_card">
-                                                <div class="card border bg-gray-3 rounded-3 p-1 h-100">
-                                                        <img src="./dist/assets/imgs/Navbar/ora_ddr4_laptop.png" class="card-img-top" alt="...">
-                                                    <div class="card-body">
-                                                            <h5 class="card-title satoshi_font mb-0">
-                                                                ORA 8GB DDR5 4800MHz Desktop RAM
-                                                            </h5> 
-                                                    </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">8GB DDR5</span>
-                                                        </li>
-                                                        <li class=" border-0 py-0">
-                                                          
-                                                            <span class="satoshi_font">4800 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 satoshi_font">₹</span><span
-                                                                class="cost product-price satoshi_font">999</span>
-                                                        </button>
-                                                    </div>
-                                                    <div class="card-body text-center">
-                                                        <a href="#"
-                                                            class="btn bg-white font-1-2 px-5 w-100 satoshi_font"
-                                                            data_name="ORA 8GB DDR5 4800MHz Desktop RAM "
-                                                            data_version="DDR5"
-                                                            data_device="Desktop"
-                                                            data_gb="8GB"
-                                                            data_price="5800">Details 
-                                                        </a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="col-lg-4 col-md-6 col-md-6 ram_card">
-                                                <div class="card border bg-gray-3 rounded-3 p-1 -100">
-                                                   
-                                                        <img src="./dist/assets/imgs/Navbar/ora_ddr5_laptop.png" class="card-img-top" alt="...">
-                                                   
-                                                    <div class="card-body">
-                                                       
-                                                            <h5 class="card-title satoshi_font mb-0">
-                                                                ORA 16GB DDR5 4800MHz Desktop RAM
-                                                            </h5>
-                                                    </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">16GB DDR5</span>
-                                                        </li>
-                                                        <li class=" border-0 py-0">
-                                                            <span class="satoshi_font">4800 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">999</span>
-                                                        </button>
-                                                    </div>
-                                                    <div class="card-body text-center">
-                                                        <a href="#"
-                                                            class="btn bg-white font-1-2 px-5 w-100 satoshi_font"
-                                                            data_name="ORA 16GB DDR5 4800MHz Desktop RAM "
-                                                            data_version="DDR5"
-                                                            data_device="Desktop"
-                                                            data_gb="16GB"
-                                                            data_price="7600">Details 
-                                                        </a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="col-lg-4 col-md-6 col-md-6 ram_card">
-                                                <div class="card border bg-gray-3 rounded-3 p-1 h-100">
-                                                
-                                                        <img src="./dist/assets/imgs/Navbar/ora_ddr4_desktop.png" class="card-img-top" alt="...">
-                                                    
-                                                    <div class="card-body">
-                                                       
-                                                            <h5 class="card-title satoshi_font mb-0">
-                                                                ORA 32GB DDR5 4800MHz Desktop RAM
-                                                            </h5>
-                                                    </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">32GB DDR5</span>
-                                                        </li>
-                                                        <li class=" border-0 py-0">
-                                                            <span class="satoshi_font">3200 Mhz</span>
-                                                        </li>
-                                                        
-                                                    </ul>
-                                                    <div class="card-body text-center">
-                                                        <a href="#"
-                                                            class="btn bg-white font-1-2 px-5 w-100 satoshi_font"
-                                                            data_name="ORA 32GB DDR5 4800MHz Desktop RAM "
-                                                            data_version="DDR5"
-                                                            data_device="Desktop"
-                                                            data_gb="32GB"
-                                                            data_price="15500">Details
-                                                        </a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="col-lg-4 col-md-6 col-md-6 ram_card">
-                                                <div class="card border bg-gray-3 rounded-3 p-1 h-100">
-                                                   
-                                                        <img src="./dist/assets/imgs/Navbar/ora_ddr5_desktop.png" class="card-img-top" alt="...">
-                                                    
-                                                    <div class="card-body">
-                                                       
-                                                            <h5 class="card-title satoshi_font mb-0">
-                                                                ORA 8GB DDR5 4800MHz Laptop RAM
-                                                            </h5>
-                                                    </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">8GB DDR5</span>
-                                                        </li>
-                                                        <li class=" border-0 py-0">
-                                                            <span class="satoshi_font">4800 Mhz</span>
-                                                        </li>
-                                                    </ul>
-                                                    <div class="card-body text-center">
-                                                        <a href="#"
-                                                            class="btn bg-white font-1-2 px-5 w-100 satoshi_font"
-                                                            data_name="ORA 8GB DDR5 4800MHz Laptop RAM "
-                                                            data_version="DDR5"
-                                                            data_device="Laptop"
-                                                            data_gb="8GB"
-                                                            data_price="5150">Details
-                                                        </a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                             <div class="col-lg-4 col-md-6 col-md-6 ram_card">
-                                                <div class="card border bg-gray-3 rounded-3 p-1 h-100">
-                                                   
-                                                        <img src="./dist/assets/imgs/Navbar/ora_ddr4_laptop.png" class="card-img-top" alt="...">
-                                                   
-                                                    <div class="card-body">
-                                                       
-                                                            <h5 class="card-title satoshi_font mb-0">
-                                                                ORA 16GB DDR5 4800MHz Laptop RAM
-                                                            </h5>
-                                                    </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">16GB DDR5</span>
-                                                        </li>
-                                                        <li class=" border-0 py-0">
-                                                            <span class="satoshi_font">4800 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 satoshi_font">₹</span><span
-                                                                class="cost product-price satoshi_font">999</span>
-                                                        </button>
-                                                    </div>
-                                                    <div class="card-body text-center">
-                                                        <a href="#"
-                                                            class="btn bg-white font-1-2 px-5 w-100 satoshi_font"
-                                                            data_name="ORA 16GB DDR5 4800MHz Laptop RAM "
-                                                            data_version="DDR5"
-                                                            data_device="Laptop"
-                                                            data_gb="16GB"
-                                                            data_price="7800">Details
-                                                        </a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="col-lg-4 col-md-6 col-md-6 ram_card">
-                                                <div class="card border bg-gray-3 rounded-3 p-1 h-100">
-                                                 
-                                                        <img src="./dist/assets/imgs/Navbar/ora_ddr5_laptop.png" class="card-img-top" alt="...">
-                                                    
-                                                    <div class="card-body">
-                                                       
-                                                            <h5 class="card-title satoshi_font mb-0">
-                                                                ORA 32GB DDR5 4800MHz Laptop RAM
-                                                            </h5>
-                                                    </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">32GB DDR5</span>
-                                                        </li>
-                                                        <li class=" border-0 py-0">
-                                                            <span class="satoshi_font">4800Mhz</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">999</span>
-                                                        </button>
-                                                    </div>
-                                                    <div class="card-body text-center">
-                                                        <a href="#"
-                                                            class="btn bg-white font-1-2 px-5 w-100 satoshi_font"
-                                                            data_name="ORA 32GB DDR5 4800MHz Laptop RAM "
-                                                            data_version="DDR5"
-                                                            data_device="Laptop"
-                                                            data_gb="32GB"
-                                                            data_price="13900">Details 
-                                                        </a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
+       <section class="pt-2 ramsContainer " id="ora_products">
+    <div class="products-container container pb-5" id="pills-tabContent">
+        <div class="text-center pb-md-5 pt-5">
+            <h1 class="satoshi_font pb-md-4 pb-3">Discover the revolution of ORA</h1>
+            <p class="fs-6 satoshi_font fw-500 pb-md-4">
+                ORA Memory Series, harnessing cutting-edge<br>
+                Graphene technology for blazing-fast heat absorption in NVMe SSDs.<br>
+                Boasting an ultra-slim 1mm Heatsink, we defy temperature limits and redefine storage performance.
+            </p>
+        </div>
+        <div class="text-center py-md-5 py-4">
+            <span class="bg-black fs-5 px-md-4 py-md-2 py-2 px-4 rounded-3 text-white">Join the future with Anwi Systems</span>
+        </div>
+        <div class="row product_card_section">
+            <!--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="">
+                        <img src="./dist/assets/imgs/Navbar/ora_ddr4_desktop.png" class="w-100 h-100"></a>
+                        </div>
+                    </div>
+                    <div class="card-item-body">
+                      <h3 cclass="mb-2"> <a href="#" class="" > ORA 8GB DDR4 3200MHz Desktop RAM </a></h3>
+                      <hr>
+                        <h6>8GB DDR4</h6> <h6>3200 Mhz</h6>
+                        <div class="py-2 card_product_footer">
+                            <a href="#" class="w-100 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 </a>
                         </div>
                     </div>
                 </div>
             </div>
-        </section>
+            <!--desktop--->
+        </div>
+    </div>
+</section>
     </main>
     <div id="enquire"></div>
     <!-- footer -->
     <!-- 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/navbar.js"></script>
    <script src="./libs/axios.min.js"></script>
-    <script src="./dist/js/footer.js"></script>
-      <script src="./libs/cookies.min.js"></script>
-    <script src="./dist/js/form.js"></script>
 
+    <script src="./libs/cookies.min.js"></script>
     <script src="./dist/js/fontawesome.all.js"></script>
     <script src="./dist/js/fontawesome.min.js"></script>
-    <script src="./dist/js/vendor/modernizr-3.11.7.min.js"></script>
     <script src="./dist/js/vendor/jquery-v3.6.0.min.js"></script>
-    <script src="./dist/js/vendor/jquery-migrate-v3.3.2.min.js"></script>
     <script src="./dist/js/vendor/bootstrap.min.js"></script>
-    <script src="./dist/js/plugins/slick.js"></script>
-    <script src="./dist/js/plugins/wow.js"></script>
-    <script src="./dist/js/plugins/svg-injector.min.js"></script>
-    <script src="./dist/js/plugins/jquery.nice-select.min.js"></script>
-    <!-- <script src="./dist/js/plugins/mouse-parallax.js"></script>
-    <script src="./dist/js/plugins/images-loaded.js"></script>
-    <script src="./dist/js/plugins/isotope.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/main.js"></script>
-<script src="./dist/js/productdetails.js"></script>
+<script src="./dist/js/utils/helpers.js"></script>
+    <script src="./dist/js/navbar.js"></script>
+        <script src="./dist/js/footer.js"></script>
+
+    <script src="./dist/js/main.js"></script>
 
-    <script>
-       $("#pills-tabContent").find(".ram_card").each(function(){
-        $(this).addClass("cursor-pointer");
-        $(this).click(function(){
-        let product_name = $(this).find(".card-body").find("a.btn").attr("data_name");
-        let version = $(this).find(".card-body").find("a.btn").attr("data_version");
-        let device = $(this).find(".card-body").find("a.btn").attr("data_device");
-        let gb = $(this).find(".card-body").find("a.btn").attr("data_gb");
-        let price = $(this).find(".card-body").find("a.btn").attr("data_price");
-            let product_obj = {
-                name:product_name,
-                version:version,
-                device:device,
-                gb:gb,
-                price:price
-            }
-        localStorage.setItem("product_data",JSON.stringify(product_obj));
-        window.location.href="/productdetails.html";
-    })
-});
-    </script>
+
+   <script src="./dist/js/auth/apiservice.js"></script>
+  <script src="./dist/js/products/products.js"></script>
+
+    
 </body>
 
 </html>

selectdelivery.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+
+    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="./dist/css/main.css" />
+    <link rel="stylesheet" href="./style.css">
+    <link rel="stylesheet" href="./libs/owlcarousel/Css/owl.carousel.min.css">
+    <link rel="stylesheet" href="./libs/owlcarousel/Css/owl.theme.default.min.css">
+    <link rel="stylesheet" href="./libs/select2/select2.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="./dist/css/vendor/bootstrap.min.css">
+    <link rel="stylesheet" href="./dist/css/vendor/vandella.css">
+    <link rel="stylesheet" href="./dist/css/vendor/jellybelly.css">
+    <link rel="stylesheet" href="./dist/css/vendor/fontello.css">
+    <link rel="stylesheet" href="./dist/css/plugins/easyzoom.css">
+    <link rel="stylesheet" href="./dist/css/plugins/slick.css">
+    <link rel="stylesheet" href="./dist/css/plugins/nice-select.css">
+    <link rel="stylesheet" href="./dist/css/plugins/animate.css">
+    <link rel="stylesheet" href="./dist/css/plugins/magnific-popup.css">
+    <link rel="stylesheet" href="./dist/css/plugins/jquery-ui.css">
+    <link rel="stylesheet" href="./dist/css/style.css">
+    <link rel="stylesheet" href="./dist/css/fontawesome.all.min.css">
+    <link rel="stylesheet" href="./dist/css/fontawesome.min.css">
+
+
+    <link rel="stylesheet" href="./dist/css/pages/selectdelivery.css">
+    <title>Anwi</title>
+</head>
+
+<body class="order_details_page">
+    <!-- navbar -->
+    <div id="navbar-head"></div>
+    <!-- end-navbar -->
+    <!-- main-body -->
+    <div class="pt-5 mianselectdelivery">
+        <div class="pt-5 container">
+            <div class="row">
+                <div class="col-sm-8">
+                    <div>
+                        <auth-loader payment="rtyui"></auth-loader>
+                        <div class="card">
+                            <div class=" p-3 gap-3 d-flex align-items-center ">
+                                <div class="info-numberbox">1</div>
+                                <div class="d-flex flex-column align-content-center w-100">
+
+                                    <div>Login</div>
+                                    <div class="d-flex justify-content-between align-items-center">
+                                        <div class="displayadresslogin">
+                                          
+                                            <span class="font-weight-600 d-flex gap-1">
+                                                <div class="userNamelogin">
+                                                    XXXXXX
+                                                </div>
+                                                <div class="useremail d-none">
+                                                    XX@XX.com
+                                                </div>
+                                            </span>
+                                        </div>
+                                        
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="card  mt-3">
+                            <div class=" p-3 gap-3 selectAddress f-flex d-flex align-items-center detailsAddressBg">
+
+                                <div class="info-numberbox">2</div>
+                                <div class="d-flex flex-column align-content-center w-100">
+
+                                    <div>Delivery Address</div>
+                                    <div class="d-flex justify-content-between align-items-center">
+                                        <div class="displayadress d-none">
+                                            <span class="innerDisplayAddress"> 1234567890, admin,Telengana - </span>
+                                            <span class="font-weight-600 zipcodeAddress"></span>
+                                        </div>
+                                        
+                                    </div>
+                                </div>
+                                <div>
+                                   
+                                    <button class="detailsAddressBtn changeAddressBtn d-none">Change</button>
+                                </div>
+
+                                <!-- <div>Add A NEW ADDRESS</div> -->
+                            </div>
+                            <div class="p-3 addresslist d-none">
+
+                                <label class="form-check-label addresslabel w-100" for="address1">
+                                    <input checked type="radio" id="address1">
+                                    <div>
+                                        <div class="row">
+                                            <div class="col-sm-6">
+                                                <div class="form-floating">
+                                                    <input type="number" class="form-control" id="phonenumber"
+                                                        placeholder="Phone Number">
+                                                    <label for="phonenumber">Phonenumber</label>
+                                                    <div class="invalid-feedback ">
+                                                        Please choose a valid Phone Number.
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="col-sm-6">
+                                                <div class="form-floating">
+                                                    <input type="text" class="form-control" id="addressdes"
+                                                        placeholder="Phone Number">
+                                                    <label for="addressdes">Address </label>
+                                                    <div class="invalid-feedback ">
+                                                        Please choose a valid Phone Address.
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="row">
+                                            <div class="col-sm-6">
+                                                <div class="form-floating">
+                                                    <input type="number" class="form-control" id="zipcode"
+                                                        placeholder="Phone Number">
+                                                    <label for="zipcode">zipcode</label>
+                                                    <div class="invalid-feedback ">
+                                                        Please choose a valid Phone zipcode.
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="col-sm-6">
+                                                <div class="form-floating h-100">
+                                                    <select name="state" id="state"
+                                                        class="form-control h-100 p-0 m-0"></select>
+
+                                                    <div class="invalid-feedback ">
+                                                        Please choose a valid state.
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="">
+                                            <div class="text-danger errMsgFormEdit d-none"></div>
+                                            <button
+                                                class="text-uppercase saveanddeliver detailsAddressBtn">
+                                                <div class="spinner-border d-none " role="status">
+                                                   
+                                                  </div>
+                                                  <span>Save</span>
+                                            </button>
+                                            <button
+                                            class="text-uppercase saveanddeliverCanel d-none detailsAddressBtn">
+                                            <div class="spinner-border d-none " role="status">
+                                               
+                                              </div>
+                                              <span>Cancel</span>
+                                        </button>
+                                        </div>
+                                    </div>
+                                </label>
+                            </div>
+
+
+                            <div class="card addnewAddressContainer py-2 px-3">
+                                <div class="d-flex gap-1 text-primary">
+                                    <span class="addAddressBtn"> <span>+</span> <span>Add a new address</span></span>
+                                </div>
+                            </div>
+
+                        </div>
+                        <div class="card  mt-3">
+                            <div class="ordersummaryheader d-flex gap-3 align-content-center  p-3">
+                                <div class="info-numberbox">3</div>
+                                <div>Payment Method</div>
+
+                                <!-- <div>Add A NEW ADDRESS</div> -->
+                            </div>
+                        </div>
+                        <div class="card">
+                            <div class="orderslist d-flex flex-column">
+                                <label for="online">
+                                    Onlinedfghj 
+                                    
+                                </label>
+                                <input checked data-op="online" name="payment" type="radio" class="paymentbtn   " id="online">
+                                <label for="cod">
+                                    Cash on develiop
+                                    
+                                </label>
+                                <input data-op="cod" name="payment" type="radio" class="paymentbtn  " id="cod">
+                            </div>
+                        </div>
+                        <div class="pb-3 d-none d-flex justify-content-end">
+                            <button class="text-uppercase  detailsAddressBtn text-white ordernowbtn">Order Now</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-4">
+                    <div class=" overflow-hidden  w-100 h-100">
+                        <div class="card p-3 gap-3">
+                            <div>Your Order</div>
+                            <div class="orderlistcart">
+                                <div class="align-items-center d-flex justify-content-between">
+                                    <div style="max-width: 100px;" class="">
+                                        <img class="w-100" src="./dist/assets/imgs/Navbar/Accessiories-1.png" alt="">
+                                    </div>
+                                   <div>
+                                    <div>
+                                        <div>Jeans  with sequins</div>
+                                    </div>
+                                    <div>
+                                        <span>7000</span> <span>x <span class="qtyitem">02</span></span>
+                                    </div>
+                                   </div>
+                                </div>
+                                <div class="align-items-center border-top d-flex justify-content-between border-top">
+                                    <div style="max-width: 100px;" class="">
+                                        <img class="w-100" src="./dist/assets/imgs/Navbar/Accessiories-1.png" alt="">
+                                    </div>
+                                   <div>
+                                    <div>
+                                        <div>Jeans  with sequins</div>
+                                    </div>
+                                    <div>
+                                        <span>7000</span> <span>x <span class="qtyitem">02</span></span>
+                                    </div>
+                                   </div>
+                                </div>
+                            </div>
+                            <div class="border-top d-flex flex-column gap-1">
+                                <div class="d-flex justify-content-between">
+                                    <div>
+                                        price (<span class="noofitems">3</span> items)
+                                    </div>
+                                    <div>
+                                        <span class="currecy">₹</span> <span class="totalPrice">0</span>
+                                    </div>
+                                </div>
+                                <div class="d-flex justify-content-between">
+                                    <div>
+                                        Delivery Charges
+                                    </div>
+                                    <div>
+                                        Free
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="border-top ">
+                                <div class="d-flex justify-content-between">
+                                    <span>Total Payable</span>
+                                    <span> <span class="currecy">₹</span> <span
+                                            class="totalSummaryPrice">0</span></span>
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- footer -->
+    <div id="footer-head" class=""></div>
+    <div class="paymentgatewaypage d-none">
+        <div>
+            Your been redirected to payment gatway page
+        </div>
+        <div class="spinner-border" role="status">
+            <span class="sr-only">Loading...</span>
+        </div>
+    </div>
+    <!-- end-footer -->
+    <script src="./libs/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <script src="./dist/js/jquery.min.js"></script>
+    <!-- <script src="./libs/select2/select2.js"></script> -->
+
+  
+    <script src="./dist/js/navbar.js"></script>
+    <script src="./libs/axios.min.js"></script>
+    <script src="./dist/js/footer.js"></script>
+    <script src="./libs/cookies.min.js"></script>
+    <script src="./dist/js/fontawesome.all.js"></script>
+    <script src="./dist/js/fontawesome.min.js"></script>
+    <script src="./dist/js/vendor/modernizr-3.11.7.min.js"></script>
+    <script src="./dist/js/vendor/jquery-v3.6.0.min.js"></script>
+    <script src="./dist/js/vendor/jquery-migrate-v3.3.2.min.js"></script>
+    <script src="./dist/js/vendor/bootstrap.min.js"></script>
+    <script src="./dist/js/plugins/slick.js"></script>
+    <script src="./dist/js/plugins/wow.js"></script>
+    <script src="./dist/js/plugins/svg-injector.min.js"></script>
+    <script src="./dist/js/plugins/jquery.nice-select.min.js"></script>
+    <script src="./dist/js/plugins/mouse-parallax.js"></script>
+    <script src="./dist/js/plugins/images-loaded.js"></script>
+    <script src="./dist/js/plugins/isotope.js"></script>
+    <script src="./dist/js/plugins/jquery-ui.js"></script>
+    <script src="./dist/js/plugins/magnific-popup.js"></script>
+
+    <script src="./libs/select2/select2.js"></script>
+
+    <script src="./dist/js/utils/helpers.js"></script>
+    <script src="./dist/js/shoppingcart/addtocart.js"></script>
+    <script src="./dist/js/auth/apiservice.js"></script>
+
+    <script src="./dist/js/components/authloader/authloader.js"></script>
+
+    <script src="./dist/js/localstorage/checkout.js"></script>
+    <!-- <script src="./dist/js/shoppingcart/selectdelivery.js"></script> -->
+    <script src="./dist/js/shoppingcart/select_delivery.js"></script>
+
+</body>
+
+</html>

shopping-cart.html

     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <link rel="shortcut icon" type="image/x-icon" href="./dist/assets/imgs/favicon.gif">
+
     <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
     <link rel="stylesheet" href="./dist/css/main.css" />
     <link rel="stylesheet" href="./styles/style.css">
     <link rel="stylesheet" href="./dist/css/style.css">
     <link rel="stylesheet" href="./dist/css/fontawesome.all.min.css">
     <link rel="stylesheet" href="./dist/css/fontawesome.min.css">
-    <title>Cart | Anwi</title>
+    <title>Anwi</title>
 </head>
 
 <body>
       <!-- end-navbar -->
   <hr class="mx-5">
     <!-- main-body -->
- 
-
-
-
-<main class="shopping-cart-main-container main-body d-none">
-        <section class="bg-white">
+    <main class="shopping-cart-main-container main-body pt-5">
+        <section class="bg-white d-none">
             <div class="cart-sec-highlighter d-none d-sm-block">
                 <div class="container">
                     <div class="row align-items-center py-4 justify-content-around">
         </section>
         <div class="shopping-cart-details">
             <div class="container pt-4">
-                <div class="row align-items-center bg-white rounded d-none d-sm-flex shopping-cart-details-row-1 ">
+                <div class="row align-items-center bg-white rounded d-none d-md-flex shopping-cart-details-row-1 ">
                     <div class="col-md-2">
                         <h6 class="text-center">All</h6>
                     </div>
                         <h6>Total</h6>
                     </div>
                 </div>
-                <div class="row bg-white mt-3 rounded py-3 d-none d-sm-flex ">
+                <div class="appendItems">
+
+                    
+                </div>
+                <div class="emptyShow row d-none">
+                    <div class="bg-white innerEmptyShow p-5 d-flex justify-content-center gap-2">
+                        <span><i class="fa fa-cart-shopping"></i></span>
+                      <span>  Your Card is Empty</span>
+                   
+                    </div>
+                </div>
+                <div class="d-flex justify-content-end align-items-center pt-4">
+                    <div class="btn btn-dark button_dark checkoutbtn"><div class="spinner-border d-none" role="status">
+                      
+                      </div><span>Check out</span></div>
+                </div>
+                <!-- append -->
+                <!-- <div class="row bg-white mt-3 rounded py-3 d-none d-sm-flex ">
                     <div class="col-md-2"><img src="./dist/assets/imgs/Home/Shopping-cart-item-img.png" alt="shopping-cart-item-img" class="img-fluid"></div>
                     <div class="col-md-4">
                         <p class="mb-0">Mi NoteBook Pro Lustrous Gray i5 11th Gen + Iris Xe Graphics 16GB RAM + 512GB NVMe SSD.</p>
                             </div>
                         </div>
                     </div>
-                </div>
-                <div class="bg-white rounded  d-block d-sm-none ">
+                </div> -->
+                    <!-- append -->
+                <div class="bg-white rounded  d-none ">
+                <!-- <div class="bg-white rounded  d-block d-sm-none "> -->
                     <div class="card mb-3 mt-5" style="max-width: 540px;">
                         <div class="mx-auto mobile-cart-img">
                             <img src="./dist/assets/imgs/Home/Shopping-cart-item-img.png" alt="shopping-cart-item-img" class="img-fluid">
                     </div>
                 </div>
             </div>
-            <div class="alert-display-sec position-fixed w-100 bottom-0 ">
+            <div class="alert-display-sec position-fixed d-none w-100 bottom-0 ">
                 <div class="alert alert-white border
                                 border-end-0 border-start-0 mb-0 rounded-0
                                 alert-dismissible fade show" role="alert">
                 </div>
             </div>
             <!-- buy-together-sec -->
-            <div class="buy-together-sec">
+            <div class="d-none buy-together-sec">
                 <div class="container">
                     <div class="row bg-white px-4">
                         <h5 class="py-3 border-bottom">Buy Together
                                                         <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> 1999
-                                                        </small>
-                                                        </del>
+                                                        
                                                     </p>
                                                 </div>
                                             </div>
             <!-- buy-together-sec -->
             <!-- delivery to -->
             <div class=" delivery-to-sec sec-space-3 d-block d-sm-none ">
-                <div class=" container ">
+            <!-- <div class=" delivery-to-sec sec-space-3 d-block d-sm-none "> -->
+                <div class=" container d-none">
                     <div class=" col-md-5 ">
                         <div class=" d-flex align-items-center justify-content-around p-1">
                             <div class=" px-0 ">
                 </div>
             </div>
             <div class=" delivery-to-sec sec-space-3 d-none d-sm-block">
-                <div class=" container ">
+                <div class=" container d-none">
                     <div class="col-md-7 col-lg-5">
                         <div class=" d-flex align-items-center justify-content-around ">
                             <div class=" px-0 ">
             <!-- delivery to -->
         </div>
     </main>
-
-<section class="pt-4">
-            <div class="container py-md-5 py-3 pt-4">
-                <div class="row shadow px-3 rounded-4">
-                    <div class="bg-white">
-                        <div>
-                            <p class="mb-0 py-2">○○○</p>
-                        </div>
-                        <div class="content_section">
-                            <div>
-                                <h4 class="satoshi_font pb-3 text-center" >Cart</h4>
-                            </div>
-                           <div class="px-4 pb-3">
-                                <div>
-                                    <p class="satoshi_font text-center">Your shopping cart is empty
-
-.</p>
-                                    <p class="satoshi_font text-center"><a href="#" class="btn btn-dark px-4 button_dark">Go Shopping</a></p>
-                                    <div>
-                                                         </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-
-
-
     <!-- footer -->
     <div id="footer-head"></div>
     <!-- end-footer -->
     <script src="./dist/js/jquery.min.js"></script>
     <script src="./libs/owlcarousel/js/owl.carousel.min.js"></script>
     <script src="./dist/js/navbar.js"></script>
-   <script src="./libs/axios.min.js"></script>
+    <script src="./libs/axios.min.js"></script>
     <script src="./dist/js/footer.js"></script>
-      <script src="./libs/cookies.min.js"></script>
+    <script src="./libs/cookies.min.js"></script>
 
     <script src="./dist/js/fontawesome.all.js"></script>
     <script src="./dist/js/fontawesome.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/auth/apiservice.js"></script>
+    <script src="./dist/js/shoppingcart/addtocart.js"></script>  
+    <script src="./dist/js/shoppingcart/shoppingcart.js"></script>  
     <script>
         $(window).scroll(function() {
             if (isScrolledIntoView('#footer-head'))

storageproducts.html

             color:#ffff !important;
         }
         .card-title{
-            font-size: 1.4rem;
+            font-size: 1.2rem;
         }
     </style>
 </head>
     <div id="navbar-head" class="shadow"></div>
     <!-- end-navbar -->
     <!-- main-body -->
-    <main class="main-body home-main-container">
+    <main class="main-body home-main-container pt-md-0 pt-5">
         <section class="services h-100 pt-3  bg-gradient-anwi">
             <div class="container pt-5 ">
                 <div class="text-center text-white ">
         <section class="pt-2" id="ora_products">
             <div class="products-container">
                 <div class="product-cards">
-                    <div class="tab-content container" id="pills-tabContent1">
-                        <!------------------------------ RAM-------------------------->
-                        <div class="tab-pane fade show active" id="pills-network-cards" role="tabpanel" aria-labelledby="pills-network-cards-tab">
+                    
                             <div class="py-md-5">
-                                <div class="text-center">
+                                <div class="text-center pb-md-5">
                                     <h1 class="satoshi_font pb-md-4 pb-3">Discover the revolution of ORA</h1>
                                     <p class="fs-6 satoshi_font fw-500 pb-md-4">
                                         ORA Memory Series, harnessing cutting-edge</br>
                                         Boasting an ultra-slim 1mm Heatsink, we defy temperature limits and redefine storage performance.
                                     </p>
                                 </div>
-                                <div class="tab-content rounded-4" id="pills-tabContent">
+                                <div class="container">
+                                 <div class="row">
+                                      <div class="products-container" id="">
                                     <div class="text-center py-md-5 py-4">
                                         <span class="bg-black fs-5 px-md-4 py-md-2 py-2 px-4 rounded-3 text-white">Join the future with Anwi Systems</span>
                                     </div>
                                     <!-- first tab-pane -->
-                                    <div class="tab-pane fade show active" id="pills-network-cards-card" role="tabpanel" aria-labelledby="pills-network-cards-card-tab">
-                                        <div class="row g-4 pb-5 px-md-4 storage_card">
-                                            <div class="col-lg-4 col-md-6 col-md-6">
-                                                <div class="card border bg-gray-3 rounded-3 p-1 h-100">
-                                                    <a href="#">
-                                                        <img src="./dist/assets/imgs/Navbar/ora3_ram.png" class="card-img-top" alt="...">
-                                                    </a>
-                                                    <div class="card-body pt-0">
-                                                        <a href="#" class="text-decoration-none text-dark">
-                                                            <h5 class="card-title text-center fw-600 satoshi_font mb-0">
-                                                                ORA3 512GB Solid State Drive with NMVe PCIe Gen 3
-                                                            </h5>
-                                                        </a>
-                                                    </div>
-                                                    <ul class="bg-gray-3 border-0 mb-0 list-group-flush px-3 d-flex justify-content-between">
-                                                        <li class="list-group-item border-0 py-0">
-                                                            <p class="mb-0 fs-9">Modal</p>
-                                                            <p class="satoshi_font fs-9 mb-0">AWPC33K512GS</p>
-                                                        </li>
-                                                        <li class="list-group-item border-0 py-0">
-                                                            <p class="mb-0 fs-9">Memory Speed</p>
-                                                            <p class="satoshi_font fs-9 mb-0">3500 MHz</p>
-                                                        </li>
-                                                    </ul>
-                                                    <div class="card-body text-center">
-                                                        <a href="#" class="btn bg-white font-1-2 px-5 w-100 satoshi_font"
-                                                        data_des="High-speed PCIe Gen 3x4
-                                                        interface with read speeds
-                                                        up to 3500 MB/s and write
-                                                        speeds up to 3000MB/s."
-                                                        data_name="ORA3 M.2 NVMe 512GB Internal Solid State Drive with NMVe PCIe Gen 3">Details
-                                                           
-                                                        </a>
-                                                    </div>
+                                   <div class="row product_card_section">
+                                    <!--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="">
+                                                <img src="./dist/assets/imgs/Navbar/ora_ddr4_desktop.png" class="w-100 h-100"></a>
                                                 </div>
                                             </div>
-                                            <div class="col-lg-4 col-md-6 col-md-6">
-                                                <div class="card border bg-gray-3 rounded-3 p-1 h-100">
-                                                    <a href="#">
-                                                        <img src="./dist/assets/imgs/Navbar/ora3_ram.png" class="card-img-top" alt="...">
-                                                    </a>
-                                                    <div class="card-body pt-0">
-                                                        <a href="#"
-                                                            class="text-decoration-none text-dark">
-                                                            <h5 class="card-title text-center fw-600 satoshi_font mb-0">
-                                                                ORA3 1TB Solid State Drive with NMVe PCIe Gen 3
-                                                            </h5>
-                                                        </a>
-                                                    </div>
-                                                    <ul class="bg-gray-3 border-0 mb-0 list-group-flush px-3 d-flex justify-content-between">
-                                                        <li class="list-group-item border-0 py-0">
-                                                            <p class="mb-0 fs-9">Modal</p>
-                                                            <p class="satoshi_font fs-9 mb-0">AWLD43232M</p>
-                                                        </li>
-                                                        <li class="list-group-item border-0 py-0">
-                                                            <p class="mb-0 fs-9">Memory Speed</p>
-                                                            <p class="satoshi_font fs-9 mb-0">3500 MHz</p>
-                                                        </li>
-                                                    </ul>
-                                                    <div class="card-body text-center">
-                                                        <a href="#"
-                                                            class="btn bg-white font-1-2 px-5 w-100 satoshi_font"
-                                                            data_des="High-speed PCIe Gen 3x4
-                                                        interface with read speeds
-                                                        up to 3500 MB/s and write
-                                                        speeds up to 3000MB/s."
-                                                        data_name="ORA3 M.2 NVMe 1TB Internal Solid State Drive with NMVe PCIe Gen 3">Details
-                                                        </a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="col-lg-4 col-md-6 col-md-6">
-                                                <div class="card border bg-gray-3 rounded-3 p-1 h-100">
-                                                    <a href="#">
-                                                        <img src="./dist/assets/imgs/Navbar/ora3_ram.png" class="card-img-top" alt="...">
-                                                    </a>
-                                                    <div class="card-body pt-0">
-                                                        <a href="#" class="text-decoration-none text-dark">
-                                                            <h5 class="card-title text-center fw-600 satoshi_font mb-0">
-                                                                ORA3 2TB Solid State Drive with NMVe PCIe Gen 3
-                                                            </h5>
-                                                        </a>
-                                                    </div>
-                                                    <ul class="bg-gray-3 border-0 mb-0 list-group-flush px-3 d-flex justify-content-between">
-                                                        <li class="list-group-item border-0 py-0">
-                                                            <p class="mb-0 fs-9">Modal</p>
-                                                            <p class="satoshi_font fs-9 mb-0">AWPC33K002TS</p>
-                                                        </li>
-                                                        <li class="list-group-item border-0 py-0">
-                                                            <p class="mb-0 fs-9">Memory Speed</p>
-                                                            <p class="satoshi_font fs-9 mb-0">3500 MHz</p>
-                                                        </li>
-                                                    </ul>
-                                                    <div class="card-body text-center">
-                                                        <a href="#" class="btn bg-white font-1-2 px-5 w-100 satoshi_font"
-                                                        data_des="High-speed PCIe Gen 3x4
-                                                        interface with read speeds
-                                                        up to 3500 MB/s and write
-                                                        speeds up to 3000MB/s."
-                                                        data_name="ORA3 M.2 NVMe 2TB Internal Solid State Drive with NMVe PCIe Gen 3">Details
-                                                            
-                                                        </a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="col-lg-4 col-md-6 col-md-6">
-                                                <div class="card border bg-gray-3 rounded-3 p-1 h-100">
-                                                    <a href="#">
-                                                        <img src="./dist/assets/imgs/Navbar/ora4_ram.png" class="card-img-top" alt="...">
-                                                    </a>
-                                                    <div class="card-body pt-0">
-                                                        <a href="#"
-                                                            class="text-decoration-none text-dark">
-                                                            <h5 class="card-title text-center fw-600 satoshi_font mb-0">
-                                                                ORA4 512GB Solid State Drive with NMVe PCIe Gen 4
-                                                            </h5>
-                                                        </a>
-                                                    </div>
-                                                    <ul class="bg-gray-3 border-0 mb-0 list-group-flush px-3 d-flex justify-content-between">
-                                                        <li class="list-group-item border-0 py-0">
-                                                            <p class="mb-0 fs-9">Modal</p>
-                                                            <p class="satoshi_font fs-9 mb-0">AWPC45K512GS</p>
-                                                        </li>
-                                                        <li class="list-group-item border-0 py-0">
-                                                            <p class="mb-0 fs-9">Memory Speed</p>
-                                                            <p class="satoshi_font fs-9 mb-0">4900 MHz</p>
-                                                        </li>
-                                                    </ul>
-                                                    <div class="card-body text-center">
-                                                        <a href="#"
-                                                            class="btn bg-white font-1-2 px-5 w-100 satoshi_font"
-                                                            data_des="High-speed PCIe Gen 4x4
-                                                            interface with read speeds
-                                                            up to 4900 MB/s and write
-                                                            speeds up to 4400MB/s."
-                                                            data_name="ORA4 M.2 NVMe 1TB Internal Solid State Drive with NMVe PCIe Gen 4">Details 
-                                                        </a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="col-lg-4 col-md-6 col-md-6">
-                                                <div class="card border bg-gray-3 rounded-3 p-1 h-100">
-                                                    <a href="#">
-                                                        <img src="./dist/assets/imgs/Navbar/ora4_ram.png" class="card-img-top" alt="...">
-                                                    </a>
-                                                    <div class="card-body pt-0">
-                                                        <a href="#"
-                                                            class="text-decoration-none text-dark">
-                                                            <h5 class="card-title text-center fw-600 satoshi_font mb-0">
-                                                                ORA4 1TB Solid State Drive with NMVe PCIe Gen 4
-                                                            </h5>
-                                                        </a>
-                                                    </div>
-                                                    <ul class="bg-gray-3 border-0 mb-0 list-group-flush px-3 d-flex justify-content-between">
-                                                        <li class="list-group-item border-0 py-0">
-                                                            <p class="mb-0 fs-9">Modal</p>
-                                                            <p class="satoshi_font fs-9 mb-0">AWPC45K001TS</p>
-                                                        </li>
-                                                        <li class="list-group-item border-0 py-0">
-                                                            <p class="mb-0 fs-9">Memory Speed</p>
-                                                            <p class="satoshi_font fs-9 mb-0">4900 MHz</p>
-                                                        </li>
-                                                    </ul>
-                                                    <div class="card-body text-center">
-                                                        <a href="#"
-                                                            class="btn bg-white font-1-2 px-5 w-100 satoshi_font"
-                                                            data_des="High-speed PCIe Gen 4x4
-                                                            interface with read speeds
-                                                            up to 4900 MB/s and write
-                                                            speeds up to 4400MB/s."
-                                                            data_name="ORA4 M.2 NVMe 1TB Internal Solid State Drive with NMVe PCIe Gen 4">Details 
-                                                        </a>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="col-lg-4 col-md-6 col-md-6">
-                                                <div class="card border bg-gray-3 rounded-3 p-1 h-100">
-                                                    <a href="#">
-                                                        <img src="./dist/assets/imgs/Navbar/ora4_ram.png" class="card-img-top" alt="...">
-                                                    </a>
-                                                    <div class="card-body pt-0">
-                                                        <a href="#"
-                                                            class="text-decoration-none text-dark">
-                                                            <h5 class="card-title text-center fw-600 satoshi_font mb-0">
-                                                                ORA4 2TB Solid State Drive with NMVe PCIe Gen 4
-                                                            </h5>
-                                                        </a>
-                                                    </div>
-                                                    <ul class="bg-gray-3 border-0 mb-0 list-group-flush px-3 d-flex justify-content-between">
-                                                        <li class="list-group-item border-0 py-0">
-                                                            <p class="mb-0 fs-9">Modal</p>
-                                                            <p class="satoshi_font fs-9 mb-0">AWPC45K002TS</p>
-                                                        </li>
-                                                        <li class="list-group-item border-0 py-0">
-                                                            <p class="mb-0 fs-9">Memory Speed</p>
-                                                            <p class="satoshi_font fs-9 mb-0">4900 MHz</p>
-                                                        </li>
-                                                    </ul>
-                                                    <div class="card-body text-center">
-                                                        <a href="#" class="btn bg-white font-1-2 px-5 w-100 satoshi_font"
-                                                        data_des="High-speed PCIe Gen 4x4
-                                                        interface with read speeds
-                                                        up to 4900 MB/s and write
-                                                        speeds up to 4400MB/s."
-                                                        data_name="ORA4 M.2 NVMe 2TB Internal Solid State Drive with NMVe PCIe Gen 4">
-                                                        Details
-                                                        </a>
-                                                    </div>
+                                            <div class="card-item-body">
+                                              <h3 cclass="mb-2"> <a href="#" class="" > ORA 8GB DDR4 3200MHz Desktop RAM </a></h3>
+                                              <hr>
+                                                <h6>8GB DDR4</h6> <h6>3200 Mhz</h6>
+                                                <div class="py-2 card_product_footer">
+                                                    <a href="#" class="w-100 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 </a>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
+                                 </div>
+                                </div>
                             </div>
-                        </div>
-                    </div>
+                        
                 </div>
             </div>
         </section>
     </main>
+      <!-- <img src="./dist/assets/imgs/Navbar/ora4_ram.png" class="card-img-top" alt="..."> -->
     <div id="enquire"></div>
     <!-- footer -->
     <div id="footer-head"></div>
     <!-- end-footer -->
-    <script src="./libs/bootstrap/js/bootstrap.bundle.min.js"></script>
+      <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/navbar.js"></script>
-    <!-- <script src="./dist/js/axios.min.js"></script> -->
-    <script src="./dist/js/footer.js"></script>
-      <script src="./libs/cookies.min.js"></script>
-    <script src="./dist/js/form.js"></script>
+   <script src="./libs/axios.min.js"></script>
 
+    <script src="./libs/cookies.min.js"></script>
     <script src="./dist/js/fontawesome.all.js"></script>
     <script src="./dist/js/fontawesome.min.js"></script>
-    <script src="./dist/js/vendor/modernizr-3.11.7.min.js"></script>
     <script src="./dist/js/vendor/jquery-v3.6.0.min.js"></script>
-    <script src="./dist/js/vendor/jquery-migrate-v3.3.2.min.js"></script>
     <script src="./dist/js/vendor/bootstrap.min.js"></script>
-    <script src="./dist/js/plugins/slick.js"></script>
-    <script src="./dist/js/plugins/wow.js"></script>
-    <script src="./dist/js/plugins/svg-injector.min.js"></script>
-    <script src="./dist/js/plugins/jquery.nice-select.min.js"></script>
-    <!-- <script src="./dist/js/plugins/mouse-parallax.js"></script> -->
-    <!-- <script src="./dist/js/plugins/images-loaded.js"></script> -->
-    <!-- <script src="./dist/js/plugins/isotope.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/main.js"></script>
-    <script>
-        $("#pills-tabContent").find(".storage_card").each(function(){
-            // $(this).click(function(){
-            //     let product_name = $(this).find(".card-body").find("a.btn").attr("data_name");
-            //     let product_desc = $(this).find(".card-body").find("a.btn").attr("data_des");
-            //     let product_img = $(this).find("img").attr("src");
-                
-            //     let product_obj = {
-            //         name:product_name,
-            //         description:product_desc,
-            //          image:product_img,
-            //     }
-            //     localStorage.setItem("product_data",JSON.stringify(product_obj));
-            //     window.location.href="/productdetails.html";
-            // })
-        })
-    </script>
+<script src="./dist/js/utils/helpers.js"></script>
+    <script src="./dist/js/navbar.js"></script>
+        <script src="./dist/js/footer.js"></script>
+
+    <script src="./dist/js/main.js"></script>
+
+
+   <script src="./dist/js/auth/apiservice.js"></script>
+      <script src="./dist/js/products/products.js"></script>
 </body>
 
 </html>