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

Bizweb - 26/12/2015

Liquid là gì?

• Ngôn ngữ lập trình giao diện được phát triển bởi Shopify

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

Liquid code format

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

Ưu điểm của Liquid

• Cấu trúc đơn giản, dễ nhớ, dễ sử dụng, thân thiện với Designer

• Bảo mật code trên server của bạn• 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 quan tâm đến backend.• Tương đồng với Smarty, Twig

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

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ằngor đ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/null’ 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ểnluồng Thẻ lặp Thẻ giao diện Thẻ liên quan

đến biếnif for comment assign

elseif / else cycle include capturecase/when form increment

unless layout decrementpaginate

raw

<!-- 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 %}

Đối tượngCá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 |

{{ "normalize.css" | asset_url }}

Output://bizweb.dktcdn.net/100/043/252/themes/55930/assets/normalize.css

{{ "normalize.css" | asset_url | stylesheet_tag }}

Output:<link href='//bizweb.dktcdn.net/100/043/252/themes/55930/assets/normalize.css' rel='stylesheet' type='text/css' />

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

Cấu trúc giao diện của Bizweb

Layouts (File giao diện chính)• theme.bwt (header, navigation and

footer)Templates (file giao diện trang chức năng)

• index.bwt (trang chủ)• product.bwt (trang sản phẩm)• blog.bwt (trang blog)• page.bwt (trang nội dung)• …

Snippets (Những mẩu code để tái sử dụng trong theme)Assets (images, stylesheets, javascript)Configs (file cấu hình cho theme)Locales (chứa file ngôn ngữ của theme)

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

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.

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

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

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.

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

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

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

Thiết lập giao diện

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

End.

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

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ụ

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> <div class="container"> <div class="content"> {{ content_for_layout }} </div> </div></body>

<body>

<body>

<div class="container">

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

<div class="content">

{{ content_for_layout }}

</div>

</div>

</body>

<body>

<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

…<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

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="{{ 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>

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