Cơ bản

Dưới đây là các khái niệm cơ bản mà bạn cần phải nắm được để tương tác với thẻ, bộ lọc và đối tượng.

Định danh - Alias

Định danh dùng để truy cập các thuộc tính của đối tượng trong Liquid, mặc định đó là tên của các đối tượng, trong đó các dấu cách và kí tự đặc biệt được thay thế bởi dấu nối -. Mỗi đối tượng trong Liquid như sản phẩm, danh mục sản phẩm, blog,… đều có một định danh.

Ví dụ, một trang nội dung với tiêu đề “Giới thiệu” có thể được truy cập thông qua định danh của nó là gioi-thieu như sau:

{% comment %} Nội dung của trang Giới thiệu {% endcomment %}
{{ pages.gioi-thieu.content  }}

Định danh được tạo ra như nào?

Một sản phẩm có tên là “Áo” sẽ tự động được gán định danh là ao. Nếu có thêm 1 sản phẩm có tên là “Áo” thì định danh sẽ được xử lý tự thêm số tăng dần ở cuối. Theo đó sản phẩm thứ 2 có tên là “Áo” sẽ có định danh là ao-1, sản phẩm thứ 3 có tên là “Áo” sẽ có định danh là ao-2, …

Trong định danh, dấu cách (khoảng trắng), ký tự đặc biệt hoặc chữ tiếng Việt có dấu trong tên sẽ được thay thế bởi dấu nối -. Ví dụ, nếu tên sản phẩm là “Áo trẻ em chấm bi” sẽ có định danh là ao-tre-em-cham-bi.

Định danh cũng sẽ xác định đường dẫn (URL) của một đối tượng. Ví dụ, một trang nội dung có định danh là gioi-thieu sẽ có đường dẫn là : http://cuahang.mysapo.net/pages/gioi-thieu

Giao diện của website sẽ phụ thuộc rất nhiều vào định danh của sản phẩm, danh mục sản phẩm, trang nội dung, menu. Để đảm bảo các yếu tố giao diện và tránh trường hợp hỏng các liên kết, nếu bạn sửa đổi tên của một đối tượng thì hệ thống Sapo sẽ không tự động thay đổi định danh của đối tượng đó.

Ví dụ: nếu bạn thay đổi tên của trang nội dung “Giới thiệu” thành “Giới thiệu về sapo” thì định danh của trang đó vẫn là gioi-thieu trừ trường hợp bạn chỉnh sửa định danh của nó.

Truy cập các thuộc tính của đối tượng thông qua định danh

Các đối tượng có định danh thì cũng sẽ có thuộc tính alias. Ví dụ bạn có thể hiển thị định danh của sản phẩm bằng cú pháp product.alias. Bạn có thể truy cập đối tượng bằng cách sử dụng định danh của nó lên đối tượng cha theo 2 cách:

• Sử dụng dấu []: Cú pháp này bạn có thể sử dụng đối với chuỗi được đặt trong dấu nháy ' hoặc ", dùng nó với biến hoặc dùng nó với một đối tượng tham chiếu.
• Sử dụng dấu .: Sử dụng trực tiếp định danh không kèm theo dấu nháy

Ví dụ

{{ pages.gioi-thieu.title }}
{{ pages["gioi-thieu"].title }}

Output:
Giới thiệu
Giới thiệu

Có thể dùng định danh với các cấu hình trong file cấu hình của giao diện. Ví dụ:

{% for product in collections[settings.home_featured_collection].products %}
  {{ product.name }}
{% endfor %}

Output:
Giày Adidas Neo
Áo cổ tròn
Quần jean Armani

Toán tử - Operator

Liquid hỗ trợ các toán tử logic và toán tử so sánh để sử dụng cho các thẻ điều kiện

Ví dụ:

{% if product.name == "Giày Converse" %}
  Một đôi giày phù hợp cho bạn đi hàng ngày
{% endif %}

Dùng toán tử quan hệ and, or để kết hợp điều kiện:

{% if product.type == "Giày" and product.vendor == "Converse" %}
  Đây là một đôi giày đi hàng ngày của Converse
{% endif %}

Toán tử bao hàm - contains

