按畅销商品对 Shopify 集合进行排序以在 json 中使用

Question

我想遍历商店中最畅销的产品并将它们添加到 Javascript 对象中。

类似这样的：

<script>
  var bestSelling = [];
  {% assign all = collections.all %}
  {% assign best_selling = all.products | sort: 'best-selling' %}

  {% for product in best_selling %}
    var thisProduct = {
      "handle": "{{ product.handle }}",
      "id": "{{ product.id }}",
      "url": "{{ product.url }}",
      "image": "{{ product.featured_image | img_url: 'x700' }}",
      "price": "{{ product.price | money }}",
      "title": "{{ product.title }}",
    }
    bestSelling.push(thisProduct);
  {% endfor %}

那么 bestSelling 将是一系列产品作为最畅销的对象。

我知道我可以创建所有产品的集合并通过在 shopify 管理面板中畅销来过滤它们，但我试图避免这条路线。我真的只是在寻找一种对现有集合进行排序的方法。

那么在液体中，我如何通过畅销来过滤收藏？

Answer 1

现在您需要遍历 JavaScript 数组，为每个数组的值创建元素。

<script>
    function renderProducts(bestSelling, container) {

        $(container).fadeOut(function () {
            $(container).empty();
            bestSelling.forEach(function (product, i, bestSelling) {
                if (product.variants.length > 1) {
                    var price = '<div class="ajax-view-item__meta"><span class="ajax-product-price__price">$ ' + product.variants[0].price + ' | ' + product.variants.length + ' colors</span></div>';
                } else {
                    var price = '<div class="ajax-view-item__meta"><span class="ajax-product-price__price">$ ' + product.variants[0].price + '</span></div>';
                }
                var h4 = '<div class="h4 ajax-item__title">' + product.title + '</div>';
                var link = '<a style="display: block;" href="/products/' + product.handle + '"> ' + h4 + price + '</a>';
                var quickViewLink = '<a class="quick-link" href="#"> Quick View </a>';

                if (product.images.length > 1) {
                    images = product.images;
                    img = [];
                    images.forEach(function (image, j, images) {
                        img.push('<img class="grid-view-item__image ajax-img" src="' + image.src + '">');
                    });
                    img = img.join(' ');
                } else {
                    img = '<img class="grid-view-item__image ajax-img" src="' + product.images[0].src + '">';
                }
                imgContainer = '<div class="grid-view-item__link grid-view-item__image-container center slider">' + img + '</div>';
                item = '<div class="ajax-grid-view-item text-center">' + imgContainer + link + quickViewLink + '</div>';
                res = '<div id="product-' + product.id + '" class="grid__item small--one-half medium-up--one-third">' + item + '</div>';

                jQuery(container).append(res);
            });
            $(container).fadeIn(25, function () {
                $('.grid-view-item__image-container').not('.slick-initialized').slick({
                    centerMode: true,
                    centerPadding: '60px',
                    slidesToShow: 1,
                    arrows: false,
                    autoplay: true,
                    responsive: [
                        {
                            breakpoint: 768,
                            settings: {
                                arrows: false,
                                centerMode: true,
                                centerPadding: '40px',
                                slidesToShow: 3
                            }
                        },
                        {
                            breakpoint: 480,
                            settings: {
                                arrows: false,
                                centerMode: true,
                                centerPadding: '40px',
                                slidesToShow: 1
                            }
                        }
                    ]
                });
            });
        });
    }
</script>