Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
12 kB
0
Indexable
Never

   //console.log('code run');
  try {
    /* main variables */
    var debug = 0;
    var variation_name = "";
    var $;
    /* all Pure helper functions */

    function waitForElement(selector, trigger, delayInterval, delayTimeout) {
      var interval = setInterval(function () {
        if (
          document &&
          document.querySelector(selector) &&
          document.querySelectorAll(selector).length > 0
        ) {
          clearInterval(interval);
          trigger();
        }
      }, delayInterval);
      setTimeout(function () {
        clearInterval(interval);
      }, delayTimeout);
    }

    let egHero = `
        <div class="eg-hero">
          <div class="eg-wrapper"></div>
        </div>`;

    /* Variation Init */
    function init() {
      if (!document.querySelector(".eg-hero")) {
        document.body.classList.add("eg-home");
        // changing logo image
        document.querySelector("html body #page-vue-header-mainmenu>div:nth-child(2)>div:nth-child(1) .logo_img").src = "https://www.hyperoptic.com/wp-content/uploads/2023/03/Hyperoptic-logo-full-colour-2.jpg";
        document.querySelector("#top_main_banner").insertAdjacentHTML("afterend", egHero);
        let egSearchBox = document.querySelector('div[id*="elastic-blockblock"]');
        egSearchBox.classList.add("eg-searchbox");
        document.querySelector(".eg-hero .eg-wrapper").insertAdjacentElement("beforeend", egSearchBox);
        document.querySelectorAll('html body .eg-searchbox .input-elastic-group button[qa="elasticSearchCheckButton"]').forEach(btn => {
          btn.innerHTML = "Check now";
        })
        document.querySelectorAll('html body .eg-searchbox .input-elastic-group [qa="elasticSearchPostcode"]').forEach((src, i) => {
          if (i === 1) {
            src.placeholder = "Check your postcode";
          } else {
            src.placeholder = "Check your postcode to get started";
          }
        });
        document.querySelector("html body #page-vue-header-mainmenu>div:nth-child(2)>div:nth-child(1) div[class*='myaccount-btn-wr'] img").src = "https://www.hyperoptic.com/wp-content/themes/hyperoptic3/img/icons/my-account_blue.png";
      }
    }

    function setSticky() {
      if (window.innerWidth > 991) {
        let header = document.querySelector("html body #top_main_banner #page-vue-header-mainmenu");
        window.addEventListener('scroll', function () {
          let bottom = document.documentElement.scrollHeight * 0.10;
          const searchBox = header.querySelector(".menuContainer");
          if (searchBox) {
            if (window.scrollY >= bottom) {
              searchBox.classList.add("eg-sticky");
              if ((!document.querySelector(".eg-sticky .eg-sticky-title")) && (document.querySelector(".eg-sticky>div.container>div"))) {
                document.querySelector(".eg-sticky>div.container>div").insertAdjacentHTML("afterbegin", `<h1 class="eg-sticky-title"><span class="eg-bold">We're Hyperfair</span> - not hyperexpensive Fibre Broadband.</h1>`);
              }
            } else {
              if (document.querySelector(".eg-sticky .eg-sticky-title")) {
                document.querySelector(".eg-sticky .eg-sticky-title").remove();
              }
              searchBox.classList.remove("eg-sticky");
            }
          }
        });
      } else {
        setStickyMob();
      }
    }

    // mobile scroll
    function setStickyMob() {
       //console.log('code run1');
      var scrollTimer = -1;
      var searchBox;
      let header = document.querySelector("html body #top_main_banner #page-vue-header-mainmenu");
      window.addEventListener('scroll', bodyScroll);
      function bodyScroll() {
        searchBox = header.querySelector(".elastic-wr");
        searchBox && searchBox.classList.remove("eg-sticky");
         // console.log('scrolling');
          if (scrollTimer != -1) 
            clearTimeout(scrollTimer);
        scrollTimer = window.setTimeout(scrollFinished, 500);
      }

        function scrollFinished() {
          if (window.scrollY >= 300) {
           searchBox && searchBox.classList.add("eg-sticky");
          //  console.log('stoped');
          }
        }
      
    }

    /* Initialize variation */
    if (window.location.pathname === "/") {
      waitForElement('div[id*="elastic-blockblock"] > div > div:nth-child(2) .input-elastic-group button[qa="elasticSearchCheckButton"]', init, 1000, 15000);
    }
    if (window.innerWidth > 991) {
      waitForElement("html body #top_main_banner #page-vue-header-mainmenu .elastic-search", setSticky, 2500, 15000);
    } else {
      waitForElement("html body #top_main_banner #page-vue-header-mainmenu .elastic-wr", setSticky, 2500, 15000);
    }
  } catch (e) {
    if (debug) console.log(e, "error in Test" + variation_name);
  }




