Wrap blog code in code that listens for Ajax page change.

ajax-friendly-code.html

<script>
document.addEventListener('DOMContentLoaded', init);
window.addEventListener('mercury:load', init);

function init(){
  // Blog Pagination Links Code goes here
  document.querySelectorAll('.BlogList-pagination-link-label').forEach(function(paginationLink) {
    if (paginationLink.textContent == "Newer") {
      paginationLink.textContent = "More"; // Customize "Newer" text here
      } else {
      paginationLink.textContent = "More"; // Customize "Older" text here
    }
  })
  
}
</script>

Hello Heather,

This code snippet is gold when having Ajax enabled and helped me solve my problem after hours of trial and error 🥇

I tried it on a default Brine template to change the 'shopping cart' label in the checkout page and that's working. You can see this on https://chihuahua-tomato-t9b4.squarespace.com/cart (pw: covid19)

However, when I'm using the exact same code on the Hester template, which is basically the 7.1 version of Brine, it's not working . You can see this on https://maisonblanchegeel.squarespace.com/cart (pw: covid19)

Both templates have the same HTML structure and are using the same CSS classes so I'm very confused why there's a difference. Got any insight on that?

Thanks in advance for your reply!