Các tag Interation được sử dụng để chạy một khối mã lặp đi lặp lại.

for

Thi hành một khối mã lặp đi lặp lại. Để xem một danh sách đầy đủ các thuộc tính sẵn có bên trong một vòng lặp for, hãy xem Vòng lặp for (Đối tượng)

Vòng lặp chỉ có thể xuất ra tối đa 50 kết quả mỗi trang. Trong những trường hợp có nhiều hơn 50 kết quả, sử dụng tag paginate để chia chúng thành nhiều trang 

Đầu vào

{% for product in collection.products %}

      {{ product.title }}

{% endfor %}

Đầu ra

hat shirt pants

Các tham số của for

giới hạn

Thoát khỏi vòng lặp tại một chỉ số nhất định

Đầu vào

<!-- if array = [1,2,3,4,5,6] -->
  {% for item in array limit:2 %} 
    {{ item }}
  {% endfor %} 

 Đầu ra

1 2 

Offset  - Độ lệch

Khởi động vòng lặp tại một chỉ số nhất định

Đầu vào

<!-- if array = [1,2,3,4,5,6] -->
  {% for item in array offset:2 %} 
    {{ item }} 
  {% endfor %} 

 Đầu ra

3 4

Range - Biên độ

 

Xác định biên độ của vòng lặp. Biên độ này có thể được xác định bởi cả biến chữ và biến số

Đầu vào

{% assign num = 4 %}
{% for i in (1..num) %}
  {{ i }} 
{% endfor %}
 
{% for i in (3..5) %}
  {{ i }} 
{% endfor %}

 Đầu ra

1 2 3 4
3 4 5

reversed - Đảo ngược

Đảo ngược thứ tự của vòng lặp

Đầu vào

<!-- if array = [1,2,3,4,5,6] -->
{% for item in array reversed %} 
    {{ item }} 
{% endfor %} 

 Đầu ra

6 5 4 3 2 1

Cycle - Chu trình

Vòng lặp xuyên suốt một nhóm các chuỗi và xuất chúng theo trình tự chuyển thành các tham số. Mỗi lần cycle được gọi, chuỗi tiếp theo sẽ được chuyển thành một tham số để xuất ra.

 cycle phải được sử dụng bên trong khối mã của vòng lặp for

Đầu vào

{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %} 

 Đầu ra

one
two
three
one

Uses for cycle include:

Những ứng dụng dùng cho cycle bao gồm

·         áp dụng vào các lớp lẻ/chẵn cho các hàng trong table

·         áp dụng vào một lớp riêng biệt cho hình ảnh cuối cùng trong một hàng

Tham số của cycle

cycle chấp nhận một tham số được gọi là cycle group trong trong trường hợp bạn cần nhiều khối mã cycle trong một template. Nếu không có tên nào được cung cấp cho cycle group, nó sẽ được xem như gọi nhiều tham số giống nhau trong một nhóm.

Ví dụ dưới đây chỉ ra tại sao những cycle group là cần thiết khi có quá nhiều  nhóm chu trình cá biệt trong khối cycle .

<ul>

{% for product in collections.collection-1.products %}
  <li{% cycle ' style="clear:both;"', '', '', ' class="last"' %}>
    <a href="{{ product.url | within: collection }}">
      <img src="{{ product.featured_image.src | product_img_url: 'medium' }}" alt="{{ product.featured_image.alt }}" />
    </a>
  </li>
{% endfor %}
</ul>
<ul>
{% for product in collections.collection-2.products %}
  <li{% cycle ' style="clear:both;"', '', '', ' class="last"' %}>
    <a href="{{ product.url | within: collection }}">
      <img src="{{ product.featured_image.src | product_img_url: 'medium' }}" alt="{{ product.featured_image.alt }}" />
    </a>
  </li>
{% endfor %}
</ul>

Trong khối mã phía trên, nếu bộ sưu tập đầu tiên chỉ có hai sản phẩm, thì vòng lặp trong bộ sưu tập thứ hai sẽ tiếp tục cycle nơi bộ sưu tập thứ nhất kết thúc. Điều này sẽ dẫn đến kết quả đầu ra không mong muốn như sau:

