Untitled
unknown
plain_text
2 years ago
8.4 kB
4
Indexable
(function () {
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 = "Enter postcode e.g CT21 DC";
}
});
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() {
window.addEventListener("scroll", function () {
let header = document.querySelector("html body #top_main_banner #page-vue-header-mainmenu");
let searchBox = header.querySelector(".elastic-wr");
let bottom = 0;
bottom = header.offsetHeight;
if (window.innerWidth > 991) {
searchBox = header.querySelector(".menuContainer");
}
if (searchBox) {
if (window.scrollY >= bottom) {
searchBox.classList.add("eg-sticky");
} else {
searchBox.classList.remove("eg-sticky");
}
}
});
}
/* 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 {
display: block !important;
position: fixed !important;
top: 0;
left: 0;
right: 0;
background: white;
width: 100%;
z-index: 999999 !important;
box-shadow: 0 0 10px rgb(0 0 0 /30%) !important;
display: flex !important;
flex-direction: row !important;
align-items: center;
justify-content: center;
}
html body .eg-sticky {
position: fixed !important;
top: 0;
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;
}
@media(min-width:993px) and (max-width:1079px) {
html body.eg-home .eg-wrapper {
max-height: 420px !important;
padding-bottom: 42px !important;
}
}
@media(max-width:992px) {
html body .eg-sticky {
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 10px !important;
border: none !important;
padding: 20px 16px !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 */
}
@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;
}
}
@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>Editor is loading...