�ݺ�ߣ

Thiết kế giao �徱ện với Liquid
Bizweb - 20/12/2015

Liquid là gì?
• Ngôn ngữ lập trình giao �徱ện
• Mã nguồn mở, phát triển từ năm 2006
• Sử dụng để frontend có thể truy cập và lấy dữ liệu từ
backend một cách an toàn và dễ dàng.

Thiết kế giao �徱ện với Liquid

Ưu điểm của Liquid
• Cấu trúc đơn giản, dễ nhớ, dễ sử dụng.
• Kết hợp dễ dàng với cấu trúc HTML có sẵn.
• Người dùng có thể tự tùy biến giao �徱ện hiển thị mà không cần liên
quan đến backend.

Các hệ thống đang sử dụng

Liquid cho nhà phát triển giao �徱ện

Liquid cơ bản
• Các toán tử
• Kiểu dữ liệu
• Thẻ
• Đối tượng
• Bộ lọc

Các toán tử
Liquid hỗ trợ các toán tử logic, so sánh và toán tử bao hàm.
== bằng
!= không bằng
> lớn hơn
< nhỏ hơn
>= lớn hơn hoặc bằng
<= nhỏ hơn hoặc bằng
or điều kiện A hoặc điều kiện B
and điều kiện A và điều kiện B
contains kiểm tra xem có sự xuất hiện của một chuỗi

{% if product.name == "Giày Converse" %}
Đây là đôi giày Converse
{% endif %}
{% if product.name contains 'Converse' %}
Đây là một sản phẩm của Converse
{% endif %}

Kiểu dữ liệu
Liquid hỗ trợ các kiểu dữ liệu cơ bản như:
• Chuỗi
• Số
• Boolean
• Mảng
Và ‘nil’ một giá trị rỗng được trả về khi thực thi một đoạn mã Liquid mà
không thể cho ra kết quả

Thẻ
Liquid sử dụng các thẻ logic để thông báo cho hệ thống cần trả về dữ
liệu là gì, các thẻ được bao bởi {% và %}
Thẻ điều khiển
luồng
Thẻ lặp Thẻ giao �徱ện
Thẻ liên quan đến
biến
if for comment assign
elsif / else cycle include capture
case/when form increment
unless layout decrement
paginate
raw

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

Đối tượng
Các đối tượng trong Liquid bao gồm các thuộc tính để xuất ra nội dung
động tương ứng, khi gọi các thuộc tính theo đối tượng tương ứng, sử
dụng {{ và }} để bao ngoài (ví dụ: {{ product.name }} ).
Các đối tượng tiêu biểu:
• collection
• product
• cart
• blog
• article
• page
• customer
• …

Đối tượng product
• product.available
• product.collections
• product.description
• product.featured_image
• product.alias
• product.id
• product.tags
• product.name
• product.type
• product.url
• product.vendor
• ...

Bộ lọc
• Bộ lọc dùng để sửa đổi kết quả được xuất ra của một số, chuỗi, biến
hoặc đối tượng.
• Chúng được đặt trong {{ }}, có thể dùng nhiều bộ lọc cùng lúc, khi đó
chúng được phân cách bởi |

Các loại bộ lọc
• Bộ lọc mảng:
join, first, last, index, map, size, sort
• Bộ lọc HTML
img_tag, script_tag, stylesheet_tag
• Bộ lọc toán học
ceil, divided_by, floor, minus,…
• Bộ lọc tiền tệ
money, money_with_currency, money_without_currency,…
• Bộ lọc chuỗi
append, camelcase, capitalize, downcase,…
• Bộ lọc ULR
asset_url, img_url, link_to_tag,…
• Các bộ lọc khác
date, hightlight,…

Cấu trúc giao �徱ện Bizweb
• assets: bao gồm các file thư viện sẽ được sử dụng cho giao �徱ện
như ảnh, file css, và các file js
• configs: gồm 2 tập tin settings_schema.json và settings_data.json
• layouts: bao gồm các file khung giao �徱ện, mặc định sẽ có
theme.bwt
• snippets: gồm các đoạn mã ngắn (snippet) mà giao �徱ện có thể
dùng lại nhiều lần khi cần
• templates: bao gồm các template của giao �徱ện

Hệ thống giao �徱ện Bizweb
• Khung giao �徱ện (layout)
• Các template cơ bản
• Thiết lập giao �徱ện

Khung giao �徱ện là gì?
• Khung giao �徱ện là một thành phần rất quan trọng của giao �徱ện.
• Các thành phần của website sẽ hiển thị thông qua khung giao �徱ện đang
được kích hoạt.
• Chỉ có một khung giao �徱ện được sử dụng mỗi khi hiển thị trang web.

theme.bwt
• Khung giao �徱ện chính, mặc định cho mỗi giao
�徱ện.
• Các template sẽ được hiển thị thông qua
khung giao �徱ện này.
• Các thành phần xuất hiện lặp đi lặp lại ở tất
cả các trang nên được đặt trong theme.bwt.
Ví dụ: logo, menu đầu trang, phần chân trang

Template
• Hệ thống giao �徱ện Bizweb được tạo nên bởi
các file template Liquid.
• Mỗi file template có cách sử dụng khác nhau
tùy vào nội dung nó được quy định để hiển
thị.
• Các file template:
• index.bwt
• collection.bwt
• product.bwt
• blog.bwt
• …

