Thẻ - tags

Các Thẻ dùng để định nghĩa các logic để nói cho template cần phải làm gì. Các thẻ được bao bởi: {% %}. Những đoạn text bên trong các dấu này sẽ không được hiển thị.

Trong ví dụ dưới đây, thẻ if định nghĩa điều kiện thỏa mãn thì thực hiện một trong hai hành động. nếu product.available trả về true, thì giá sản phẩm được hiển thị, nếu không in ra “Tạm hết hàng”

{% if product.available %}
  Price: 100.000đ
{% else %}
  Tạm hết hàng
{% endif %}

Thẻ với tham số

Một số thẻ có thể nhận thêm tham số. Một số thẻ tham số là bắt buộc, một số thì tham số là tùy chọn. Ví dụ thẻ for có thể nhận tham số limit để thoát khỏi vòng lặp tại một vị trí cụ thể:

{% assign numbers = '1,2,3,4,5' | split: ',' %}

{% for item in numbers limit:2 -%}
  {{ item }}
{%- endfor %}

Output:
1
2

Thẻ điều kiện

Các thẻ loại điều kiện sẽ quyết định đoạn mã nào sẽ được thực hiện dựa trên các điều kiện khác nhau.

if

Thực thi một hành động nếu điều kiện là true

Cú pháp:
{% if condition %}
  action
{% endif %}

Ví dụ:

{% if product.name == 'Adidas' %}
  Sản phẩm giảm giá được biệt hôm nay "Giày Adidas"
{% endif %}

Output:
Sản phẩm giảm giá được biệt hôm nay "Giày Nike"

elsif

Sử dụng thẻ elsif để kiểm tra nhiều điều kiện khác nhau.

Ví dụ:

{% if customer.name == 'Gyo' %}
  Chào bạn Gyo!
{% elsif customer.name == 'guest' %}
  Xin chào quý khách!
{% endif %}

Output:
Xin chào quý khách!

else

Cho phép định nghĩa hành động mặc định khi không có điều kiện nào thỏa mãn.

Bạn có thể dùng thẻ else với các thẻ sau đây:

• case
• if
• unless

Cú pháp:
{% else %}
  action

Ví dụ:

{% if customer.name == 'Gyo' %}
  Chào bạn Gyo!
{% else %}
  Chào bạn!
{% endif %}

unless

Thực thi một hành động nếu điều kiện không phải là true

Cú pháp:
{% unless condition %}
  action
{% endunless %}

Ví dụ:

{% unless product.name == 'Adidas' %}
  Đây không phải là giày Adidas
{% endunless %}

Output:
Đây không phải là giày Adidas

Giống với thẻ if, bạn có thể sử dụng elsif để thêm nhiều điều kiện vào thẻ unless

case

Thực thi một hành động phụ thuộc vào giá trị của biến

Cú pháp:
{% case variable %}
  {% when first_value %}
    first_action
  {% when second_value %}
    second_action
  {% else %}
    third_action
{% endcase %}

Ví dụ:

{% assign vendor = 'Adidas' %}
{% case vendor %}
  {% when 'Adidas' %}
    Một sản phẩm của Adidas
  {% when 'Nike' %}
    Một sản phẩm của Nike
  {% else %}
    Sản phẩm này không phải của Adidas hay Nike
{% endcase %}

Output:
Một sản phẩm của Adidas

Gộp nhiều giá trị

Cú pháp:
{% case variable %}
  {% when first_value or second_value or third_value %}
    first_action
  {% when fourth_value, fifth_value, sixth_value %}
    second_action
  {% else %}
    third_action
{% endcase %}

Thẻ when có thể nhận nhiều giá trị đồng thời. Hành động sẽ được chọn khi giá trị của biến là một trong các giá trị cung cấp trong thẻ. Có thể dùng toán tử or hoặc dấu , để cấu hình

Ví dụ:

{% case product.name %}
  {% when 'Neo' or 'Ultraboost' %}
    Một sản phẩm của Adidas/Nike
  {% else %}
    Sản phẩm này không phải của Adidas
{% endcase %}

Output:
Một sản phẩm của Adidas

Thẻ HTML

Thẻ thuộc loại HTML hiển thị các phần tử HTML với thuộc tính cụ thể trên site

form

Sinh ra thẻ HTML <form>, bao gồm thẻ <input> tương ứng dùng để gửi form đến địa chỉ cụ thể.

Mỗi form trên giao diện sẽ tương ứng với một loại cụ thể. Tùy vào loại form, các tham số bổ sung có thể được yêu cầu.

Các loại form có thể:

• article_comments

• contact

• customer_register

• customer_address

• customer_login

• recover_customer_password

• reset_customer_password

• change_customer_password

• store_password

Cú pháp:
{% form 'form_type' %}
  content
{% endform %}

article_comments

Tạo form để thêm bình luận vào bài viết, sử dụng trong template article.bwt. Form yêu cầu tham số bắt buộc article

Ví dụ:

{% form "article_comments", article %}
  <!-- form content -->
{% endform %}

Output:
<form method="post" action="/posts/gao-gao/comments" id="article_comments" accept-charset="UTF-8"><input name="FormType" type="hidden" value="article_comments"/><input name="utf8" type="hidden" value="true"/>
  <!-- form content -->
</form>

contact

Tạo form liên hệ để khách hàng có thể gửi liên hệ đến chủ site.

Ví dụ:

{% form 'contact' %}
  <!-- form content -->
{% endform %}

Output:
<form method="post" action="/postcontact" id="contact" accept-charset="UTF-8"><input name="FormType" type="hidden" value="contact"/><input name="utf8" type="hidden" value="true"/>
  <!-- form content -->
</form>

customer_register

Tạo form để khách hàng có thể đăng kí tài khoản trên site, sử dụng trong template customers/register.bwt

Ví dụ:

{% form 'customer_register' %}
  <!-- form content -->
{% endform %}

Output:
<form method="post" action="/account/register" id="customer_register" accept-charset="UTF-8"><input name="FormType" type="hidden" value="customer_register"/><input name="utf8" type="hidden" value="true"/>
  <!-- form content -->
</form>

customer_address

Tạo form để khách hàng tạo mới hoặc chỉnh sửa địa chỉ đã tồn tại, sử dụng trong template customers/addresses.bwt. Form yêu cầu một tham số đặc biệt, phụ thuộc vào việc tạo mới hay chỉnh sửa cũ. Khi thêm mới địa chỉ, hãy dùng đối tượng customer.new_address. Khi chỉnh sửa hãy sử dụng một đối tượng address.

Ví dụ:

{% form 'customer_address', customer.new_address %}
  <!-- form content -->
{% endform %}

Output:
<form method="post" action="/account/addresses" id="customer_address" accept-charset="UTF-8"><input name="FormType" type="hidden" value="customer_address"/><input name="utf8" type="hidden" value="true"/>
  <!-- form content -->
</form>

customer_login

Tạo form để khách hàng có thể đăng nhập tài khoản trên site, sử dụng trong template customers/login.bwt.

Ví dụ:

{% form 'customer_login' %}
  <!-- form content -->
{% endform %}

Output:
<form method="post" action="/account/login" id="customer_login" accept-charset="UTF-8"><input name="FormType" type="hidden" value="customer_login"/><input name="utf8" type="hidden" value="true"/>
  <!-- form content -->
</form>

recover_customer_password

Tạo form để khách hàng có thể lấy lại mật khẩu tài khoản trên site, sử dụng trong template customers/login.bwt

Ví dụ:

{% form 'recover_customer_password' %}
  <!-- form content -->
{% endform %}

Output:
<form method="post" action="/account/recover" id="recover_customer_password" accept-charset="UTF-8"><input name="FormType" type="hidden" value="recover_customer_password"/><input name="utf8" type="hidden" value="true"/>
  <!-- form content -->
