Ajax - 按價格過濾 Shopify / 液體

Question

我有一個集合，我希望能夠按價格過濾（而不是排序）產品。 我不想使用應用程序。

我知道這個問題Add price filter in 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
        };
    });
}

使用handlebars.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)); 
    }