Ajax-在Shopify/Liquid中按价格过滤

Question

我有一个集合，我希望能够按价格筛选(而不是排序(产品。我不想使用应用程序。

我知道这个问题在shopify中添加价格过滤器？然而，这不是我想要的；我希望能够选择任何数字组合，例如在4美元到20美元之间，或7美元到30美元之间，等等，用户可以更改，而不仅仅是预定的范围。我在Shopify网站上看到过它，因此知道它是可以做到的。我相信这将需要ajax调用。

一个答案对我自己和许多其他人都非常有帮助，因为这似乎是一个非常基本的要求，在SO/Shopify论坛上仍然没有得到回答，即使只是一个一般说明，而不是任何特定的代码。作为参考，我使用默认的(首次亮相(主题。

Answer 1

我的项目与您的项目相似，请填写下面的空白。

创建一个集合模板collection.price-filter.liquid
使用ajax获取产品json。当然有250的限制。如果你有超过250个，那么需要先使用应用程序过滤结果。或者，只使用多个请求。

<script>
var allProducts;
var filteredProducts = [];
var activeFilter = [];
$(document).ready(function(){
var url = '{{collection.url}}/products.json?limit=250';
const res = getProducts(url);
});
function getProducts(url){
$.ajax({
type: 'GET',
url: url,
success: function(res){ 
allProducts = res.products;
filterProducts(allProducts);
},
error: function(status){
alert(status);
}
});
}
</script>

过滤产品以填充filteredProducts阵列对象

//loop through the products, create categories ($20-$40, $40-$60, etc.)
function filterProducts(products){
var cat1 = '20-40', cat2 = '40-60';
var currentCat;
products.forEach(function (i, j){   
if (i.price > 20 && i.price <= 40){
currentCat = cat1;
else if (i.price > 40 && i.price <= 60) {
currentCat = cat2;
}
if(filteredProducts[currentCat]){
filteredProducts[currentCat].push(i);
}
else {
filteredProducts[currentCat] = [i]
}
};
});
}

生成filteredProducts后，收听用户对checkbox的选择，将selection添加到一个名为activeFilter的数组中

function getActiveFilter(){
$('#myFilter').each(function(){
if($(this).is(':checked')){
//add to activeFilter
}
});
}

由filteredProducts和activeFilter生成resultFilter，消除共同结果；

function resultFilter(){
var result = [];
activeFilter.forEach(function (i, value){
Object.keys(value).forEach(function(j, product){
//add to result
};
});
}

使用handlers.js 构建/显示产品结果

<script id="ProductTemplate" type="text/x-handlebars-template">
{% raw %}
{{#product}}
<div class="col">
<a href="/products/{{productHandle}}" class="grid__image">
<div class="product__image-wrapper" style="background-color: white;">
<img class="no-js lazyload" width="316" height="237"
data-src="{{ featuredImg }}"
data-widths="[108, 360, 375, 414, 568, 684, 720, 732, 736, 768, 1024, 1200, 1296, 1512, 1728, 1944, 2048]"
data-aspectratio="1.33"
data-sizes="auto"
data-parent-fit="width"
alt="{{ title }}">
</div>
</a>
<p class="h5"><a href="/products/{{productHandle}}">{{ title }}</a></p>
</div>
{{/product}}
{% endraw %}
</script>

将数据插入到#container-products中，您希望在其中显示筛选后的产品。

function buildFilteredProducts(filteredProds) {
var $productContainer = $('#container-product');
$productContainer.empty();
if(filteredProds.length <= 0){
$productContainer.append('empty result');
return;
}
var products = [];
var product = {};
var data = {};
var source = $("#ProductTemplate").html();
var template = Handlebars.compile(source);
products = filteredProds.map(function(productItem) {
return product = {
id: productItem.id, 
title: decodeHtml(productItem.title),
featuredImg: responsiveImage(productItem.images[0].src),
productHandle: productItem.handle
}
});
data = {
product: products
} 
$productContainer.append(template(data)); 
}