</form>

reset_customer_password

Tạo form để khách hàng thực hiện đặt lại mật khẩu mới, sử dụng trong template customers/reset_password.bwt

Ví dụ:

{% form 'reset_customer_password' %}
  <!-- form content -->
{% endform %}

Output:
<form method="post" action="/account/reset/9821375/42a635fe42004efe9fcc92dc5f6aaa62-1664909750" id="reset_customer_password" accept-charset="UTF-8"><input name="FormType" type="hidden" value="reset_customer_password"/><input name="utf8" type="hidden" value="true"/>
  <!-- form content -->
</form>

change_customer_password

Tạo form để khách hàng đổi mật khẩu, sử dụng trong template customers/change_password.bwt

Ví dụ:

{% form 'change_customer_password' %}
  <!-- form content -->
{% endform %}

Output:
<form method="post" action="/account/changepassword" id="change_customer_password" accept-charset="UTF-8"><input name="FormType" type="hidden" value="change_customer_password"/><input name="utf8" type="hidden" value="true"/>
  <!-- form content -->
</form>

store_password

Tạo form để nhập mật khẩu truy cập vào site đang được bảo vệ

Ví dụ:

{% form 'store_password' %}
  <!-- form content -->
{% endform %}

Output:
<form method="post" action="/password" id="store_password" accept-charset="UTF-8"><input name="FormType" type="hidden" value="store_password"/><input name="utf8" type="hidden" value="true"/>
  <!-- form content -->
</form>

Tham số của thẻ form

attribute

Cú pháp:
{% form 'form_type', attribute: string %}
  content
{% endform %}

Bạn có thể sử dụng thuộc tính HTML với tên và giá trị mong muốn

Ví dụ:

{% form "customer_login", id: 'custom-id', class: 'custom-class' %}
  <!-- form content -->
{% endform %}

Output:
<form method="post" action="/account/login" id="custom-id" accept-charset="UTF-8" class="custom-class"><input name="FormType" type="hidden" value="customer_login"/><input name="utf8" type="hidden" value="true"/>
  <!-- form content -->
</form>

Thẻ Lặp

Các thẻ loại lặp dùng để chạy đoạn mã nhiều lần.

for

Thực hiện hành động với mỗi phần tử trong mảng.

Bạn chỉ có thể có tối đa 50 lần lặp. Trong trường hợp có nhiều hơn 50 phần tử, hãy sử dụng thẻ paginate để phân thành nhiều trang.

Cú pháp:
{% for variable in array %}
  action
{% endfor %}

Ví dụ:

{% for product in collection.products %}
  {{ product.name }}
{% endfor %}

Output:
Adidas
Nike
Converse
Classic

Mỗi vòng lặp for đều liên kết với một đối tượng forloop để biểu diễn thông tin vòng lặp

Tham số của thẻ for

limit

Cú pháp:
{% for variable in array limit: number %}
  action
{% endfor %}

Bạn có thể giới hạn vòng lặp bằng tham số limit

Ví dụ:

{% for product in collection.products limit: 2 -%}
  {{ product.name }}
{%- endfor %}

Output:
Adidas
Nike

offset

Cú pháp:
{% for variable in array offset: number %}
  action
{% endfor %}

Bạn có thể chỉ định giá trị bắt đầu của vòng lặp bằng tham số offset

Ví dụ:

{% for product in collection.products offset: 2 -%}
  {{ product.name }}
{%- endfor %}

Output:
Converse
Classic

range

Cú pháp:
{% for variable in (number..number) %}
  action
{% endfor %}

Thay vì duyệt mảng, bạn có thể định nghĩa khoảng giá trị cần duyệt. Bạn có thể định nghĩa khoảng bằng số và biến

Ví dụ:

{% for i in (1..3) -%}
  {{ i }}
{%- endfor %}

Output:
1
2
3