<ul style="clear:both">
  <li></li>
</ul>
<ul>
  <li></li>
  <li class="last"></li>
  <li style="clear:both"></li>
  <li></li>
</ul>

Để tránh điều này, cycle groups được sử dụng cho mỗi khối cycle như sau:

<ul>
{% for product in collections.collection-1.products %}
  <li{% cycle 'group1': ' style="clear:both;"', '', '', ' class="last"' %}>
    <a href="{{ product.url | within: collection }}">
      <img src="{{ product.featured_image.src | product_img_url: "medium" }}" alt="{{ product.featured_image.alt }}" />
    </a>
  </li>
{% endfor %}
</ul>
<ul>
{% for product in collections.collection-2.products %}
  <li{% cycle 'group2': ' style="clear:both;"', '', '', ' class="last"' %}>
    <a href="{{ product.url | within: collection }}">
      <img src="{{ product.featured_image.src | product_img_url: "medium" }}" alt="{{ product.featured_image.alt }}" />
    </a>
  </li>
{% endfor %}
</ul>

Với khối mã bên trên, hai khối cycle độc lập với nhau. Kết quả được trình bày bên dưới:

<ul>
  <li style="clear:both"></li>
  <li></li>
</ul>
<!-- new cycle group starts! -->
<ul>
  <li style="clear:both"></li>
  <li></li>
  <li></li>
  <li class="last"></li>
</ul>

 tablerow

Tạo ra một cấu trúc <table> HTML. Được đặt trong những tag HTML mở đầu là <table> và kết thúc bởi </table>. Để biết danh sách đầy đủ các thuộc tính khả dụng bên trong một vòng lặp tablerow,  vui lòng xem tablerow (Đối tượng).

Đầu vào

<table>

{% tablerow product in collection.products %}

  {{ product.title }}

{% endtablerow %}

</table>

Đầu ra

<table>

    <tr class="row1">

        <td class="col1">

            Cool Shirt

        </td>

        <td class="col2">

            Alien Poster

        </td>

        <td class="col3">

            Batman Poster

        </td>

        <td class="col4">

            Bullseye Shirt

        </td>

        <td class="col5">

            Another Classic Vinyl

        </td>

        <td class="col6">

            Awesome Jeans

        </td>

    </tr>

</table>

Tham số của tablerow

cols

Xác định có bao nhiêu cột trong một bảng.

Đầu vào

{% tablerow product in collection.products cols:2 %}

  {{ product.title }}

{% endtablerow %}

Output

<table>

    <tr class="row1">

        <td class="col1">

            Cool Shirt

        </td>

        <td class="col2">

            Alien Poster

        </td>

    </tr>

    <tr class="row2">

        <td class="col1">

            Batman Poster

        </td>

        <td class="col2">

            Bullseye Shirt

        </td>

    </tr>

    <tr class="row3">

        <td class="col1">

            Another Classic Vinyl

        </td>

        <td class="col2">

            Awesome Jeans

        </td>

    </tr>

</table>    

limit - Giới hạn

Thoát khỏi tablerow sau một chỉ số nhất định.

{% tablerow product in collection.products cols:2 limit:3 %}

  {{ product.title }}

{% endtablerow %}

offset - độ trễ

Bắt đầu một tablerow sau một chỉ số nhất định.

{% tablerow product in collection.products cols:2 offset:3 %}

  {{ product.title }}

{% endtablerow %}

range - Phạm vi

Xác định phạm vi vòng lặp. Phạm vi có thể được xác định bằng cả biến chữ lẫn biến số .

<!--variable number example-->

 

{% assign num = 4 %}

<table>

{% tablerow i in (1..num) %}

  {{ i }}

{% endtablerow %}

</table>

 

<!--literal number example-->

 

<table>

{% tablerow i in (3..5) %}

  {{ i }}

{% endtablerow %}

</table>