Sort a Shopify collection by best selling for use in json

Question

I want to loop over the best selling products in a store and add them to an Javascript object.

Something like this:

<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 %}

Then bestSelling would be an array of products as objects that are the best selling.

I know that I can create a collection of all products and filter them by bestselling in the shopify admin panel, but I am trying to avoid this route. I am really just looking for a way to sort an existing collection.

So in liquid how can I filter a collection by best selling?

Answer 1

Now you need to loop over your JavaScript array, create element for each array's value.

<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>