anwi_website/dist/Js/navbar.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(){

        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])
                console.log("done");

            } catch (error) {
                console.log(error);
                return;
            }
        }

         setLengthCart();
        //console.log("hello");

        
        
      
    }
    let URLNAMENAV = window.location.href;
    const isTransparent = URLNAMENAV.includes('login')||URLNAMENAV.includes('orderconfirmation');
    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><a href="./storageproducts.html" class="satoshi_font">STORAGE</a></li>
                                            <li><a href="./ramproducts.html" class="satoshi_font">MEMORY</a></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=""><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);
    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";

    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);
        $(".main-menu").find("nav ul").find("li a").each(function () {
            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);
                }
            })
        });
        $(".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)
}