Prev Next Product Detail

<script>
if (typeof window.nextPrevConfig === 'undefined') {
  window.nextPrevConfig = {
    enableTopPagination: true,
    enableBottomPagination: true,
    topPaginationUseTitle: false,
    bottomPaginationUseTitle: true
  };
}

document.addEventListener('DOMContentLoaded', function() {
  if (window.location.pathname.indexOf('/p/') === -1) return;

  var design = document.querySelector('h1.product-title') ? 'simple' : 'other-three';
  var currentProductTitle = document.querySelector('h1.' + (design === 'simple' ? 'product-title' : 'pdp-details-title'));
  currentProductTitle = currentProductTitle ? currentProductTitle.textContent : '';
  var fetchUrl = '/' + window.location.pathname.split('/')[1] + '?format=json-pretty';
  var currentURL = window.location.pathname;

  var PREV_SVG = '<polyline fill="none" stroke-miterlimit="10" points="7.3,14.7 2.5,8 7.3,1.2"></polyline>';
  var NEXT_SVG = '<polyline fill="none" stroke-miterlimit="10" points="1.6,1.2 6.5,7.9 1.6,14.7"></polyline>';

  fetch(fetchUrl, {
    headers: document.location.host.indexOf('.squarespace.com') !== -1 ? { 'pragma': 'no-cache', 'cache-control': 'no-cache' } : {}
  })
  .then(function(response) { return response.json(); })
  .then(function(json) {
    var products = json.items;
    var currentIndex = -1;
    for (var i = 0; i < products.length; i++) {
      if (products[i].fullUrl === currentURL) {
        currentIndex = i;
        break;
      }
    }

    if (currentIndex === -1) {
      console.warn("PAGINATION - Unable to match current URL to product.");
      return;
    }

    var prev = products[currentIndex - 1];
    var next = products[currentIndex + 1];
    
    handlePagination(
      prev ? prev.title : '', 
      next ? next.title : '', 
      prev ? prev.fullUrl : null, 
      next ? next.fullUrl : null
    );
  })
  .catch(function(error) { console.error("PAGINATION - Error fetching data:", error); });

  function handlePagination(prevName, nextName, prevLink, nextLink) {
    function createLink(type, name, link, useTitle) {
      return link ? 
        '<a href="' + link + '" class="item-pagination-link item-pagination-link--' + type + '">' +
          (type === 'prev' ? 
            '<div class="item-pagination-icon">' +
              '<svg class="caret-left-icon--small" viewBox="0 0 9 16">' + PREV_SVG + '</svg>' +
            '</div>' +
            '<span class="pagination-title-wrapper">'
          : '<span class="pagination-title-wrapper">') +
          '<div class="visually-hidden">' + (type === 'prev' ? 'Prev' : 'Next') + '</div>' +
          '<div class="item-pagination-prev-next">' + (type === 'prev' ? 'Prev' : 'Next') + '</div>' +
          '<h2 class="item-pagination-title">' + (useTitle ? name : (type === 'prev' ? 'Prev' : 'Next')) + '</h2>' +
        '</span>' +
        (type === 'next' ? 
          '<div class="item-pagination-icon">' +
            '<svg class="caret-right-icon--small" viewBox="0 0 9 16">' + NEXT_SVG + '</svg>' +
          '</div>'
        : '') +
      '</a>'
      : '';
    }

    if (window.nextPrevConfig.enableTopPagination) {
      var paginationHtml = 
        '<div class="ProductItem-next-prev-codeandtonic">' +
          (prevLink ? '<a class="codetonic-product-pagination-link-simple codetonic-prev" href="' + prevLink + '">' + (window.nextPrevConfig.topPaginationUseTitle ? prevName : 'Prev') + '</a>' : '') +
          (prevLink && nextLink ? '<span class="ProductItem-nav-pagination-separator ProductItem-nav-pagination-separator--hasPrev ProductItem-nav-pagination-separator--hasNext"></span>' : '') +
          (nextLink ? '<a class="codetonic-product-pagination-link-simple codetonic-next" href="' + nextLink + '">' + (window.nextPrevConfig.topPaginationUseTitle ? nextName : 'Next') + '</a>' : '') +
        '</div>';
      var productNav = document.querySelector('.product-nav');
      if (productNav) productNav.insertAdjacentHTML('beforeend', paginationHtml);
    }

    if (window.nextPrevConfig.enableBottomPagination) {
      var fullPaginationHtml = 
        '<section class="item-pagination item-pagination--prev-next" data-collection-type="portfolio-grid-overlay" data-controller="ItemPagination" data-controllers-bound="ItemPagination">' +
          createLink('prev', prevName, prevLink, window.nextPrevConfig.bottomPaginationUseTitle) +
          createLink('next', nextName, nextLink, window.nextPrevConfig.bottomPaginationUseTitle) +
        '</section>';
      var productItem = document.querySelector('div.product-detail');
      if (productItem) productItem.insertAdjacentHTML('afterend', fullPaginationHtml);
    }
    
  }
});
</script>