Bắt đầu#

Cấu trúc bộ giao diện#

Một bộ giao diện gồm các tệp .html viết bằng Liquid:

theme.html              khung bao ngoài của mọi trang
header.html             phần đầu trang
footer.html             phần chân trang
home/index.html         trang chủ
product/index.html      danh sách sản phẩm
product/detail.html     chi tiết sản phẩm
product/category.html   trang danh mục
cart.html               giỏ hàng
checkout.html           thanh toán
cms/page.html           trang nội dung
account/…               các trang tài khoản
components/…            thành phần dùng lại

Mỗi tệp tương ứng một slot — tên mà máy chủ dùng để gọi template. Danh sách đầy đủ slot và biến của từng slot nằm ở trang Biến theo trang.

Cách hoạt động#

1. Khách truy cập một đường dẫn.
2. Máy chủ xác định cửa hàng theo tên miền, đọc dữ liệu từ cơ sở dữ liệu.
3. Máy chủ dựng slot tương ứng, rồi lồng kết quả vào theme.html.

Vì vậy trong template bạn chỉ đọc dữ liệu có sẵn — mọi thao tác ghi (thêm giỏ hàng, đặt hàng, đăng nhập) đều đi qua thư viện JavaScript xStore.

Chỉnh sửa giao diện#

Có hai đường, chọn theo việc bạn đang làm.

Sửa nhanh một chỗ — trình sửa trong trang quản trị. Giao diện được lưu trong cơ sở dữ liệu và sửa tại Quản trị → Website → Giao diện. Sau khi lưu, storefront tự đồng bộ bản mới. Hợp khi bạn đổi một dòng chữ hay một class.

Dựng cả bộ giao diện — làm trên máy bạn. Kéo theme về, sửa bằng trình soạn thảo và Git của bạn, xem kết quả tức thì trên dữ liệu thật, rồi xuất bản một bản nháp có link xem thử trước khi đưa lên phục vụ khách:

xstore theme dev

Toàn bộ quy trình ở Phát triển trên máy. Nếu bạn dựng giao diện bằng trợ lý lập trình, xem thêm Dùng trợ lý lập trình.