Javascript 按畅销书对Shopify收藏进行排序，以便在json中使用

我想循环浏览商店中最畅销的产品，并将它们添加到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 %}

那么，畅销书将是一系列作为最畅销物品的产品

我知道我可以创建一个所有产品的集合，并通过shopify管理面板中的畅销书对其进行筛选，但我正试图避免这种做法。我真的只是在寻找一种对现有收藏进行排序的方法

---

那么，在liquid中，我如何根据畅销书筛选集合呢？

现在，您需要在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>