<style>
html body.eg-home .eg-hero+div,
html body.eg-home .eg-searchbox>div>div .container>div>div:last-child,
html body.eg-home .eg-searchbox>div>div .container>div>p:last-child,
html body .eg-sticky .menu {
    display: none !important;
}

html body.eg-home .eg-searchbox>div>div .container>div>div:first-child input,
html body.eg-home .eg-searchbox>div>div .container>div>div:first-child input::placeholder {
    font-size: 18px !important;
}

html body.eg-home .eg-hero {
    background: white;
}

html body.eg-home .eg-wrapper {
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    background-image: url("http://hyperoptic.com/wp-content/uploads/2023/02/Desktop-Sale-Banners-3-Months-fixed.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    max-height: 520px;
    display: flex;
    align-items: flex-end;
    padding-bottom: 62px;
}

html body.eg-home .eg-searchbox>div>div {
    background: none !important;
    padding: 0 !important;
}

html body.eg-home .eg-searchbox>div>div .container>div>div:first-child,
html body.eg-home .eg-searchbox,
html body.eg-home .eg-searchbox .container {
    width: 100% !important;
}

html body.eg-home .eg-searchbox .container {
    max-width: 699px !important;
}

html body.eg-home .eg-searchbox .container>div {
    margin: 0 !important;
}


html body.eg-home .eg-searchbox .input-elastic-group [qa="elasticSearchCheckButton"] {
    background-color: #706290 !important;
}

html body .eg-sticky {
    position: fixed !important;
    top: unset !important;
    left: 0;
    right: 0;
    background: white;
    width: 100%;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    z-index: 99999 !important;
    border-bottom: 1px solid #CBCECF;
    bottom: 0 !important;
}

@media(min-width:993px) and (max-width:1079px) {
    html body.eg-home .eg-wrapper {
        max-height: 420px !important;
        padding-bottom: 42px !important;
    }
}

  html body.home #pageFooter {		
padding-bottom: 81px !important;		
}

@media(min-width:992px) {
    html body .eg-sticky {
        bottom: 0 !important;
        top: unset !important;
    }

    html body .eg-sticky::after {
        content: "";
        position: absolute;
        top: -2px;
        width: 100%;
        display: block;
        height: 3px;
        background: linear-gradient(to right, #3db8db, #706290);
    }
}

@media(max-width:992px) and (min-width:768px) {
    html body.eg-home .eg-wrapper {
        max-height: 772px !important;
        background-size: 100% !important;
        background-position: 50% 74% !important;
        padding-bottom: 100px !important;
    }
}

.eg-sticky>div.container>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.eg-sticky>div.container>div>div:nth-child(1),
.eg-sticky>div.container>div>div:nth-child(3) tbody td:nth-child(n + 2) {
    display: none !important;
}

.eg-sticky>div.container {
    max-width: 850px !important;
}

.eg-sticky {
    height: 80px !important;
    background: #706290 !important;
}

.eg-sticky>div.container>div>div:nth-child(3) {
    width: 100% !important;
    height: max-content !important;
    display: flex !important;
    max-width: 334px !important;
    float: unset !important;
}

.eg-sticky>div.container>div>div:nth-child(3)>div:nth-child(2) {
    position: static !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
}

.eg-sticky>div.container>div>div:nth-child(3) tbody td:nth-child(1) {
    width: 100% !important;
}

html body .eg-sticky .input-elastic.input-elastic-border {
    font-size: 1.8em !important;
    height: 50px !important;
    background: white !important;
}

html body .eg-sticky .input-elastic-loader {
    margin-top: 15px !important;
}

.eg-sticky .btn-elastic-go {
    height: 50px !important;
    width: 50px !important;
}

.eg-sticky #elastic-results {
    top: unset !important;
    bottom: 64px;
}