reversed

Cú pháp:
{% for variable in array reversed %}
  expression
{% endfor %}

Duyệt mảng theo thứ tự ngược lại

Ví dụ:

{% for product in collection.products reversed -%}
  {{ product.name }}
{%- endfor %}

Output:
Classic
Converse
Nike
Adidas

else

Cho phép định nghĩa hành động mặc định khi thẻ for duyệt mảng rỗng

Cú pháp:
{% for variable in array %}
  first_action
{% else %}
  second_action
{% endfor %}

Ví dụ:

{% for product in collection.products %}
  {{ product.name }}<br>
{% else %}
  There are no products in this collection.
{% endfor %}

Output:
There are no products in this collection.

break

Khiến cho thẻ for dừng lặp

Cú pháp:
{% break %}

Ví dụ:

{% for i in (1..5) %}
  {% if i == 4 %}
    {% break %}
  {% else %}
    {{ i }}
  {% endif %}
{% endfor %}

Output:
1
2
3

continue

Khiến cho thẻ for bỏ qua lần lặp tiếp theo

Cú pháp:
{% continue %}

Ví dụ:

{% for i in (1..5) -%}
  {%- if i == 4 -%}
    {% continue %}
  {%- else -%}
    {{ i }}
  {%- endif -%}
{%- endfor %}

Output:
1
2
3
5

cycle

Duyệt qua danh sách chuỗi, in ra giá trị lần lượt qua mỗi lần lặp của thẻ for

Thẻ cycle phải được sử dụng trong vòng lặp for.

Cú pháp:
{% cycle string, string, ... %}

Ví dụ:

{% for i in (1..4) -%}
  {% cycle 'one', 'two', 'three' %}
{%- endfor %}

Output:
one
two
three
one

Tham số của thẻ cycle

group

Cú pháp:
{% cycle string: string, string, ... %}

Nếu bạn có nhiều thẻ cycle với cùng danh sách tham số trong cùng template, bạn có thể tránh nhập nhằng bằng cách phân nhóm thông qua việc đặt tên

Ví dụ:

<!-- Iteration 1 -->
{% for i in (1..4) -%}
  {% cycle 'one', 'two', 'three' %}
{%- endfor %}

<!-- Iteration 2 -->
{% for i in (1..4) -%}
  {% cycle 'one', 'two', 'three' %}
{%- endfor %}

<!-- Iteration 3 -->
{% for i in (1..4) -%}
  {% cycle 'group_1': 'one', 'two', 'three' %}
{%- endfor %}

<!-- Iteration 4 -->
{% for i in (1..4) -%}
  {% cycle 'group_2': 'one', 'two', 'three' %}
{%- endfor %}

Output:
<!-- Iteration 1 -->
one
two
three
one

<!-- Iteration 2 -->
two
three
one
two

<!-- Iteration 3 -->
one
two
three
one

<!-- Iteration 4 -->
one
two
three
one

tablerow

Sinh ra thẻ HTML <tr> với các thẻ HTML <td> được đánh giá trong mỗi lần duyệt phần tử của mảng

Thẻ tablerow cần nằm trong thẻ HTML <table> và </table>.

Cú pháp:
{% tablerow variable in array %}
  expression
{% endtablerow %}

Ví dụ:

<table>
  {% tablerow product in collection.products %}
    {{ product.name }}
  {% endtablerow %}
</table>

Output:
<table>
  <tr class="row1">
    <td class="col1">
        Adidas
      </td><td class="col2">
        Nike
      </td><td class="col3">
        Converse
      </td><td class="col4">
        Classic
    </td>
  </tr>
</table>

Mỗi vòng lặp tablerow đều liên kết với một đối tượng tablerowloop để biểu diễn thông tin vòng lặp

Tham số của thẻ tablerow

cols

Cú pháp:
{% tablerow variable in array cols: number %}
  expression
{% endtablerow %}

Bạn có thể chỉ định số cột của bảng bằng tham số cols

