Việc liệt kê sản phẩm, bộ sưu tập và blog posts là các thao tác thường thấy trong Shopify. Sử dụng Shopify Loop là cách tốt nhất để làm điều này thông qua ngôn ngữ Liquid.
Shopify Loop là gì?
Shopify Loop (vòng lặp) là cách ta gọi ra một tập hợp (Array) và cho chạy qua vòng lặp để thực hiện output ra hoặc xử lý để lấy một dữ liệu và tạo 1 Array mới sau khi vòng lặp hoàn tất.
Những gì có thể chạy qua vòng lặp của Shopify:
- Product
- Collection
- Blog Post
- Menu
Ngoài ra, bạn có thể tự tạo 1 danh sách array và cho nó chạy qua vòng lặp. Dưới đây, bằng ngôn ngữ Liquid, ta sẽ cùng tìm hiểu cách sử dụng các vòng lặp phổ biến và hay dùng nhất:
Sử dụng Shopify Loop như thế nào?
Cú pháp ví dụ đơn giản nhất là bạn muốn hiển thị danh sách product trong Shopify:
{% for item in array %}
{{ item }}
{% endfor %}
Gọi key và value trong Shopify Loop
Về cơ bản nó chỉ như một phương pháp tương tự như PHP Array loop. Khi bạn loop qua thì bạn có thể gọi các giá trị theo index, key, value như sau:
{% for item in hash %}
{{ item[0] }}: {{ item[1] }}
{% endfor %}
{{ item[0] }}sẽ là key{{ item[1] }}sẽ là value
Giới hạn số lần loop
Sử dụng (1..4) chẳng hạn để giới hạn số lượt loop sẽ chạy. Hoặc sử dụng items.quantity để lấy được giá trị số item trong Array.
# if items.quantity is 4...
{% for i in (1..items.quantity) %}
{{ i }}
{% endfor %}
# results in 1,2,3,4
Sử dụng các giá trị trong Shopify Loop
Các bạn có thể tra cứu cách sử dụng các biến bên dưới ở đây.
forloop.length # => length of the entire for loop forloop.index # => index of the current iteration forloop.index0 # => index of the current iteration (zero based) forloop.rindex # => how many items are still left? forloop.rindex0 # => how many items are still left? (zero based) forloop.first # => is this the first iteration? forloop.last # => is this the last iteration?
Các giá trị tuỳ biến
Các giá trị tuỳ biến bên dưới bạn có thể tra cứu tại đây.
Nếu bạn muốn giới hạn số lượng item sẽ hiển thị (sử dụng limit) và bỏ qua các giá trị ban đầu (sử dụng offset):
# array = [1,2,3,4,5,6]
{% for item in array limit:2 offset:2 %}
{{ item }}
{% endfor %}
# results in 3,4
Đảo ngược thứ tự (đi ngược lại từ dưới lên trên)
{% for item in collection reversed %} {{item}} {% endfor %}
Hiển thị chỉ khi có giá trị, cách viết này thú vị hơn bạn kiểm tra {%if item %} đấy:
# items => []
{% for item in items %}
{{ item.title }}
{% else %}
There are no items!
{% endfor %}
Đặt biến trước và sử dụng trong vòng lặp
Cách này hay sử dụng khi cần gán so sánh một giá trị nào đó cần input trong điều kiện của loop.
{% assign name = 'upcoming' %}
{% for t in collections.tags %}
{% if t == name %}
<span class="tag">Upcoming!</span>
{% endif %}
{% endfor %}
Các vòng lặp phổ biến và cơ bản
Danh sách link trong Menu Link của Shopify
{% for link in linklists['brands'].links %}
{{ link.object }}
{% endfor %}
Danh sách sản phẩm (thường trong 1 collection nào đó)
{% for product in collection.products %}
{{ product.title }}
{% endfor %}
Output bảng HTML trong vòng loop
Sử dụng tablerow, bạn có thể output luôn cả các thẻ table HTML như <td> hay <tr>:
<table>
{% tablerow product in collection.products %}
{{ product.title }}
{% endtablerow %}
</table>
Sử dụng paginate để giới hạn số item trong các template. (Xem thêm về paginate nhé!)
{% paginate collection.products by 24 %}
{% if collection.products.size > 0 %}
{% for product in collection.products %}
Loop through products...
{% endfor %}
{% endif %}
{% endpaginate %}
Lặp danh sách các bài viết trong blog (lưu ý cần có blog.handle nhé, xem thêm ở đây)
{% for article in blogs[blog.handle].articles limit: 4 %}
{{ article.title }}
{% endfor %}
Các trường hợp xử lý Shopify Loop nâng cao
Trong một số trường hợp, bạn cần xử lý các loại dữ liệu phức tạp hơn trong vòng forloop Shopify. Dưới đây là một số tình huống mà nhiều Developer có thể chưa sử dụng nhiều:
Xây dựng biến mới trong vòng lặp
Biến mới này có thể được tạo ra từ các giá trị của item.xxx trong vòng lặp. Nên sử dụng capture để code sạch và không lặp lại code thừa nhiều lần.
{% for item in items %}
{% capture attribute_name %}{{ item.title | handleize }}-{{ i }}-color{% endcapture %}
{{ attribute_name }}
{% endfor %}
So sánh và loại bỏ các item trùng nhau trong vòng lặp
Nhiều dữ liệu có thể trùng nhau trong vòng lặp, ví dụ các bài viết có chung một blog category thì chỉ hiển thị bài đầu tiên của mỗi category chẳng hạn.
Ví dụ về cách viết này như sau:
{% assign typeList = ',' %}
{% for product in collections['accessories'].all_products %}
{% capture compareType %},{{product.type}},{% endcapture %}
{% if typeList contains compareType %}{% else %}
{{ product.title }}
{% capture tempList %}{{typeList}}{{product.type}},{% endcapture %}
{% assign typeList = tempList %}
{% endif %}
{% endfor %}
Giám đốc tại Công ty CP CODE TỐT. Quản lý ngôn ngữ bản địa tiếng Việt tại WordPress. Là tác giả chính tại codetot.net, Khôi muốn ghi lại một sốvấn đề kỹ thuật trong quá trình phát triển các dự án website với khách hàng.
