Thiết kế giao diện với Liquid

1. Thiết kế giao diện với Liquid
Bizweb - 20/12/2015

2. Liquid là gì?
• Ngôn ngữ lập trình giao diệ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.

4. Ư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 diện hiển thị mà không cần liên
quan đến backend.

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

6. Liquid cho nhà phát triển giao diện

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

8. 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

9. {% 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 %}

10. 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ả

11. 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 diệ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

12. <!-- Nếu customer.name = 'guest' -->
{% 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 %}

13. Đố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
• …

14. Đố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
• ...

15. 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 |

16. 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,…

17. Cấu trúc giao diện Bizweb
• assets: bao gồm các file thư viện sẽ được sử dụng cho giao diệ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 diện, mặc định sẽ có
theme.bwt
• snippets: gồm các đoạn mã ngắn (snippet) mà giao diện có thể
dùng lại nhiều lần khi cần
• templates: bao gồm các template của giao diện

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

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

20. theme.bwt
• Khung giao diện chính, mặc định cho mỗi giao
diện.
• Các template sẽ được hiển thị thông qua
khung giao diệ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

21. Template
• Hệ thống giao diệ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
• …

22. 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
• …

23. collection.bwt
Hiển thị nội dung trang danh mục sản phẩm
của website.
Nội dung có thể gồm:
• 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
• …

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

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

26. Thiết lập giao diện

27. Thiết lập giao diện
• Người phát triển giao diệ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 diệ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 diện.
• Thông qua thiết lập giao diện, người sử dụng giao diện có thể:
• Kích hoạt ẩn/hiện một khu vực, đối tượng trên giao diệ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,…

28. End.

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

34. Giao diệ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ụ

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

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

37. <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>

38. <body>
<div class="container">
<div class="content">
{{ content_for_layout }}
</div>
</div>
</body>
<body>

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

40. <div class="container">
<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="{{ link.url }}">{{ link.title }}</a>
</li>
{% endfor %}
</ul>
</nav>
<div class="content">
{{ content_for_layout }}
</div>
</div>
Header menu

41. …
<div class="content">
{{ content_for_layout }}
</div>
<footer>
<ul>
{% for link in linklists.footer.links %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
</footer>
…
Footer menu

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

44. 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”

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

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

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

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

52. <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>

54. <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>