Ví dụ:

<table>
  {% tablerow product in collection.products cols: 2 %}
    {{ product.name }}
  {% endtablerow %}
</table>

Output:
<table>
  <tr class="row1">
    <td class="col1">
        Adidas
      </td><td class="col2">
        Nike
      </td>
  </tr>
  <tr class="row2">
    <td class="col1">
        Converse
      </td><td class="col2">
        Classic
    </td>
  </tr>
</table>

limit

Cú pháp:
{% tablerow variable in array limit: number %}
  expression
{% endtablerow %}

Bạn có thể giới hạn vòng lặp bằng tham số limit

Ví dụ:

<table>
  {% tablerow product in collection.products limit: 2 %}
    {{ product.name }}
  {% endtablerow %}
</table>

Output:
<table>
  <tr class="row1">
    <td class="col1">
        Adidas
      </td><td class="col2">
        Nike
      </td>
  </tr>
</table>

offset

Cú pháp:
{% tablerow variable in array offset: number %}
  expression
{% endtablerow %}

Bạn có thể chỉ định giá trị bắt đầu của vòng lặp bằng tham số offset

Ví dụ:

<table>
  {% tablerow product in collection.products offset: 2 %}
    {{ product.name }}
  {% endtablerow %}
</table>

Output:
<table>
  <tr class="row1">
    <td class="col1">
        Converse
      </td><td class="col2">
        Classic
      </td>
  </tr>
</table>

paginate

Chia mảng các phần tử thành nhiều trang

Bởi vì thẻ for bị giới hạn 50 lần lặp, nên bạn phải dùng thẻ paginate để duyệt mảng có hơn 50 phần tử. Những đối tượng sau có thể được phân trang:

• article.comments
• blog.articles
• collections
• collection.products
• customer.addresses
• customer.orders
• pages
• search.results

Trong thẻ paginate bạn có thể truy cập đối tượng paginate. Bạn có thể sử dụng đối tượng này hoặc dùng bộ lọc default_pagination để xây dựng thanh điều hướng

Cú pháp:
{% paginate array by page_size %}
  {% for item in array %}
    action
  {% endfor %}
{% endpaginate %}

Ví dụ:

{% paginate collection.products by 5 %}
  {% for product in collection.products %}
    {{ product.name }}
  {% endfor %}
{% endpaginate %}

Output:
Adidas
Nike
Converse
Classic

Thẻ cú pháp

Các thẻ loại cú pháp điều khiển cách đoạn mã liquid bên trong nó được xử lý và hiển thị.

comment

Cho phép bạn để lại chú thích trong đoạn mã liquid

Nội dung trong thẻ comment sẽ không được xuất ra ngoài, các đoạn mã liquid trong đó cũng sẽ không được thực thi.

Cú pháp:
{% comment %}
  content
{% endcomment %}

Ví dụ:

Xin chào {% comment %} nội dùng trong comment {% endcomment %} Nguyễn Văn A!

Output:
Xin chào Nguyễn Văn A!

raw

Cho phép hiện thị một đoạn mã liquid trên một trang. Đoạn mã này sẽ không được thực thi.

Cú pháp:
{% raw %}
  content
{% endraw %}

Ví dụ:

{% raw %}{{ 5 | plus: 6 }}{% endraw %} bằng 11.

Output:
{{ 5 | plus: 6 }} bằng 11.

Thẻ giao diện

Các thẻ loại giao diện sẽ gán và hiển thị nội dung liên quan đến giao diện

include

Hiển thị nội dung của snippet

Bên trong snippet, bạn có thể truy cập và thay đổi các biến bên ngoài snippet đó

Cú pháp:
{% include 'filename' %}

Sử dụng thẻ include sẽ code khó đọc hiểu và bảo trì. Sử dụng thẻ render để thay thế

layout

Chỉ định layout cần sử dụng

Nếu không có layout nào được chỉ định, layout theme.bwt sẽ được sử dụng

