Shopify Ajaxinate无限滚动应用筛选后失效问题求助

问题场景 #

我为Shopify店铺编写了以下无限滚动代码：

{% if template contains 'collection' %}
<script>
  document.addEventListener("DOMContentLoaded", function() {
    var endlessScroll = new Ajaxinate({
      container: '#product-grid',
      pagination: '#Huratips-Pagination',
      loadingText: `<div class="loading" style="text-transform: uppercase; padding-bottom: 40px; padding-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;">
              <span style="height: 30px; width: 30px; background-repeat: no-repeat; background-size: contain; display: inline-block; background-image: url(https://cdn.shopify.com/s/files/1/0691/4221/6959/files/loader-black.svg?v=1712406692);"></span>
              <span>Loading more products</span>
            </div>`
    });
  });
</script>
{% endif %}

但应用排序或筛选后，无限滚动功能失效。推测原因是Spotlight主题在排序/筛选时会重新加载.product-grid-container下的内容并替换整个HTML，导致#product-grid被重置，无限滚动停止工作。

解决办法 #

方法1：监听主题自定义事件重新初始化 #

Spotlight主题在完成筛选/排序的AJAX更新后，会触发collection:rendered这类自定义事件。我们可以监听该事件，在DOM更新后重新初始化无限滚动：

修改后的代码：

{% if template contains 'collection' %}
<script>
  // 封装初始化逻辑，方便重复调用
  function initEndlessScroll() {
    // 先销毁已有实例，避免重复绑定
    if (window.endlessScroll) {
      window.endlessScroll.destroy();
    }
    window.endlessScroll = new Ajaxinate({
      container: '#product-grid',
      pagination: '#Huratips-Pagination',
      loadingText: `<div class="loading" style="text-transform: uppercase; padding-bottom: 40px; padding-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;">
              <span style="height: 30px; width: 30px; background-repeat: no-repeat; background-size: contain; display: inline-block; background-image: url(https://cdn.shopify.com/s/files/1/0691/4221/6959/files/loader-black.svg?v=1712406692);"></span>
              <span>Loading more products</span>
            </div>`
    });
  }

  // 页面首次加载完成初始化
  document.addEventListener("DOMContentLoaded", initEndlessScroll);

  // 监听筛选/排序后的DOM更新事件
  document.addEventListener('collection:rendered', initEndlessScroll);
</script>
{% endif %}

方法2：用MutationObserver监听DOM变化 #

如果主题没有提供现成的自定义事件，可使用MutationObserver监听.product-grid-container的DOM修改，当#product-grid被重新渲染后自动初始化：

{% if template contains 'collection' %}
<script>
  function initEndlessScroll() {
    if (window.endlessScroll) {
      window.endlessScroll.destroy();
    }
    const productGrid = document.getElementById('product-grid');
    if (!productGrid) return;
    window.endlessScroll = new Ajaxinate({
      container: '#product-grid',
      pagination: '#Huratips-Pagination',
      loadingText: `<div class="loading" style="text-transform: uppercase; padding-bottom: 40px; padding-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;">
              <span style="height: 30px; width: 30px; background-repeat: no-repeat; background-size: contain; display: inline-block; background-image: url(https://cdn.shopify.com/s/files/1/0691/4221/6959/files/loader-black.svg?v=1712406692);"></span>
              <span>Loading more products</span>
            </div>`
    });
  }

  document.addEventListener("DOMContentLoaded", function() {
    initEndlessScroll();

    // 监听.product-grid-container的子元素变化
    const gridContainer = document.querySelector('.product-grid-container');
    if (gridContainer) {
      const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
          if (mutation.addedNodes.length > 0 && document.getElementById('product-grid')) {
            initEndlessScroll();
          }
        });
      });

      observer.observe(gridContainer, { childList: true, subtree: true });
    }
  });
</script>
{% endif %}

调试提示 #

• 打开浏览器开发者工具（F12），切换到「控制台」标签，查看排序/筛选操作是否有报错
• 若方法1的collection:rendered事件无效，可在「元素」标签选中.product-grid-container，右键选择「监听DOM变化」→「子树修改」，触发筛选后查看控制台输出的事件名，替换代码中的事件名

内容的提问来源于stack exchange，提问作者Bhargav Chaniyara