如何用JavaScript修改Shopify分页URL并解析collection.url

问题原因 #

你在JS里写的{{ collection.url }}是Shopify的Liquid模板语法，只有在Shopify的模板文件（如collection.liquid、自定义section等）中才会被解析成实际的集合路径，如果把这段JS放在独立的静态.js文件里，Shopify不会处理Liquid变量，导致它直接以字符串形式输出。

解决方案 #

方案1：将JS代码直接嵌入Shopify模板文件 #

把你的JS代码直接写在collection模板（或对应的section文件）中，这样Liquid变量会被正常解析：

document.addEventListener('DOMContentLoaded', function() {
  var paginationLinks = document.querySelectorAll('.pagination a');
  // 这里的{{ collection.url }}会被Shopify解析为/collections/new这类路径
  var collectionUrl = '{{ collection.url }}';

  paginationLinks.forEach(function(link) {
    var pageUrl = link.getAttribute('href');
    // 更可靠的页码提取方式：用URL对象解析查询参数
    var urlObj = new URL(pageUrl);
    var pageNumber = urlObj.searchParams.get('page');
    
    if (pageNumber) {
      link.setAttribute('href', collectionUrl + '/' + pageNumber);
    }
  });
});

注意：这段代码必须放在Shopify后台的模板/section编辑页面中，不能放在上传的独立JS文件里。

方案2：用HTML属性传递集合路径（适合独立JS文件） #

如果一定要用独立的JS文件，先在collection模板里添加一个隐藏元素，把解析后的集合路径存到data属性中：

<!-- 放在collection模板的<body>内任意位置 -->
<span id="collection-path" data-path="{{ collection.url }}" style="display: none;"></span>

然后在独立JS文件中读取这个属性的值：

document.addEventListener('DOMContentLoaded', function() {
  var paginationLinks = document.querySelectorAll('.pagination a');
  var collectionPathEl = document.getElementById('collection-path');
  var collectionUrl = collectionPathEl ? collectionPathEl.dataset.path : '';

  if (!collectionUrl) return;

  paginationLinks.forEach(function(link) {
    var pageUrl = link.getAttribute('href');
    var urlObj = new URL(pageUrl);
    var pageNumber = urlObj.searchParams.get('page');
    
    if (pageNumber) {
      link.setAttribute('href', collectionUrl + '/' + pageNumber);
    }
  });
});

额外注意事项 #

• 确保在使用{{ collection.url }}的模板上下文里，collection对象是存在的——比如在collection专属模板中，这个对象默认可用；如果是在其他页面调用集合数据，需要先通过Liquid获取对应的collection变量。
• 用URL.searchParams.get('page')提取页码比substring更可靠，能避免URL中存在其他查询参数时出错的情况。

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