Cú pháp:
{% layout name %}

render

Hiển thị nội dung của snippet

Bên trong snippet, bạn không thể truy cập các biến được tạo bên ngoài snippet đó. Tuy nhiên bạn có thể truyền các biến này vào thông qua tham số của thẻ render để có thể truy cập bên trong snippet.

Tuy không thể truy cập các biến được tạo bên ngoài snippet, nhưng bạn có thể truy cập các đối tượng global như articles, pages, … hoặc các đối tượng phụ thuộc vào ngữ cảnh của template như đối tượng product trong template product, …

Bên ngoài snippet, bạn cũng không thể truy cập các biến được tạo trong snippet

Cú pháp:
{% render 'filename' %}

Khi sử dụng thẻ render để hiển thị nội dung của snippet, bạn không thể sử dụng thẻ include bên trong snippet

Tham số của thẻ render

for

Cú pháp:
{% render 'filename' for array as item %}

Bạn có thể hiển thị snippet với mỗi phần tử của mảng với tham số for. Bạn cũng có thể sử dụng tham số tùy chọn as chỉ định tên biến của phần tử để truy cập trong snippet qua mỗi lần lặp. Bạn cũng có thể truy cập đối tượng forloop trong snippet

Truyền biến vào snippet

Cú pháp:
{% render 'filename', variable1: value1, variable2: value2 %}

Các biến được tạo bên ngoài snippet có thể được truyền vào trong snippet thông qua các tham số của thẻ render

with

Cú pháp:
{% render 'filename' with object as name %}

Các có thể truyền một đối tượng vào snippet bằng tham số with. Bạn cũng có thể sử dụng tham số tùy chọn as chỉ định tên biến

Thẻ biến số

Các thẻ loại biến số cho phép bạn tạo biến trong liquid

assign

Tạo biến mới

Cú pháp:
{% assign variable_name = value %}

Ví dụ:

{%- assign product_name = product.name | upcase -%}
{{ product_name }}

Output:
ADIDAS

capture

Tạo biến mới bằng giá trị chuỗi

Bạn có thể tạo chuỗi phức tạp với liquid logic

Cú pháp:
{% capture variable %}
  value
{% endcapture %}

Ví dụ:

{%- assign up_name = product.name | upcase -%}
{%- assign down_name = product.name | downcase -%}
{%- assign show_up_name = true -%}

{%- capture name -%}
  {% if show_up_name -%}
    Upcase name: {{ up_name }}
  {%- else -%}
    Downcase name: {{ down_name }}
  {%- endif %}
{%- endcapture %}

{{ name }}

Output:
Upcase name: ADIDAS

increment

Tạo biến mới giá trị mặc định là 0, và tăng bởi 1 sau mỗi lần gọi sau đó

Biến được khai báo bởi thẻ increment là duy nhất đối với layout, template mà nó được tạo. Tuy nhiên, đối với snippet các biến này được chia sẻ với nhau

Biến được tạo bởi increment độc lập với biến tạo bởi các thẻ assign, capture. Tuy nhiên increment và decrement chia sẻ biến với nhau

Cú pháp:
{% increment variable_name %}

Ví dụ:

{% increment variable %}
{% increment variable %}
{% increment variable %}

Output:
0
1
2

decrement

Tạo biến mới giá trị mặc định là -1, và giảm bởi 1 sau mỗi lần gọi sau đó

Biến được khai báo bởi thẻ decrement là duy nhất đối với layout, template mà nó được tạo. Tuy nhiên, đối với snippet các biến này được chia sẻ với nhau

Biến được tạo bởi decrement độc lập với biến tạo bởi các thẻ assign, capture. Tuy nhiên decrement và increment chia sẻ biến với nhau

Cú pháp:
{% decrement variable_name %}

Ví dụ:

{% decrement variable %}
{% decrement variable %}
{% decrement variable %}

Output:
-1
-2
-3