Untitled

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

    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 totalPages;
    let currentPage = 1; // Current page number
    const init = () => {
      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) {
              getData(this.getAttribute("data-num"));
            } else {
              getData(0);
            }
            updatePages();
          });
        });
      }
      prevButton.addEventListener('click', function () {
        if (currentPage > 1) {
          currentPage--;
          prePage();
        }
      });
      nextButton.addEventListener("click", function () {
        if (currentPage < totalPages) {
          currentPage++;
          nextPage();
        }
      });
    }

    const getData = (st) => {
      document.querySelector(".show-more button").setAttribute("data-url", `https://www.yankeecandle.com/on/demandware.store/Sites-homefragranceus-Site/en_US/Search-UpdateGrid?cgid=yankeecandle-candles-signaturecandles&start=${st}&sz=24`);
      sessionStorage.setItem("crrpg", currentPage);
      document.querySelector(".show-more button").click();
    }

    const nextPage = () => {
      if (document.querySelector(".eg-page.active")) {
        let activePage = document.querySelector(".eg-page.active");
        let pageNum = activePage.nextElementSibling.getAttribute("data-num");
        document.querySelector(".show-more button").setAttribute("data-url", `https://www.yankeecandle.com/on/demandware.store/Sites-homefragranceus-Site/en_US/Search-UpdateGrid?cgid=yankeecandle-candles-signaturecandles&start=${pageNum}&sz=24`);
        sessionStorage.setItem("crrpg", currentPage);
        document.querySelector(".show-more button").click();
      }
    }

    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);
          document.querySelector(".show-more button").setAttribute("data-url", `https://www.yankeecandle.com/on/demandware.store/Sites-homefragranceus-Site/en_US/Search-UpdateGrid?cgid=yankeecandle-candles-signaturecandles&start=${pageNum}&sz=24`);
          sessionStorage.setItem("crrpg", currentPage);
          document.querySelector(".show-more button").click();
        }
      }
    }

    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)) {
          waitForElement('#search-result-count-label', init, 500, 15000);
        }
      })
      return send.apply(this, arguments)
    }

    waitForElement('#search-result-count-label', init, 50, 15000);
  } catch (e) {
    if (debug) console.log(e, "error in Test" + variation_name);
  }
})();




.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(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;
    }
}