Cyberdave's CMS Detail Popup Modal only applying to first 100 collection items

Design help Custom code
1

This solution for pulling product pages into a modal is working great. (Much thanks, @cyberdave !) Except that the solution only binds to the first 100 products (per Webflow pagination). I’m using Jetboost to load more (60 at a time), so items 101-120 on the first “#view-more” click are just going straight to the product page, rather loading the modal, & the same thereafter. So I need some way to rebind the function to the products when “#view-more” is clicked."

Any help would be rad!

Live link: https://www.livingdead.co (products at the bottom of the home page)

Read only link: https://preview.webflow.com/preview/livingdead?utm_medium=preview_link&utm_source=designer&utm_content=livingdead&preview=a033481fd84afd21f89cf14f84fa5caa&workflow=preview

Javascript below…

<!-- Product Overlay -->
<script>

$( '.product-link').click(function(event) {
 event.preventDefault()
 $('.open-modal').click();
  $('body').css('overflow', 'hidden');
var postURL = $(this).attr("href");
console.log(postURL);

loadDoc(postURL);
   
});

$('.modal-close').click(function() {
 $('body').css('overflow', 'auto');
 document.getElementById("ajax-container").innerHTML = "";
   
});

function loadDoc(postURL) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("ajax-container").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", postURL, true);
  xhttp.send();
}
</script>
1 Like
2

@cyberdave Made a couple of updates here that you might wanna consider implementing.

  1. Clearing the modal on close so that you don’t see the previous modal content flash.
  2. Binding the event to the document so that it works on collections of 100+. (Thanks, Jared.)
<!-- Product Overlay -->
<script>
$(document).on("click", ".product-link", function(event) {
 event.preventDefault()
 $('.open-modal').click();
  $('body').css('overflow', 'hidden');
var postURL = $(this).attr("href");
console.log(postURL);

loadDoc(postURL);
   
});

$('.modal-close').click(function() {
 $('body').css('overflow', 'auto');
 document.getElementById("ajax-container").innerHTML = "";
   
});

function loadDoc(postURL) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("ajax-container").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", postURL, true);
  xhttp.send();
}
</script>
1 Like
3

Hi @jwcole, thanks so much for this update, that is awesome, I will go check out that cms popup detail showcase site and check it with this update.

That site I believe was made before the pagination feature was available, so probably why I did not have that included, this is awesome, thanks for sharing so that I can help to update my own showcase site :slight_smile:

1 Like