Untitled
unknown
plain_text
2 years ago
12 kB
6
Indexable
(function() {
if (!document.querySelector("#eg-search")) {
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);
}
function live(selector, event, callback, context) {
/****Helper Functions****/
// helper for enabling IE 8 event bindings
function addEvent(el, type, handler) {
if (el.attachEvent) el.attachEvent("on" + type, handler);
else el.addEventListener(type, handler);
}
// matches polyfill
this.Element &&
(function(ElementPrototype) {
ElementPrototype.matches =
ElementPrototype.matches ||
ElementPrototype.matchesSelector ||
ElementPrototype.webkitMatchesSelector ||
ElementPrototype.msMatchesSelector ||
function(selector) {
var node = this,
nodes = (node.parentNode || node.document).querySelectorAll(selector),
i = -1;
while (nodes[++i] && nodes[i] != node);
return !!nodes[i];
};
})(Element.prototype);
// live binding helper using matchesSelector
function live(selector, event, callback, context) {
addEvent(context || document, event, function(e) {
var found,
el = e.target || e.srcElement;
while (el && el.matches && el !== context && !(found = el.matches(selector))) el = el.parentElement;
if (found) callback.call(el, e);
});
}
live(selector, event, callback, context);
}
let egItems = [{
"name": "Classic Whip SPF 30",
"link": "https://www.vacation.inc/products/sun-screen"
},
{
"name": "Ball Boy Scented Candle",
"link": "https://www.vacation.inc/products/ball-boy-candle"
},
{
"name": "Chardonnay Oil SPF 30",
"link": "https://www.vacation.inc/products/chardonnay-oil-spf-30"
},
{
"name": "Classic Spray SPF 30",
"link": "https://www.vacation.inc/products/classic-whip-spf-30"
},
{
"name": "Super Spritzer",
"link": "https://www.vacation.inc/products/super-spritzer"
},
{
"name": "Mineral Lotion SPF 30",
"link": "https://www.vacation.inc/products/mineral-lotion-spf-30"
}
]
let egImg = "https://drive.google.com/uc?id=1t59B7-tIZRxNP7bMecVejTq2ACDZvKSJ";
let egSearchbar = `<div class="egContainer">
<form>
<div class="input-group">
<input type="text" id="egSearch" placeholder="Search...">
<label for="egSearch">
<img class ='egSearchIcon' src="${egImg}" />
</label>
</div>
<ul class="eg-suggestion-list"></ul>
</form>
</div>`;
let egIconHtml = `<div id="eg-search"><img class="egSearchIcon" src='${egImg}'></div>`;
/* Variation Init */
function init() {
/* start your code here */
if (window.location.href.indexOf("https://www.vacation.inc/collections") != -1) {
document.querySelector("#eg-search") && document.querySelector("#eg-search").remove();
document.querySelector(".egContainer") && document.querySelector(".egContainer").remove();
document.querySelector("#__next header .header__nav > div > div > div:last-child > div").insertAdjacentHTML("afterbegin", egIconHtml);
document.querySelector("#__next main > div.filters-container > div.filters-list").insertAdjacentHTML('beforebegin', egSearchbar);
showList();
live('#eg-search', 'click', function() {
document.querySelector(".egContainer") &&
document.querySelector(".egContainer").classList.toggle("egShow");
});
} else {
document.querySelector("#eg-search") && document.querySelector("#eg-search").remove();
document.querySelector(".egContainer") && document.querySelector(".egContainer").remove();
}
}
listener()
function showList() {
document.querySelector("#egSearch").addEventListener("input", function() {
let query = this.value.toUpperCase();
let egShowItemsHtml = '';
egItems.forEach(item => {
if ((query !== "") && (item.name.toUpperCase().indexOf(query) != -1)) {
egShowItemsHtml += ` <li class="eg-item"><a href = '${item.link}' class="eg-product-name">${item.name}</a></li>`;
}
});
document.querySelector(".eg-suggestion-list").innerHTML = '';
document.querySelector(".eg-suggestion-list").insertAdjacentHTML("beforeend", egShowItemsHtml);
});
}
function listener() {
/* These are the modifications: */
window.addEventListener("locationchange", function() {
waitForElement('#__next main > div.filters-container > div.filters-list', init, 1500, 15000);
});
history.pushState = ((f) =>
function pushState() {
var ret = f.apply(this, arguments);
window.dispatchEvent(new Event("pushstate"));
window.dispatchEvent(new Event("locationchange"));
return ret;
})(history.pushState);
history.replaceState = ((f) =>
function replaceState() {
var ret = f.apply(this, arguments);
window.dispatchEvent(new Event("replacestate"));
window.dispatchEvent(new Event("locationchange"));
return ret;
})(history.replaceState);
window.addEventListener("popstate", () => {
window.dispatchEvent(new Event("locationchange"));
});
}
/* Initialize variation */
waitForElement('#__next main > div.filters-container > div.filters-list', init, 1500, 15000);
} catch (e) {
if (debug) console.log(e, "error in Test" + variation_name);
}
}
})();
<style>
#__next header .header__nav>div>div>div:last-child>div {
flex-direction: row !important;
justify-content: flex-end;
gap: 30px;
align-items: center !important;
}
html body #eg-search {
display: flex;
justify-content: center;
align-items: center;
}
html body #eg-search>.egSearchIcon {
width: 40px;
object-fit: cover;
filter: opacity(0.95);
display: block !important;
position: relative;
top: -5px;
}
html body .filters-container {
display: flex;
flex-direction: column;
margin-top: 110px !important;
}
.egContainer {
max-width: 530px;
width: 100%;
margin: 0 auto;
padding: 25px 15px;
display: none;
}
.egContainer.egShow {
display: block !important;
position: fixed;
top: 50px;
z-index: 999999999;
}
.egContainer form {
max-width: 80%;
margin: 0 auto;
position: relative;
}
.egContainer .input-group {
position: relative;
}
.egContainer label {
position: absolute;
right: 20px;
top: 50%;
transform: translatey(-50%);
/*color: rgba(0, 0, 0, 0.08);*/
transition: all 0.2s ease;
}
.egSearchIcon {
cursor: pointer;
}
.egContainer input {
width: 100%;
padding: 15px 33px 10px 25px;
border: none;
background: #fff;
font-family: ITCGaramondStd-LtCond;
outline: none;
font-size: 20px;
border-radius: 25px !important;
border-bottom: 0px solid #ddd;
transition: all 0.2s ease;
box-shadow: 0px 6px 22px -7px rgb(0 0 0 / 50%);
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.14px;
}
.egContainer input:focus {
background: #fff;
}
img.egSearchIcon {
width: 30%;
/*filter: contrast(0.5);*/
}
label {
display: flex;
align-items: flex-end;
justify-content: end;
}
.eg-suggestion-list {
background: white;
position: absolute;
top: 55px;
z-index: 999;
width: 100%;
padding: 5px;
border-radius: 25px;
max-height: 300px;
overflow-y: scroll;
}
.eg-suggestion-list:empty{
display: none;
}
.eg-product-image>img {
width: 42px;
display: block;
object-fit: cover;
aspect-ratio: 1/1;
}
li.eg-item {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
background: #e2ddd4;
border: 0px solid;
border-radius: 3px;
}
li.eg-item:first-child {
-webkit-border-top-left-radius: 25px;
-webkit-border-top-right-radius: 25px;
-moz-border-radius-topleft: 25px;
-moz-border-radius-topright: 25px;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
li.eg-item:last-child {
-webkit-border-bottom-right-radius: 25px;
-webkit-border-bottom-left-radius: 25px;
-moz-border-radius-bottomright: 25px;
-moz-border-radius-bottomleft: 25px;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 25px;
}
.eg-product-name {
display: flex;
padding: 12px 15px 8px;
flex: 1;
font-size: 20px;
font-family: 'ITCGaramondStd-LtCond';
letter-spacing: 0.14px;
align-items: center;
font-weight: 400;
}
li.eg-item+li.eg-item {
margin-top: 5px;
}
@media screen and (max-width: 999px) {
html body #eg-search>.egSearchIcon {
width: 30px;
top: -3px;
}
}
@media screen and (max-width: 767px) {
html body .filter-list-wrapper-mobile {
margin-top: 20px !important;
}
}
@media(max-width:425px) {
#__next header .header__nav>div>div>div:last-child>div {
gap: 16px;
}
#__next header .header__nav>div>div>div:nth-child(-n + 2) {
width: 30%;
}
#__next header .header__nav>div>div>div:nth-child(3) {
width: 40%;
}
}
</style>Editor is loading...