anwi_website/dist/Js/navbar.js

navINIT();

function navINIT() {
    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">RAM</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"><i class="fa-solid fa-user"></i></a>
                                </div>
                                <div class="same-style header-cart">
                                <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:-15%;right:-115%">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">
                    <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"><i class="fa-solid fa-user"></i></a>
                                </div>
                                <div class="same-style header-cart">
                                <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>
                    </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")
    }


    //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);
            }
        });
    }
}