Liquid là một mã nguồn mở, ngôn ngữ mẫu được Shopify tạo ra dựa trên ngôn ngữ Ruby. Đây là thành phần quan trọng trong các giao diện của Shopify và được sử dụng để hiển thị các nội dung động trên cửa hàng trực tuyến. Liquid sử dụng các nhãn (tags), đối tượng (objects) và bộ lọc (filters) để tải các nội dung động này. Những thành phần này được sử dụng trong các tệp mẫu Liquid, và chúng cùng nhau tạo thành một giao diện mẫu (theme).
1. Nhãn (Tags)
Nhãn Liquid là những câu lệnh điều khiển các hành động của giao diện. Nhãn được đặt bên trong các khối {% %}.
Ví dụ, một đoạn mã Liquid có thể như sau:
{% if user.name == 'Nguyễn Văn A' %}
Xin chào Nguyễn Văn A
{% endif %}2. Đối tượng (Objects)
Các đối tượng Liquid chứa các thuộc tính để hiển thị các nội dung động trên trang. Ví dụ, đối tượng “product” có một thuộc tính được gọi là “title”, thuộc tính này chứa thông tin về tên của một sản phẩm.
Ví dụ:
{{ product.title }}
<!-- Kết quả: "Giày công nghệ cao" -->2.1. Đối tượng toàn cục (Global Objects)
Có một số đối tượng Liquid có thể được truy cập từ bất kỳ tệp nào trong giao diện của bạn, và được coi là đối tượng toàn cầu hoặc biến toàn cục.
2.2. Đối tượng “blogs”
Đối tượng “blogs” trỏ đến các liên kết bài viết trên giao diện cửa hàng của bạn. Dưới đây là một ví dụ về cách sử dụng đối tượng này:
<ul>
{% for article in blogs.myblog.articles %}
<li>{{ article.title | link_to: article.url }}</li>
{% endfor %}
</ul>2.3. Đối tượng “cart”
Đối tượng “cart” trỏ đến giỏ hàng trong cửa hàng của bạn.
2.4. Đối tượng “collections”
Đối tượng “collections” chứa danh sách các bộ sưu tập trong cửa hàng của bạn.
{% for product in collections.frontpage.products %}
{{ product.title }}
{% endfor %}2.5. Đối tượng “current_page”
Đối tượng “current_page” trả về số trang bạn đang xem thông qua thông tin về phân trang.
{% if current_page != 1 %}
Trang {{ current_page }}
{% endif %}2.6. Đối tượng “current_tags”
Đối tượng “current_tags” chứa danh sách các thẻ khác nhau dựa trên loại giao diện.
{% if current_tags %}
<h1>{{ blog.title | link_to: blog.url }} › {{ current_tags.first }}</h1>
{% else %}
<h1>{{ blog.title }}</h1>
{% endif %}2.7. Đối tượng “customer”
Đối tượng “customer” chỉ được xác định khi một khách hàng đăng nhập vào cửa hàng.
{% if shop.customer_accounts_enabled %}
{% if customer %}
<a href="/account">Tài khoản của tôi</a> {{ 'Đăng xuất' | customer_logout_link }}
{% else %}
{{ 'Đăng nhập' | customer_login_link }}
{% if shop.customer_accounts_optional %}
{{ 'Tạo tài khoản' | customer_register_link }}
{% endif %}
{% endif %}
{% endif %}2.8. Đối tượng “linklists”
Đối tượng “linklists” chứa một tập hợp các liên kết trong cửa hàng của bạn. Bạn có thể truy cập vào một danh sách liên kết bằng cách gọi handle của nó trong “linklists”.
<ul>
{% for link in linklists.categories.links %}
<li>{{ link.title | link_to: link.url }}</li>
{% endfor %}
</ul>2.9. Đối tượng “pages”
Đối tượng “pages” tham chiếu đến tất cả các trang trong cửa hàng của bạn.
<h1>{{ pages.about.title }}</h1>
<p>{{ pages.about.author }} nói rằng...</p>
<div>{{ pages.about.content }}</div>2.10. Đối tượng “page_description”
Người bán có thể định rõ một “page_description”. Trường này sẽ tự động được gắn với sản phẩm, bộ sưu tập hoặc mô tả mục.
{% if page_description %}
<meta name="description" content="{{ page_description }}" />
{% endif %}2.11. Đối tượng “page_title”
Đối tượng “page_title” trả về tên của trang hiện tại.
{{ page_title }}2.12. Đối tượng “shop”
Đối tượng “shop” cung cấp thông tin về cửa hàng của bạn.
2.13. Đối tượng “template”
Đối tượng “template” trả về tên của mẫu được sử dụng để hiển thị trang hiện tại.
{% if template contains 'product' %}
CHÚNG TÔI ĐANG Ở TRÊN TRANG SẢN PHẨM.
{% endif %}2.14. Đối tượng “settings”
Đối tượng “settings” giúp bạn truy cập vào tất cả các cài đặt của giao diện.
{% if settings.use_logo %}
{{ 'logo.png' | asset_url | img_tag: shop.name }}
{% else %}
<span class="no-logo">{{ shop.name }}</span>
{% endif %}
{% if settings.featured_collection and settings.featured_collection != '' and collections[settings.featured_collection].handle == settings.featured_collection and collections[settings.featured_collection].products_count > 0 %}
{% for product in collections[settings.featured_collection].products %}
{% include 'product-loop' %}
{% endfor %}
{% endif %}2.15. Đối tượng “theme”
Đối tượng “theme” miêu tả giao diện đang được sử dụng.
Đi đến trang <a href="/admin/themes/{{ theme.id }}/settings">Tùy chỉnh giao diện</a>.2.16. Đối tượng “themes”
Đối tượng “themes” cung cấp quyền truy cập vào các giao diện công khai của các cửa hàng.
Chúng ta có một giao diện di động đẹp, nó được gọi là {{ themes.mobile.name | link_to_theme: “mobile” }}
Tiếp tục…
Nguồn: LADEC
