anwisystems/dist/js/navbar2.js

navINIT();

function navINIT() {
    if(!window.location.href.includes('orderconfirmation')&&!window.location.href.includes('/w/')){
        loadCart();
    }
   
    function loadHelper(src = './dist/js/utils/helpers.js'){
        if ($(`script[src="${src}"]`).length > 0) {
          return new Promise((resolve) => resolve());
        }
        return new Promise(function (resolve, reject) {
            var s;
            s = document.createElement('script');
            s.src = src;
            s.onload = resolve;
            s.onerror = reject;
            document.head.appendChild(s);
        });
    }
    async function loadCart(){

        if(!window.location.href.includes('services/paymentmethod.html')){
            let files = ['./dist/js/shoppingcart/addtocart.js'];
            await loadHelper();
            for(let i=0;i<files.length;i++){
                if ($(`script[src="${files[i]}"]`).length > 0) {
                    continue;
                }
                try {
            
                    await loadHelper(files[i])
    
                } catch (error) {
                    console.log(error);
                    return;
                }
            }
        }

         setLengthCart();
    }
    let URLNAMENAV = window.location.href;
    const isTransparent = URLNAMENAV.includes('login')||URLNAMENAV.includes('orderconfirmation')|| URLNAMENAV.includes('services/paymentmethod.html');
    let nav_html = `
<header class="header-area section-padding-1 transparent-bar" ${isTransparent ?'style="background:#0A1039"' :''}>
            <div class="header-large-device">
                <div class="header-bottom sticky-bar">
                    <div class="container">
                        <div class="header-bottom-flex">
                            <div class="logo-menu-wrap d-flex">
                                <div class="logo">
                                    <a href="../index.html">
                                        <img src="/dist/assets/imgs/anwi-logo-2.png" alt="logo" class="w-50">
                                    </a>
                                </div>
                                <div class="main-menu menu-lh-1 main-menu-padding-1">
                                    <nav>
                                        <ul class="mb-0 p-0">
                                        <li class="hover_tab_1"><a href="./storageproducts.html" class="satoshi_font">STORAGE</a>
                                        <ul class="py-3 px-3 rounded-bottom shadow">
                                            <li class="d-flex">
                                                <ul class="nav nav-pills flex-column w-200 border-end" id="experienceTab" role="tablist">
                                                    <li class="nav-item">
                                                        <a class="nav-link active text-dark" data-bs-toggle="tab" href="#ora3">ORA 3</a>
                                                    </li>
                                                    <li class="nav-item">
                                                        <a class="nav-link text-dark" data-bs-toggle="tab" href="#ora4">ORA 4</a>
                                                    </li>
                                                </ul>
                                                <ul class="nav w-500">
                                                    <li>
                                                    <div class="tab-content">
                                                        <div id="ora3" class="container tab-pane active">
                                                            <div class="row">
                                                                <div class="col-4">
                                                                    <div class="bg-gray-4 rounded-3 cursor-pointer">
                                                                        <img src="./dist/assets/imgs/Navbar/ora3_ram.png" alt="ora img" class=""/>
                                                                        <p class="fs-7 fw-600 mb-0 text-a-color text-center pb-1">Ora3 M.2 NVMe 512GB</p>
                                                                    </div>
                                                                </div>
                                                                <div class="col-4">
                                                                    <div class="bg-gray-4 rounded-3 cursor-pointer">
                                                                         <img src="./dist/assets/imgs/Navbar/ora3_ram.png" alt="ora img" class=""/>
                                                                         <p class="fs-7 fw-600 mb-0 text-a-color text-center pb-1">Ora3 M.2 NVMe 1TB</p>
                                                                    </div>
                                                                </div>
                                                                <div class="col-4">
                                                                    <div class="bg-gray-4 rounded-3 cursor-pointer">
                                                                        <img src="./dist/assets/imgs/Navbar/ora3_ram.png" alt="ora img" class=""/>
                                                                        <p class="fs-7 fw-600 mb-0 text-a-color text-center pb-1">Ora3 M.2 NVMe 2TB</p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div id="ora4" class="container tab-pane fade">
                                                            <div class="row">
                                                                <div class="col-4">
                                                                    <div class="bg-gray-4 rounded-3 cursor-pointer">
                                                                        <img src="./dist/assets/imgs/Navbar/ora3_ram.png" alt="ora img" class=""/>
                                                                        <p class="fs-7 fw-600 mb-0 text-a-color text-center  pb-1">Ora4 M.2 NVMe 512GB</p>
                                                                    </div>
                                                                </div>
                                                                <div class="col-4">
                                                                    <div class="bg-gray-4 rounded-3 cursor-pointer">
                                                                        <img src="./dist/assets/imgs/Navbar/ora3_ram.png" alt="ora img" class=""/>
                                                                        <p class="fs-7 fw-600 mb-0 text-a-color text-center  pb-1">Ora4 M.2 NVMe 1TB</p>
                                                                    </div>
                                                                </div>
                                                                <div class="col-4">
                                                                    <div class="bg-gray-4 rounded-3 cursor-pointer">
                                                                        <img src="./dist/assets/imgs/Navbar/ora3_ram.png" alt="ora img" class=""/>
                                                                        <p class="fs-7 fw-600 mb-0 text-a-color text-center  pb-1">Ora4 M.2 NVMe 2TB</p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                  </div>
                                                </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="hover_tab_2"><a href="./ramproducts.html" class="satoshi_font">MEMORY</a>
                                    <ul class="py-3 px-3 rounded-bottom shadow">
                                    <li class="d-flex">
                                        <ul class="nav nav-pills flex-column w-200 border-end" id="experienceTab" role="tablist">
                                            <li class="nav-item">
                                                <a class="nav-link active text-dark" data-bs-toggle="tab" href="#laptop">Laptop</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link text-dark" data-bs-toggle="tab" href="#desktop">Desktop</a>
                                            </li>
                                        </ul>
                                        <ul class="nav w-500">
                                            <li>
                                            <div class="tab-content">
                                                <div id="laptop" class="container tab-pane active">
                                                    <div class="row">
                                                        <div class="col-4">
                                                            <div class="bg-gray-4 rounded-3 cursor-pointer">
                                                                <img src="./dist/assets/imgs/Navbar/ora_ddr4_laptop.png" alt="ora img" class=""/>
                                                                <p class="fs-7 fw-600 mb-0 text-a-color text-center pb-1">Ora 8GB DDR5</p>
                                                            </div>
                                                        </div>
                                                        <div class="col-4">
                                                            <div class="bg-gray-4 rounded-3 cursor-pointer">
                                                                 <img src="./dist/assets/imgs/Navbar/ora_ddr5_laptop.png" alt="ora img" class=""/>
                                                                 <p class="fs-7 fw-600 mb-0 text-a-color text-center  pb-1">Ora 16GB DDR5</p>
                                                            </div>
                                                        </div>
                                                        <div class="col-4 ">
                                                            <div class="bg-gray-4 rounded-3 cursor-pointer">
                                                                 <img src="./dist/assets/imgs/Navbar/ora_ddr5_laptop.png" alt="ora img" class=""/>
                                                                 <p class="fs-7 fw-600 mb-0 text-a-color text-center  pb-1">Ora 32GB DDR5</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div id="desktop" class="container tab-pane fade">
                                                    <div class="row">
                                                        <div class="col-4">
                                                            <div class="bg-gray-4 rounded-3 cursor-pointer">
                                                                <img src="./dist/assets/imgs/Navbar/ora_ddr4_desktop.png" alt="ora img" class=""/>
                                                                <p class="fs-7 fw-600 mb-0 text-a-color text-center  pb-1">Ora 8GB DDR4</p>
                                                            </div>
                                                        </div>
                                                        <div class="col-4">
                                                            <div class="bg-gray-4 rounded-3 cursor-pointer">
                                                                <img src="./dist/assets/imgs/Navbar/ora_ddr4_desktop.png" alt="ora img" class=""/>
                                                                <p class="fs-7 fw-600 mb-0 text-a-color text-center  pb-1">Ora 16GB DDR4</p>
                                                            </div>
                                                        </div>
                                                        <div class="col-4">
                                                            <div class="bg-gray-4 rounded-3 cursor-pointer">
                                                                 <img src="./dist/assets/imgs/Navbar/ora_ddr4_desktop.png" alt="ora img" class=""/>
                                                                 <p class="fs-7 fw-600 mb-0 text-a-color text-center  pb-1">Ora 32GB DDR4</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                          </div>
                                        </li>
                                        </ul>
                                    </li>
                                </ul>
                                    </li>
                                            <li><a href="./support.html" class="satoshi_font">SUPPORT</a></li>
                                            <li><a href="./press.html" class="satoshi_font">PRESS</a></li>
                                            <li><a href="./index1.html" class="satoshi_font">COMING SOON</a></li>
                                            <li><a href="./contact.html" class="satoshi_font">CONTACT</a></li>
                                            <li class="d-none"><a href="#" class="satoshi_font product_data" item_id="106633220000002">ACCESSORIES</a></li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                            <div class="header-action-wrap header-action-flex header-action-width header-action-mrg-1">
                                <div class="same-style">
                                <a href="/myaccount.html" class="my_avatar">
                      
                                <svg style="width:20px;" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" class="icon" data-di-res-id="e576e1a9-2f4a9ed6" data-di-rand="1682677695656"><path fill="#fff" d="M48 50c17.346 0 32 14.221 32 31.054V89c0 2.757-2.243 5-5 5H21c-2.757 0-5-2.243-5-5v-7.946C16 64.221 30.654 50 48 50zm0 8c-12.785 0-24 10.773-24 23.054V86h48v-4.946C72 68.773 60.785 58 48 58zm-.002-56c12.133 0 22.003 9.87 22.003 22.001C70 36.131 60.13 46 47.998 46c-12.13 0-21.997-9.869-21.997-21.999C26 11.87 35.867 2 47.998 2zm0 8c-7.718 0-13.997 6.281-13.997 14.001C34 31.72 40.28 38 47.998 38 55.718 38 62 31.72 62 24.001 62 16.281 55.719 10 47.998 10z"></path></svg>
                                </a>
                                </div>
                                <div class="same-style header-cart">
                                <a class="cart-active1 position-relative" href="/shopping-cart.html">
                                <svg  style="width:20px;" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" class="icon" data-di-res-id="e576e1a9-90f52cd9" data-di-rand="1682677695656"><path  fill="#fff"  d="M72.848 70.25c6.075 0 11 4.925 11 11s-4.925 11-11 11-11-4.925-11-11 4.925-11 11-11zm-35 0c6.075 0 11 4.925 11 11s-4.925 11-11 11-11-4.925-11-11c0-6.074 4.926-11 11-11zm35 7a4 4 0 10.002 8.001 4 4 0 00-.002-8.001zm-35 0a4 4 0 100 8 4 4 0 000-8zM13.892 3.75c2.287 0 4.376 1.55 5.058 3.72l.064.22 2.97 11.187h68.128a4.727 4.727 0 014.661 5.786l-.048.2-9.559 36.291c-.583 2.216-2.618 3.842-4.894 3.944l-.228.005H30.06c-2.287 0-4.377-1.55-5.06-3.72l-.063-.219-13.124-49.413-10.7.006-.004-8 12.782-.007zm72.03 23.127H24.108l8.027 30.226H77.96l7.962-30.226z"></path></svg>
                                
                                <span class="position-absolute cartnumcount d-none" >0</span>
                                </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="header-small-device header-small-ptb sticky-bar py-md-2 py-2 bg-white">
                <div class="container-fluid px-4">
                    <div class="row align-items-center">
                        <div class="col-6 header-action-wrap">
                            <div class="d-flex">
                                <div class="same-style header-info">
                                    <button class="mobile-menu-button-active">
                                        <span class="info-width-1"></span>
                                        <span class="info-width-2"></span>
                                        <span class="info-width-3"></span>
                                    </button>
                                </div>
                                <div class="mobile-logo mobile-logo-width ps-3">
                                    <a href="../index.html">
                                        <img alt="" src="/dist/assets/imgs/anwi-logo-1.png" class="w-50">
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="header-action-wrap header-action-flex header-action-mrg-1">
                                <div class="same-style">
                                <a href="/myaccount.html" class="my_avatar"> <svg style="width:22px;" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" class="icon" data-di-res-id="e576e1a9-2f4a9ed6" data-di-rand="1682677695656"><path fill="#fff" d="M48 50c17.346 0 32 14.221 32 31.054V89c0 2.757-2.243 5-5 5H21c-2.757 0-5-2.243-5-5v-7.946C16 64.221 30.654 50 48 50zm0 8c-12.785 0-24 10.773-24 23.054V86h48v-4.946C72 68.773 60.785 58 48 58zm-.002-56c12.133 0 22.003 9.87 22.003 22.001C70 36.131 60.13 46 47.998 46c-12.13 0-21.997-9.869-21.997-21.999C26 11.87 35.867 2 47.998 2zm0 8c-7.718 0-13.997 6.281-13.997 14.001C34 31.72 40.28 38 47.998 38 55.718 38 62 31.72 62 24.001 62 16.281 55.719 10 47.998 10z"></path></svg></a>
                                </div>
                                <div class="same-style header-cart">
                                <a class="cart-active1 position-relative" href="/shopping-cart.html"> <svg  style="width:22px;" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" class="icon" data-di-res-id="e576e1a9-90f52cd9" data-di-rand="1682677695656"><path  fill="#fff"  d="M72.848 70.25c6.075 0 11 4.925 11 11s-4.925 11-11 11-11-4.925-11-11 4.925-11 11-11zm-35 0c6.075 0 11 4.925 11 11s-4.925 11-11 11-11-4.925-11-11c0-6.074 4.926-11 11-11zm35 7a4 4 0 10.002 8.001 4 4 0 00-.002-8.001zm-35 0a4 4 0 100 8 4 4 0 000-8zM13.892 3.75c2.287 0 4.376 1.55 5.058 3.72l.064.22 2.97 11.187h68.128a4.727 4.727 0 014.661 5.786l-.048.2-9.559 36.291c-.583 2.216-2.618 3.842-4.894 3.944l-.228.005H30.06c-2.287 0-4.377-1.55-5.06-3.72l-.063-.219-13.124-49.413-10.7.006-.004-8 12.782-.007zm72.03 23.127H24.108l8.027 30.226H77.96l7.962-30.226z"></path></svg>
                                <span class="position-absolute cartnumcount d-none"  style="top:-27%;right:-80%">0</span>
                                </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- Mobile menu start -->
        <div class="mobile-menu-active clickalbe-sidebar-wrapper-style-1">
            <div class="clickalbe-sidebar-wrap">
            <div class="row pb-2 border-bottom">
                <div class="col-6">
                    <div class="mobile-logo mobile-logo-width">
                        <a href="../index.html">
                            <img alt="" src="/dist/assets/imgs/anwi-logo-1.png" class="w-75">
                        </a>
                    </div>
                </div>
                <div class="col-6 text-end pe-4">
                    <a class="sidebar-close"><i class="fa-solid fa-xmark"></i></a>
                </div>
            </div>
               
                <div class="mobile-menu-content-area sidebar-content-100-percent pt-3">
                    <div class="mobile-search d-none">
                        <form class="search-form" action="#">
                            <input type="text" placeholder="Search here…" class="satoshi_font">
                            <button class="button-search"><i class="fa-solid fa-magnifying-glass"></i></button>
                        </form>
                    </div>
                    <div class="clickable-mainmenu-wrap clickable-mainmenu-style1">
                        <nav>
                            <ul class="pl-0">
                          

                                <li class=""><a href="./ramproducts.html" class="satoshi_font">RAM</a></li>
                                <li class=""><a href="./storageproducts.html" class="satoshi_font">STORAGE</a></li>
                                <li class="expandlinav">
                                <div class="d-flex justify-content-between">
                                    <span class="explandlinavname">LAPTOP</span><span class="d-none viewall_li">view all</span>
                                </div>
                               <div class="content-expandlinav d-none">
                               <accordion-element>
                               <accordion-item title="Accordion Item #1">
                                 <p>Lorem ipsum dolor sit amet,.</p>
                               </accordion-item>
                               <accordion-item title="Accordion Item #2">
                                 <p>Lorem ipsum dolor sit amet,.</p>
                               </accordion-item>
                               <accordion-item title="Accordion Item #3">
                                 <p>Lorem ipsum dolor sit amet,</p>
                               </accordion-item>
                             </accordion-element>
                               </div>
                                </li>
                                <li class=""><a href="./support.html" class="satoshi_font" >SUPPORT</a></li>
                                <li class=""><a href="./press.html" class="satoshi_font">PRESS</a></li>
                                <li class=""><a href="./index1.html" class="satoshi_font">COMING SOON</a></li>
                                <li class=""><a href="./contact.html" class="satoshi_font">CONTACT</a></li>
                            </ul>
                        </nav>
                    </div>
                    <div class="mobile-curr-lang-wrap d-none">
                        <div class="single-mobile-curr-lang">
                            <a class="mobile-language-active" href="#">Language <i class="icofont-simple-down"></i></a>
                            <div class="lang-curr-dropdown lang-dropdown-active">
                                <ul>
                                    <li><a href="#">English</a></li>
                                    <li><a href="#">Spanish</a></li>
                                    <li><a href="#">Hindi </a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="aside-contact-info d-none">
                        <ul>
                            <li><i class="icofont-clock-time"></i>Monday - Friday: 9:00 - 19:00</li>
                            <li><i class="icofont-envelope"></i>Info@example.com</li>
                            <li><i class="icofont-stock-mobile"></i>(+55) 254. 254. 254</li>
                            <li><i class="icofont-home"></i>Helios Tower 75 Tam Trinh Hoang - Ha Noi - Viet Nam</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>`;
    $("#navbar-head").html(nav_html);

    $('.explandlinavname').click(function (e){
       if($('.expandlinav .viewall_li').hasClass('d-none')){
        $('.expandlinav').find('.viewall_li').removeClass('d-none');
        $('.expandlinav').find('.content-expandlinav').removeClass('d-none');
       }else{
        $('.expandlinav').find('.viewall_li').addClass('d-none');
        $('.expandlinav').find('.content-expandlinav').addClass('d-none');
       }
       
       console.log($(e.target));
        
    });

    let width = $(window).width();
    $(".menu-negative-mrg2,.menu-negative-mrg3,.menu-negative-mrg4").css("width", width);
    let ele_page = $("body").hasClass("product_pg");
    if (ele_page == true) {
        $(".header-area").removeClass("bg-white");
        $(".main-menu").find("nav ul li a").addClass("text-white");
        $(".header-bottom.sticky-bar").removeClass("sticky-bar");
        let src = `../dist/assets/imgs/anwi-logo-2.png`;
        $(".logo-menu-wrap").find("a img").attr("src", src);
        $(".main-body").find("iframe").attr("width", width);
        if (width <= 575 && width >= 390) {
            $(".main-body").find("iframe").attr({
                width: width,
                height: 236,
            })
        } else if (width <= 390 && width >= 270) {
            $(".main-body").find("iframe").attr({
                width: width,
                height: 210,
            });
        } else if (width <= 998 && width > 575) {
            $(".main-body").find("iframe").attr({
                width: width,
                height: 530,
            });
        } else if (width <= 2720 && width > 1920) {
            $(".main-body").find("iframe").attr({
                width: width,
                height: 1440,
            });
        } else {
            $(".main-body").find("iframe").attr({
                width: width,
                height: 860,
            });
        }
    }


    $("a.ram_data").click(function () {
        let item_id = $(this).attr("accessories_id");
        let loc_path = '/products.html'
        if (window.location.pathname.includes(loc_path)) {
            window.location.href = `?itemid=${item_id}`
        }
        else {
            window.location.href = `/products.html#itemid=${item_id}`;
        }
    })


    // $(".main-menu nav ul").find("li").each(function () {
    //     var current = window.location.pathname;
    //     var $this = $(this).find("a");
    //     if (current != "/") {
    //         if ($this.attr('href').indexOf(current) !== -1) {
    //             $(this).addClass('active_nav');
    //         }
    //     }

    // })

    // destroy localstorage data
    let loc_path = '/productdetails.html';
    if (window.location.pathname.includes(loc_path) === false) {
        localStorage.removeItem("product_data");
        localStorage.removeItem("top_data")
    }
    let loc_path1 = '/productcatloguedetails.html';
    if (window.location.pathname.includes(loc_path1) === false) {
        localStorage.removeItem("product_catlogue_obj");
    }

    //services pages links and sources

    let $body_pg = $("body").hasClass("services_page");
    let $hm_pg = "../index.html";
    let $nav_img = "../dist/assets/imgs/anwi-logo-1.png";
    let $footer_img = "../dist/assets/imgs/anwi-logo-2.png";
    let $scrool_top_img = "../dist/assets/imgs/Home/rocket-footer.png";
    let $about_pg = $("body").hasClass("about_page");
    if($about_pg == true){
        debugger
        $(".main-menu").find("nav ul li a").addClass("text-dark");
        let img_src = `./dist/assets/imgs/anwi-logo-1.png`;
        $(".logo-menu-wrap").find("a img").attr("src",img_src);
        $(".header-bottom").addClass("sticky-bar stick");
        $("body.about_page").find(".header-large-device").find(".header-action-wrap").find(".same-style").find("svg").find("path").attr("fill","#000");
    }
    if ($body_pg == true) {
        $(".header-large-device").find(".logo-menu-wrap .logo").find("a").attr("href", $hm_pg);
        $(".header-large-device").find(".logo-menu-wrap .logo").find("a img").attr("src", $nav_img);
        $(".mobile-logo").find("a").attr("href", $hm_pg);
        $(".mobile-logo").find("a img").attr("src", $nav_img);
        $("body.services_page").find(".header-large-device").find(".header-action-wrap").find(".same-style").find("svg").find("path").attr("fill","#000");
        $(".main-menu").find("nav ul").find("li a").each(function () {
            $(this).addClass("text-dark")
            $(".header-bottom").addClass("sticky-bar stick");
            let $arc = $(this).attr("href");
            let $spcial_char = $arc.includes("./");
            if ($spcial_char === true) {
                let $refarence = `.${$arc}`
                $(this).attr("href", $refarence);
            }
            
        });
        $(".same-style").find("a").each(function () {
            let $arc1 = $(this).attr("href");
            let $spcial_char1 = $arc1.includes("./");
            if ($spcial_char1 === true) {
                let $refarence1 = `.${$arc1}`
                $(this).attr("href", $refarence1);
            }
        })
        $(".tab-content").find("img").each(function(){
            let $img_src = $(this).attr("src");
            let $img_src1 = $img_src.includes("./");
            if ($img_src1 === true) {
                let $refarenceimg1 = `.${$img_src}`;
                $(this).attr("src", $refarenceimg1);
            }
        });
        $(".clickable-mainmenu-wrap").find("nav ul").find("li a").each(function () {
            let $arc_mbil = $(this).attr("href");
            let $spcial_char_mbil = $arc_mbil.includes("./");
            if ($spcial_char_mbil === true) {
                let $refarence_mbil = `.${$arc_mbil}`
                $(this).attr("href", $refarence_mbil);
            }
        });
    }

    setTimeout(()=>{
        if(width<=600){
            $('.same-style').find('svg path').attr('fill','#000')
        }
    },300)
}