index.bwt
Hiển thị nội dung trang chủ của website.
Nội dung có thể gồm:
• Giới thiệu website
• Một danh sách sản phẩm
• Sản phẩm tiêu biểu
• …

collection.bwt
Hiển thị nội dung trang danh mục sản phẩm
của website.
• Mô tả về danh mục sản phẩm
• Danh sách các sản phẩm trong danh
mục
• Một danh sách sản phẩm tiêu biểu
• …

product.bwt
Hiển thị nội dung chi tiết của sản phẩm trên
website.
• Tên sản phẩm
• Ảnh sản phẩm
• Mô tả chi tiết của sản phẩm
• …

page.bwt
Hiển thị nội dung của một trang.
• Tiêu đề trang
• Nội dung của trang
• Banner quảng cáo
• …

Thiết lập giao �徱ện
• Người phát triển giao �徱ện có thể dễ dàng thêm vào các tuỳ chọn để
người sử dụng có thể tuỳ biến các thành phần của giao �徱ện mà
không cần biết hay tìm hiểu về Liquid.
• Khả năng tuỳ biến đem lại sự tiện lợi cho người dùng, cũng như tạo
nên điểm nổi trội của giao �徱ện.
• Thông qua thiết lập giao �徱ện, người sử dụng giao �徱ện có thể:
• Kích hoạt ẩn/hiện một khu vực, đối tượng trên giao �徱ện như
banner, slideshow, hiển thị danh sách sản phẩm,…
• Thay đổi nội dung của một đối tượng như thay đổi ảnh banner,
thay đổi danh mục sản phẩm sẽ hiển thị tại một khu vực,…

Tạo trang index cơ bản với Bizweb

Giao �徱ện trang chủ cơ bản
Phần đầu trang:
• logo
• menu điều hướng
Phần nội dung chính:
• đoạn văn bản ngắn giới thiệu
• một danh sách các sản phẩm tiêu biểu
Phần chân trang:
• Menu điều hướng phụ

theme.bwt
Phần đầu trang:
• logo
• menu điều hướng
Phần chân trang:
• Menu điều hướng phụ

<!doctype html>
<html>
<head>
<meta charset="utf-8">
{{ content_for_header }}
</head>
<body>
{{ content_for_layout }}
</body>
</html>

<head>
<meta charset=“utf-8">
<title>{{ page_title }} - {{ store.name }}</title>
{{ content_for_header }}
{{ "normalize.css" | asset_url | stylesheet_tag }}
{{ "style.css" | asset_url | stylesheet_tag }}
{{ "common.js" | bizweb_asset_url | script_tag }}
{{ "customer.js" | bizweb_asset_url | script_tag }}
{{ '//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js' | script_tag }}
</head>
<head>

<body>
<h1 class="logo"><a href="/">{{ store.name }}</a></h1>
</div>
</div>
</body>
<body>

<h1 class="logo"><a href="/">{{ store.name }}</a></h1>
<nav class="main-menu">
<ul>
{% for link in linklists.main-menu.links %}
<li {% if link.active %}class="current"{% endif %}>
<a href=/nhtera888xxx/thit-k-giao-din-vi-liquid/"{{ link.url }}">{{ link.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
</div>
</div>
Header menu

…
</div>
<footer>
<ul>
{% for link in linklists.footer.links %}
<li><a href=/nhtera888xxx/thit-k-giao-din-vi-liquid/"{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
</footer>
…
Footer menu

index.bwt
• Đoạn văn bản ngắn giới thiệu
• Danh sách các sản phẩm

Hiển thị nội dung có sẵn từ trang nội dung
Lấy dữ liệu từ trang “Giới thiệu”

<div class="rte index-page">
<h2>{{ pages.gioi-thieu.title }}</h2>
{{ pages.gioi-thieu.content }}
</div>

Hiển thị danh sách sản phẩm

Sử dụng snippet
• Ảnh sản phẩm
• Tên sản phẩm
• Giá bán

<div class="product left {% cycle '','','','last' %}">
<div class="product-thumb">
<a href=/nhtera888xxx/thit-k-giao-din-vi-liquid/"{{ product.url }}">
<img src=/nhtera888xxx/thit-k-giao-din-vi-liquid/"{{ product.featured_image.src | img_url: 'medium' }}" alt=/nhtera888xxx/thit-k-giao-din-vi-liquid/"{{
product.featured_image.alt }}" />
</a>
</div>
<div class="product-title">
<a href=/nhtera888xxx/thit-k-giao-din-vi-liquid/"{{ product.url }}">
{{ product.name }}
</a>
</div>
<div class="product-price">
{% if product.price_varies %}Giá từ{% endif %}
{{ product.price | money }}
</div>
</div>

<div class="clearfix">
<h2>Sản phẩm mới</h2>
<div class="collection-desc rte">
{{ collections.trang-chu.description }}
</div>
{% for product in collections.trang-chu.products %}
{% include 'product-loop' %}
{% endfor %}
</div>

<div class="clearfix">
<h2>Sản phẩm mới</h2>
<div class="collection-desc rte">
{{ collections.trang-chu.description }}
</div>
{% for product in collections.trang-chu.products limit:8 %}
{% include 'product-loop' %}
{% endfor %}
</div>

�ݺ�ߣ

Thiết kế giao �徱ện với Liquid

More Related Content

What's hot (20)

Similar to Thiết kế giao �徱ện với Liquid (20)

Recently uploaded (7)

Thiết kế giao �徱ện với Liquid