Question

我是液体新品（shopify）

我尝试在一个循环中按特定数量的产品循环一个集合，但我的输出是错误的。要理解，例如：

输出：1-6的第一个产品，然后是7-12 ,.但它只显示了这些系列的前6个产品。有人可以在下面的代码中帮我一点吗？以下是我的代码：

    {% assign product_x_page = 6 %}
{% assign product_number_in_collection = collection.all_products_count %}
{% comment %}{{ product_number_in_collection }}{% endcomment %}
{% assign number_of_pag_cycle = product_number_in_collection | divided_by: product_x_page %}
{% comment %}{{ number_of_pag_cycle }}{% endcomment %}

{% assign image_size = 'compact' %}
{% assign all_collection = 'related' %}
{% assign heading = 'You may also like' %}

{% if collection and collection.products_count > 1 %}
<h3 align="center">{{ heading }} of {{ collection.title }}</h3>
<br>

<div class="slickslide_container" role='toolbar'>  

{% assign ciclo = 0 %}

{% for loops in (1..number_of_pag_cycle) %}  

  <div> 

    <ul class="related-products">

    {% assign ciclo = ciclo | plus: 1 %}
    {{ciclo}}



    {% for product in collection.products %}

          <li>
            <div class="image">
              <a href="{{ product.url | within: collection }}" title="{{ product.title | escape }}">
                {{ product.featured_image | product_img_url: image_size | img_tag }}
              </a>
            </div>
            <h4><a href="{{ product.url }}" title="{{ product.title | escape }}">{{ product.title }}</a></h4>
            <span class="money">{{ product.price | money }}</span>
          </li>

    {% endfor %}
    </ul>   
  </div> 

{% endfor %}  


  {% endif %}
</div>

Answer 1

您可以使用limit参数查询6个第一个结果，如下所示：

{% for product in collection.products limit:6 %}

您还可以使用名为offset的其他参数查询产品7到12，如下所示：

{% for product in collection.products offset:6 %}

查看Shopify liquid docs的迭代代码。

如果您的目标是每页显示6个结果，请查看pagination object。

Answer 2

这里是我要求与slick.js一起使用的代码：

{% assign products_x_page = 6.0 %}
{% assign page_offset = 0 %}

{% assign product_number_in_collection = collection.products.size %}
{% comment %}{{ product_number_in_collection }}{% endcomment %}
{{ product_number_in_collection }}<br><br>

{% assign number_of_pag_cycle = product_number_in_collection | divided_by: products_x_page  %}
{% assign number_of_pag_cycle = number_of_pag_cycle | ceil %}
{% comment %}{{ number_of_pag_cycle }}{% endcomment %}
{{ number_of_pag_cycle }}


{% assign image_size = 'compact' %}
{% assign all_collection = 'related' %}
{% assign heading = 'You may also like' %}



{% if collection and collection.products_count > 1 %}

<h3 align="center">{{ heading }} of {{ collection.title }}</h3>
<br>

<div class="slickslide_container" role='toolbar'>  

{% assign ciclo = 0 %}

{% for loops in (1..number_of_pag_cycle) %} 

  {% if forloop.first == false %}
        {% assign page_offset = page_offset |plus: products_x_page %}
  {% endif %}
  {% comment %}{{page_offset}}{% endcomment %}

  <div> 

    <ul class="related-products">

    {% assign ciclo = ciclo | plus: 1 %}
    {% comment %}{{ciclo}}{% endcomment %}

    {% assign product_num = 0 %}


    {% for product in collection.products offset: page_offset %}

        {% assign product_num = product_num | plus: 1 %}


          <li>
            <div class="image">{% comment %}{{product_num}}{% endcomment %}
              <a href="{{ product.url | within: collection }}" title="{{ product.title | escape }}">
                {{ product.featured_image | product_img_url: image_size | img_tag }}
              </a>
            </div>
            <h4><a href="{{ product.url }}" title="{{ product.title | escape }}">{{ product.title }}</a></h4>
            <span class="money">{{ product.price | money }}</span>
          </li>

        {% if product_num == products_x_page %}
            {% break %}         
        {% endif %}

    {% endfor %}
    </ul>   
  </div> 

{% endfor %}  



</div>
{% endif %}  

<style type="text/css">
.related-products { list-style-type:none }
{% case image_size %}
{% when 'small' %}
.related-products * { font-size:12px; text-align:center; padding:0 }
.related-products h4  { border:none; margin:10px 0 0 0; line-height:1.3 }
.related-products div.image { height:100px }
.related-products li { float:left; width:120px; height:160px; margin-right:20px }
{% when 'compact' %}
.related-products * { font-size:13px; text-align:center; padding:0 }
.related-products h4  { border:none; margin:5px 0 0 0; line-height:1.5 }
.related-products div.image { height:160px }
.related-products li { float:left; width:220px; height:220px; margin-right:0px }
{% when 'medium' %}
.related-products * { font-size:14px; text-align:center; padding:0 }
.related-products h4  { border:none; margin:10px 0 0 0; line-height:1.8 }
.related-products div.image { height:240px }
.related-products li { float:left; width:260px; height:300px; margin-right:25px }
{% endcase %}
.related-products { overflow:hidden }
.related-products span.money { font-size:0.8em }
.related-products li:last-child { margin-right:0 }
</style>



  <script type='text/javascript'>
    $(function(){
      $('div.slickslide_container').slick({
        dots: true,
        infinite: false,
        speed: 300,
        slidesToShow: 1,
        adaptiveHeight: true
      });      
    });
  </script>

循环收集与选择shopify的特定数量的产品

2 个答案: