Shopify collection 排序方法无效

Question

Shopify 建议使用此代码在其 collection 页面上制作 "Sort By" 下拉列表：https://gist.github.com/carolineschnapp/11352987

我正在使用 Shopify Slate 构建一个新主题，但这段代码对我不起作用。幸运的是，另一位开发人员对此进行了评论并提供了更好的代码。这是代码：

document.querySelector('#sort-by').addEventListener('change', function() {
  const urlSearchParams = new URLSearchParams(window.location.search);
  urlSearchParams.set(this.name, this.value);
  window.location = `?${urlSearchParams}`;
});

不幸的是，由于它没有将 "sort_by" 添加到搜索参数，所以这并没有奏效。我将此代码的 second-last 行修改为如下所示：

window.location = `?sort_by${urlSearchParams}`;

这行得通，但每当我尝试更改参数时，页面都会不断重新加载并将多个 "sort_by" 添加到 URL （例如？sort_bysort_by=price-descending&=title-ascending)

有什么方法可以更改此代码，使 "sort_by" 在 URL 中只出现一次？

Answer 1

如果将 window.location.search 换成：

会发生什么

window.location.search.indexOf("sort_by") > -1 
? window.location.search.replace(/sort_by/gi,"")
: window.location.search

所以它变成：

new URLSearchParams(
 window.location.search.indexOf("sort_by") > -1 
    ? window.location.search.replace(/sort_by/gi,"")
    : window.location.search
)

Shopify collection 排序方法无效

Shopify collection sort method not working

javascript

sorting

shopify