Untitled
unknown
plain_text
2 years ago
10 kB
2
Indexable
(function () {
if(!document.querySelector('.eg-pagination'))
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 (el && found) callback.call(el, e);
});
}
live(selector, event, callback, context);
}
let paginationHTML = `
<div class="eg-pagination">
<button class="eg-prev">Prev</button>
<div class="eg-pages"></div>
<button class="eg-next">Next</button>
</div>
`;
let egLoader = '<div class="veil eg-loader"><div class="underlay"></div><div class="spinner" style="position: fixed;"><div class="dot1"></div><div class="dot2"></div></div></div>';
let totalPages;
let totalProducts = 0;
let currentPage = 1; // Current page number
const init = () => {
addCss();
updateCurrentPage();
let totalResEl = document.querySelector("#search-result-count-label");
if (totalResEl) {
let crr = +totalResEl.getAttribute("data-page-num-results");
let rst = +totalResEl.getAttribute("data-total-results");
totalPages = Math.ceil(rst / crr);
}
waitForElement(".show-more", function () {
if (!document.querySelector(".eg-pagination")) {
document.querySelector(".show-more").insertAdjacentHTML("afterend", paginationHTML);
}
updatePages();
}, 500, 15000);
}
const updateCurrentPage = () => {
if (window.location.href.indexOf("start") !== -1) {
if (sessionStorage.getItem("crrpg") !== null) {
currentPage = Number(sessionStorage.getItem("crrpg"));
}
}
}
function updatePages() {
const pagesContainer = document.querySelector('.eg-pages'); // Container for page numbers
const prevButton = document.querySelector('.eg-prev'); // Previous button
const nextButton = document.querySelector('.eg-next'); // Next button
if (pagesContainer && prevButton && nextButton) {
let startPage = Math.max(1, currentPage - 2); // Start page number
let endPage = Math.min(totalPages, startPage + 4); // End page number
let pagesHtml = '';
for (let i = startPage; i <= endPage; i++) {
let dataNum = (i - 1) * 24;
pagesHtml += `<button class="eg-page ${i === currentPage ? 'active' : ''}" data-num="${dataNum}">${i}</button>`;
}
pagesContainer.innerHTML = pagesHtml;
prevButton.disabled = currentPage === 1;
nextButton.disabled = currentPage === totalPages;
document.querySelectorAll(".eg-page").forEach(btn => {
btn.addEventListener("click", function () {
currentPage = parseInt(this.textContent);
if (this.previousElementSibling) {
generatePLPURL(Number(this.getAttribute("data-num")));
} else {
generatePLPURL(0);
}
updatePages();
});
});
}
prevButton.addEventListener('click', function () {
if (currentPage > 1) {
currentPage--;
prePage();
}
});
nextButton.addEventListener("click", function () {
if (currentPage < totalPages) {
currentPage++;
nextPage();
}
});
}
const nextPage = () => {
if (document.querySelector(".eg-page.active")) {
let activePage = document.querySelector(".eg-page.active");
let pageNum = activePage.nextElementSibling.getAttribute("data-num");
sessionStorage.setItem("crrpg", currentPage);
generatePLPURL(Number(pageNum));
}
}
const prePage = () => {
if (document.querySelector(".eg-page.active")) {
let activePage = document.querySelector(".eg-page.active");
if (activePage.previousElementSibling) {
let pageNum = activePage.previousElementSibling.getAttribute("data-num");
console.log("This is prev ", pageNum);
sessionStorage.setItem("crrpg", currentPage);
generatePLPURL(Number(pageNum));
}
}
}
const send = XMLHttpRequest.prototype.send
XMLHttpRequest.prototype.send = function () {
this.addEventListener('load', function () {
if ((this.responseURL.indexOf("/Search-UpdateGrid") !== -1) || (this.responseURL.indexOf("/Search-ShowAjax") !== -1)) {
currentPage = 1;
sessionStorage.setItem("crrpg", currentPage);
waitForElement('#search-result-count-label', init, 500, 15000);
} else if (this.responseURL.indexOf("start") !== -1) {
waitForElement('#search-result-count-label', init, 500, 15000);
}
})
return send.apply(this, arguments)
}
const generatePLPURL = (newStartPoint) => {
let url;
url = window.location.href;
// search for the pattern
let pattern = /start=\d+&sz=\d+/;
let match = url.match(pattern);
if (match) {
// replace start and sz values with desired values
url = url.replace(pattern, `start=${newStartPoint}&sz=${newStartPoint + 24}`);
} else {
url = window.location.href + `?start=${newStartPoint}&sz=${newStartPoint + 24}&view=product`;
}
console.log(url);
getPlpData(url, newStartPoint + 24);
}
const getPlpData = (url, newStartPoint) => {
document.body.insertAdjacentHTML("beforeend", egLoader);
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
let data = this.responseText;
let el = document.createElement("div");
el.innerHTML = data;
el.querySelector("#product-search-results div:first-child #search-result-count-label").classList.remove("d-none");
el.querySelector("#product-search-results .js-selected-filter").classList.remove("d-none");
let searchEl = el.querySelector("#product-search-results");
if (searchEl) {
document.querySelector("#product-search-results").innerHTML = searchEl.innerHTML;
// document.querySelector("#product-search-results div:first-child #search-result-count-label").innerText = "Showing " + newStartPoint + " of " + document.querySelector("#product-search-results div:first-child #search-result-count-label").getAttribute("data-total-results");
console.log("data updated");
document.querySelector(".eg-loader").remove();
}
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
waitForElement('#search-result-count-label', init, 50, 15000);
function addCss(targetElem) {
var link = document.createElement("style"),
styles = `.eg-pagination {
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0;
}
.show-more button {
display: none !important;
}
.eg-pages {
display: flex;
justify-content: center;
align-items: center;
}
.eg-page {
background-color: white;
border: none;
padding: 8px 16px;
margin: 0 4px;
cursor: pointer;
}
.eg-page:hover {
background-color: #4e616a;
color: white;
}
.eg-page.active {
background-color: #4e616a;
color: #fff;
}
.eg-prev,
.eg-next {
background-color: #4e616a;
border: none;
color: #fff;
padding: 8px 16px;
margin: 0 4px;
cursor: pointer;
}
.eg-prev[disabled],
.eg-next[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
@media(min-width:768px) {
html body .eg-loader {
position: fixed !important;
}
}
@media(max-width:460px) {
.eg-pagination {
font-size: 60% !important;
}
.eg-pagination button {
padding: 6px 13px !important;
}
.product-search-grid {
margin-left: 0 !important;
margin-right: 0 !important;
}
}`;
link.innerHTML = styles;
targetElem = targetElem || document.querySelector("head");
targetElem.appendChild(link);
}
} catch (e) {
if (debug) console.log(e, "error in Test" + variation_name);
}
})();
Editor is loading...