.eg-sticky-title {
    font-size: 17px;
    color: #ffffff !important;
    font-weight: bold !important;
    font-family: 'museo-sans-700' !important;
    margin-right: 22px;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.eg-sticky>div.container>div>div:nth-child(2) {
    display: none !important;
}

.eg-sticky-title>.eg-bold {
    color: #fff !important;
}

@media(max-width:992px) {
    html body #top_main_banner #page-vue-header-mainmenu>div:last-child>div:nth-child(2).eg-sticky {
        display: flex !important;
    }

    html body .eg-sticky {
        box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 10px !important;
        border: none !important;
        padding: 20px 16px !important;
        background: #706290 !important;
    }

    html body .eg-sticky>div {
        min-width: 100% !important;
    }

    html body.eg-home .eg-wrapper {
        background-image: url("https://www.hyperoptic.com/wp-content/uploads/2023/02/Mobile-A-Sale-Banners-3-Months-fixed.jpg");
        padding-bottom: 62px;
    }

    /* mobile nav changes to white and icons to blue */
    html body.eg-home #page-vue-header-mainmenu>div:nth-child(2)>div:nth-child(1) {
        background: white !important;
    }

    html body.eg-home #page-vue-header-mainmenu>div:nth-child(2)>div:nth-child(1) .logo_img {
        filter: none !important;
    }

    html body.eg-home #page-vue-header-mainmenu>div:nth-child(2)>div:nth-child(1) #burgerMobileMenu span.icon-bar {
        background-color: #3AB9DC !important;
    }

    html body.eg-home #page-vue-header-mainmenu #burgerMobileMenuClose {
        color: #3AB9DC !important;
    }

    /* moibile nav changes to white and icons to blue */
    html body .eg-sticky::before {
        content: "Rated Excellent On Truspilot";
        color: white !important;
        display: block !important;
        width: 100% !important;
        text-align: center;
        font-size: 17px !important;
        font-weight: bold !important;
        margin-bottom: 15px !important;
    }

    html body .eg-sticky {
        flex-direction: column !important;
    }

    .eg-sticky {
        height: 116px !important;
    }

    html body .eg-sticky::after {
        content: "";
        position: absolute;
        bottom: -2px;
        width: 100%;
        display: block;
        height: 3px;
        background: linear-gradient(to right, #3db8db, #706290);
    }

    .eg-sticky #elastic-results {
        bottom:   55px !important;
    }
      html body.home #pageFooter {padding-bottom: 111px !important;}
}

@media(max-width:767px) {

    html body.eg-home .eg-searchbox .input-elastic-group [qa="elasticSearchCheckButton"],
    html body.eg-home .eg-searchbox>div>div .container>div>div:first-child input,
    html body.eg-home .eg-searchbox>div>div .container>div>div:first-child input::placeholder {
        font-size: 16px !important;
    }
}

@media(max-width:440px) {
    html body.eg-home .eg-wrapper {
        background-image: url(https://www.hyperoptic.com/wp-content/uploads/2023/02/Mobile-A-Sale-Banners-3-Months-fixed.jpg);
        padding-bottom: 40px;
        max-height: 411px !important;
    }
}
</style>