contains được sử dụng để kiểm tra xem có sự xuất hiện của một chuỗi trong mảng hoặc một chuỗi khác hay không. Bạn không thể sử dụng contains để kiểm tra một đối tượng trong mảng đối tượng.

Ví dụ:

{% if product.tags contains 'giảm giá' %}
  Sản phẩm này được gắn nhãn "giảm giá"
{% endif %}

Thứ tự của toán tử

Khi sử dụng nhiều hơn một toán tử trong một thẻ, thứ tự của toán tử được đánh giá từ phải qua trái, bạn không thể thay đổi thứ tự này.

Ví dụ:

{% unless true and false and false or true %}
  OK
{% endunless %}

Output:
OK

Dấu ngoặc đơn () là không hợp lệ trong cú pháp thẻ của Liquid. Nếu bạn sử dụng nó để nhóm các điều kiện thì nó sẽ không hoạt động

Logic True - False trong Liquid

Tất cả giá trị đều được đánh giá logic là một trong 2 giá trị true hoặc false. Những giá trị được đánh giá logic là true được gọi là logic true (truthy). Những giá trị được đánh giá logic là false được gọi là logic false (falsy)

Ví dụ

Vì nil và false là 2 giá trị duy nhất có logic false, bạn chỉ cần cẩn thận kiểm tra những giá trị này trong Liquid

Một chuỗi rỗng có logic true

{% if settings.homepage_heading %}
  <h1>{{ settings.homepage_heading }}</h1>
{% endif %}

Output:
<h1></h1>

Do đó cần kiểm tra chuỗi là rỗng

{% if settings.homepage_heading != nil and settings.homepage_heading != '' %}
  <h1>{{ settings.homepage_heading }}</h1>
{% endif %}

Có thể kiểm tra chuỗi rỗng dùng đối tượng blank

{% if settings.homepage_heading != blank %}
  <h1>{{ settings.homepage_heading }}</h1>
{% endif %}

Kiểu - Type

Các biến Liquid có thể được định nghĩa bằng thẻ assign hoặc capture.

Đối tượng Liquid có thể trả về một trong số 6 kiểu sau:

Chuỗi - String

Chuỗi được gán bằng cách cho giá trị của biến vào trong ngoặc đơn ' hoặc ngoặc kép "

Ví dụ:

{% assign my_string = "Xin chào!" %}

Bạn có thể kiểm tra chuỗi là rỗng bằng cách so sánh với đối tượng blank.

Số - Number

Bao gốm số thực và số nguyên.

Ví dụ:

{% assign my_num = 25 %}

Boolean

Bao gồm 2 giá trị true hoặc false

Ví dụ:

{% assign foo = true %}
{% assign bar = false %}

Nil

Giá trị không xác định. Khi hiển thị giá trị của nó sẽ không hiển thị bất cứ điều gì. Nó cũng được đánh giá là logic false (falsy).

Một chuỗi với các kí tự “nil” không phải nil.

Mảng - Array

Chứa một danh sách các đối tượng của mọi kiểu dữ liệu.

Để duyệt tất cả phần tử trong mảng, bạn có thể sử dụng thẻ for hoặc thẻ tablerow.

Bạn có thể sử dụng dấu ngoặc vuông [] để truy cập đến phần tử cụ thể trong mảng. Chỉ số của mảng được bắt đầu từ giá trị 0.

Bạn không thể khai báo mảng trong liquid. Tuy nhiên, bạn có thể bộ lọc split để tách chuỗi thành mảng các chuỗi.

Ví dụ dùng thẻ for để duyệt mảng:

{% for tag in product.tags %}
  {{ tag }}
{% endfor %}

Ví dụ truy cập phần tử của mảng:

{{ product.tags[0] }}
{{ product.tags[1] }}

Ví dụ tạo mảng bằng bộ lọc split:

{{ assign arr = 'petter,john,joe' | split: ',' }}

Đối tượng rỗng - empty

Đối tượng empty được trả về nếu truy cập một đối tượng được định nghĩa nhưng không có giá trị. Ví dụ danh mục sản phẩm trống, cấu hình không có giá trị.

Bạn có thể so sánh một đối tượng với empty để kiểm tra giá trị trước khi truy cập thuộc tính của nó.

{% if collection.products != empty %}
  {% for product in collection.products %}
    {{ product.id }}
  {% endfor%}
{% endif %}