Shopsonのコレクションを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 %} 

その後ベストセラーが最も売れているオブジェクトなどの製品の配列になります。

私はすべての製品のコレクションを作成し、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>