Xây dựng sản phẩm thương mại điện tử SOZO trên nền shopify

LỜI CẢM ƠN
Em xin cảm ơn Thầy ThS. Nguyễn Quốc Bảo, đã tận tình hướng dẫn và
giúp đỡ em trong thời gian thực hiện bài báo cáo đồ án tốt nghiệp này. Trong suốt
thời gian từ khi bắt đầu học tập ở giảng đường đại học đến nay, em đã nhận được
rất nhiều sự quan tâm, giúp đỡ của các thầy cô, gia đình và bạn bè. Với sự hướng
dẫn của thầy cô giáo và nhu cầu thực tế phát triển tại trung tâm RDCMA em đã lựa
chọn đề tài: “Xây dựng sản phẩm thương mại điện tử SOZO trên nền
Shopify”.
Với lòng biết ơn sâu sắc nhất, em chân thành cảm ơn quý Thầy, Cô trong
Khoa Công Điện Tử và Truyền Thông, các thầy ở trung tâm RDCMA Trường Đại
Học Công Nghệ Thông Tin và Truyền thông đã tận tình và tâm huyết truyền đạt
kiến thức quý báu trong những năm em học tập. Với vốn kiến thức được tiếp thu
trong quá trình học không chỉ là nền tảng cho quá trình nghiên cứu học tập mà còn
là hành trang quý báu để em bước vào đời một cách vững chắc và tự tin.
Em cũng xin chân thành cảm ơn đến các bạn bè đã giúp đỡ tài liệu, trao đổi
học thuật mới có thể thực hiện bài thực tập tốt nghiệp này. Xin gửi lời cảm ơn đến
các bạn.
Sau cùng, em xin kính chúc quý Thầy Cô thật dồi dào sức khỏe, niềm tin để
tiếp tục thực hiện sứ mệnh cao đẹp của mình là truyền đạt kiến thức cho thế hệ mai
sau. Đồng kính chúc các thầy cô và các bạn trong trung tâm RDCMA đạt được
nhiều thành công tốt đẹp trong công việc.
Thái Nguyên, ngày tháng năm 2016
Sinh viên
Nguyễn Quang Long

1


LỜI CAM ĐOAN
Em xin cam đoan báo cáo này là công trình tổng hợp và nghiên cứu của cá
nhân em, được thực hiện trên cơ sở nghiên cứu lý thuyết, kiến thức dưới sự hướng

dẫn tận tình của thầy giáo Th.s Nguyễn Quốc Bảo cùng các thầy và các bạn trong
trung tâm RDCMA trường Đại học Công nghệ thông tin và Truyền thông. Trong
báo cáo có sử dụng một số tài liệu tham khảo như đã nêu trong phần tài liệu tham
khảo.

2


MỤC LỤC
LỜI CẢM ƠN ........................................................................................................ 1
LỜI CAM ĐOAN .................................................................................................. 2
MỤC LỤC.............................................................................................................. 3
DANH MỤC HÌNH ẢNH ..................................................................................... 4
LỜI NÓI ĐẦU ....................................................................................................... 5
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT ...................................................................... 6
1.1. Đặt vấn đề ....................................................................................................... 6
1.2 Tìm hiểu về thương mại điện tử và sản phẩm thương mại điện tử .................. 7
1.2.1 Một số định nghĩa về thương mại điện tử................................................. 7
1.2.2Vai trò, lợi ích và hạn chế của thương mại điện tử
........................................................................................................................... 8
1.2.3Sản
phẩm
thương
mại
điện
tử
........................................................................................................................... 9
1.3Tổng
quan
về

Shopify
.............................................................................................................................. 10
1.3.1Giới
thiệu
sơ
lược
về
Shopify
......................................................................................................................... 10
1.3.2Tính
năng
của
Shopify
......................................................................................................................... 11
1.4Lập
trình
Liquid
.............................................................................................................................. 13
1.4.1Tags
–
Nhãn
......................................................................................................................... 13
1.4.2Object
–
Đối
tượng
......................................................................................................................... 21
1.4.3Giới
thiệu
Bộ

lọc
Filter
......................................................................................................................... 24
CHƯƠNG 2: MÔ TẢ, KHẢO SÁT HIỆN TRẠNG VÀ .................................... 32
PHÂN TÍCH THIẾT KẾ HỆ THỐNG ................................................................ 32
2.1 Khảo sát các giao diện điện tử hiện nay......................................................... 32
2.2Phân
tích
hệ
thống
.............................................................................................................................. 37
2.2.1 Biểu đồ UseCase..................................................................................... 37
2.2.2Biểu
đồ
Trình
tự
và
Cộng
tác
......................................................................................................................... 44
3


CHƯƠNG 3: XÂY DỰNG SẢN PHẨM THƯƠNG MẠI ĐIỆN TỬ SOZO TRÊN
NỀN SHOPIFY.................................................................................................... 47
3.1 Các bước xây dựng sản phẩm thương mại điện tử......................................... 47
3.2 Giao diện người dùng..................................................................................... 50
3.3 Giao diện Admin ............................................................................................ 63
KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN ........................................................... 66
TÀI LIỆU THAM KHẢO.................................................................................... 67

DANH MỤC HÌNH ẢNH
Hình 3.1 Sơ đồ Xmind xây dựng theme “SOZO” Shopify .................................. 35
Hình 3. 2: Biểu đồ Use Case cho Tác nhân Customer ......................................... 38
Hình 3.3: Biểu đồ Use Case cho Tác nhân Adminitrator(quản trị)...................... 39
Hình 3. 4: Biểu đồ trình tự cho tác vụ compare (so sánh sản phẩm) ................... 44
Hình 3. 5: Biểu đồ cộng tác cho tác vụ compare (so sánh sản phẩm).................. 44
Hình 3.6: Biểu đồ trình tự cho chức năng wishlist .............................................. 45
Hình 3.7: Biểu đồ cộng tác cho chức năng wishlist............................................. 45
Hình 3.8: Biểu đồ lớp chức năng tìm kiếm .......................................................... 46
Hình 4.1: Các khung chính của giao diện ............................................................ 48
Hình 4.2: Giao diện chính của chương trình........................................................ 51
Hình 4.3a: Giao diện Collection dạng Grid ........................................................ 52
Hình 4.3b: Giao diện Collection dạng List .......................................................... 53
Hình 4.4: Giao diện trang hiển thị chi tiết một sản phẩm .................................... 54
Hình 4.5: Giao diện hiển thị trang wishlist .......................................................... 55
Hình 4.6: Giao diện trang compare (các sản phẩm được so sánh)....................... 56
Hình 4.7a: Giao diện khi thực hiện chức năng “Add to cart” .............................. 57
Hình 4.7b: Giao diện hiển thị tất cả các sản phẩm trong giỏ hàng ...................... 58
Hình 4.8: Giao diện trang Contact Us.................................................................. 59
Hình 4.9: Giao diện trang About Us .................................................................... 60
Hình 4.10a: Giao diện trang Blog dạng Grid ....................................................... 61
Hình 4.10b: Giao diện Blog dạng Large Images.................................................. 62
4


Hình 4.11: Giao diện trang Login cho khách hàng .............................................. 63
Hình 4.12: Giao diện admin đăng nhập vào hệ thống.......................................... 63
Hình 4.13: Giao diện viết Code, chỉnh sửa HTML, CSS..................................... 64
Hình 4.14: Giao diện quản lý sản phẩm............................................................... 64
Hình 4.15: Giao diện quản lý bài viết .................................................................. 65

Hình 4.16: Giao diện quản lý khách hàng............................................................ 65

LỜI NÓI ĐẦU
Trong thời đại công nghiệp hóa, hiện đại hóa và sự bùng nổ về sức mạnh
của công nghệ thông tin hiện nay. Việc mua bán sản phẩm, đặt hàng trực tuyến
đang trở thành một nếp văn minh mới trong thời đại tiên tiến, người tiêu dùng đã
quen dần với thói quen mua sắm trực tuyến.
Đặc biệt sự phát triển đa dạng của thương mại điện tử trên nền Shopify đã
giúp cho mọi người dễ dàng tìm kiếm thông tin. Shopify đi đầu trong việc xây
dựng một hệ thống đối tác cùng phát triển giao diện, ứng dụng, hỗ trợ các Shop
làm Marketing rất hùng hậu. Nhu cầu giao diện sử dụng Shopify ngày một lớn.
Website thương mại điện tử nói chung với các tính năng mở rộng cao cấp cho phép
giao dịch qua mạng như: Mega Menu đa dạng, giỏ hàng, wishlist, so sánh sản
phẩm, quick view, đặt hàng, thanh toán qua mạng, quản lý khách hàng, quản lý
đơn đặt hàng,…
Bên cạnh đó, hiện nay đa số các sản phẩm thương mại điện tử chuyên
nghiệp, được xây dựng dựa trên Bootstrap 3.0, HTML5 và CSS3 để có sản phẩm
thương mại điện tử đẹp mắt, dễ nhìn, thu hút khách hàng. Tương thích với tất cả
các thiết bị di động (từ máy tính bảng, điện thoại di động đến máy tính xách tay…)
và màn hình độ phân giải Retina (cho hình ảnh chất lượng cao).
Với nhu cầu thực tiễn từ việc sử dụng sản phẩm thương mại điện tử
Shopify ngày càng nhiều của các công ty, doanh nghiệp , qua khảo sát thị trường
sản phẩm thương mại điện tử. Em nhận thấy đây là một môi trường tiềm năng và
5


đầy sức hấp dẫn. Do đó đây chính là lý do em chọn đề tài: “Xây dựng sản phẩm
thương mại điện tử SOZO trên nền Shopify”.

6

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT
1.1. Đặt vấn đề
Ngày nay, thương mại điện tử (TMĐT) đã trở thành một công cụ phổ biến
không những ở trên thế giới mà còn cả ở Việt Nam. Với sự phát triển mạnh mẽ
như ngày nay, cùng với nhu cầu mua bán online nên việc phát triển các website
bán hàng là thực sự cần thiết. Các giải pháp tạo một website bán hàng hiện nay có
rất nhiều.
Hiện nay, một số công ty có xu hướng tiếp cận TMĐT theo một hướng
khác, đó là họ sẽ tạo ra những dịch vụ khác ngay trên dịch vụ của chính mình. Tức
là một trang TMĐT bây giờ không chỉ dừng lại ở một công ty, một doanh nghiệp,
một tổ chức hay là một cá nhân mà nó tiến hành liên kết tất cả các công ty, các
doanh nghiệp các cá nhân lại với nhau hoặc từ một doanh nghiệp ta có thể tổ chức
thành nhiều doanh nghiệp nhỏ hơn cùng chung một lĩnh vực hoạt động tạo thành
một hệ thống TMĐT linh động hơn, chuyên nghiệp hơn. Đặc biệt các sản phẩm
thương mại điện tử ngày càng có nhiều yêu cầu cao từ khâu thiết kế đến lập trình.
Một sản phẩm thương mại điện tử thường có nhiều layout, giao diện mượt đẹp
mắt, có đầy đủ các chức năng cơ bản như wishlist, compare và hiển thị hoàn hảo
trên mọi trình duyệt trên mọi thiết bị – từ máy tính bàn, laptop đến di động, máy
tính bảng…
Lựa chọn nền tảng thương mại điện tử thích hợp nhất cho việc tạo, quản lý
và duy trì một cửa hàng trực tuyến là rất quan trọng, vì nó có thể là yếu tố chịu
trách nhiệm cho thành công hay thất bại đối với doanh nghiệp của bạn.
Là một kế hoạch để tạo ra một cửa hàng trực tuyến hay di chuyển cửa hàng
hiện tại sang nền tảng khác trong tương lai gần hoặc với nhu cầu tạo một trang bán
hàng đơn giản, không có nhiều tính năng phức tạp như thanh toán trực tuyến thì có
việc sử dụng những dịch vụ tạo gian hàng điện tử như Shopify khá nổi tiếng ở
nước ngoài. Shopify hiện tại đang là nền tảng thương mại điện tử tốt nhất trên thế
7

giới. Khác với những đối thủ cạnh tranh khác, Shopify luôn tiên phong áp dụng
những công nghệ mới nhất và tiên tiến nhất của internet để tích hợp vào website sử
dụng Shopify. Có thể nói Shopify là một dịch vụ thương mại điện tử tiềm năng.
Từ vốn kiến thức có được trong quá trình học tập áp dụng các kiến thức về
html5/css3/js và thông qua tham khảo một số trang Web giới thiệu sản phẩm,
quảng bá sản phẩm cũng như một vài mã nguồn CMS. Em đã hoàn thành cho mình
sản phẩm thương mại điện tử với đề tài : “Xây dựng sản phẩm thương mại điện
tử SOZO trên nền Shopify” mục tiêu có được sản phẩm thương mại và nhằm
hiểu biết về tình hình phát triển thương mại điện tử trên thế giới cũng như trong
nước.
1.2 Tìm hiểu về thương mại điện tử và sản phẩm thương mại điện tử
1.2.1 Một số định nghĩa về thương mại điện tử
 Thương mại điện tử
Thương mại điện tử (Electronic commerce – EC) là một từ dùng để mô tả
quá trình mua, bán và trao đổi mặt hàng, dịch vụ và thông tin qua mạng máy tính
bao gồm cả mạng internet.
Thương mại điện tử là một kênh mua sắm mới có vị trí quan trọng không
thể phủ nhận được. Thật vậy, giải pháp thương mại điện tử, E-Commerce, giúp
mở rộng phạm vi người mua và giúp cho công việc kinh doanh trở nên linh hoạt
hơn. Mở cửa 24/7, suốt trong năm, thương mại điện tử hiện nay có vai trò không
thể thiếu đối với các doanh nghiệp hiện đại, giúp tăng doanh số và thúc đẩy hoạt
động mua bán trên mạng với giá cả cạnh tranh.
 Mô hình thương mại điện tử
Mô hình thương mại điện tử là phương thức kinh doanh của một công ty
phát sinh ra lợi nhuận để duy trì công ty. Mô hình thương mại giải thích một công
ty đóng vai trò như thế nào trong một dây chuyền.
 Một số mô hình TMĐT điển hình thành công
Trên thế giới

8


 Amazon.com – Sàn bán lẻ trực tuyến hàng đầu trên thế giới
 Facebook.com – Kênh Marketing hiệu quả
 Groupon.com – Mua hàng theo nhóm
 Paypal.com – Giải pháp thanh toán trực tuyến
 SlideShare.net - Giải pháp lưu trữ tài liệu
Tại Việt Nam
 Lazada.vn - Bán lẻ trực tuyến
 Muachung.vn - Mua hàng theo nhóm
 Homepay.vn - Thanh toán trực tuyến
 K12school.vn - Đào tạo trực tuyến

 Vai trò, lợi ích và hạn chế của thương mại điện tử
 Vai trò
Thương mại điện tử là hình thái hoạt động thương mại bằng phương pháp
điện tử, là làm việc trao đổi thông tin thương mại thông qua các phương tiện công
nghệ điện tử mà nói chung là không cần phải in ra giấy trong bất cứ công đoạn nào
của quá trình giao dịch.
Phát triển thương mại điện tử là nhu cầu tất yếu của nền kinh tế hiện đại, nó
mang lại lợi ích cho cả các doanh nghiệp cũng như khách hàng.
 Lợi ích
 Giúp cho các doanh nghiệp nắm được thông tin phong phú về thị trường
và đối tác.
 Giúp giảm chi phí sản xuất.
 Giúp giảm chi phí bán hàng và tiếp thị.
 Thời gian và chi phí giao dịch.
 Tạo điều kiện cho việc thiết lập và củng cố mối quan hệ giữa các thành
phần tham gia vào quá trình thương mại.

9


 Tạo điều kiện sớm tiếp cận nền kinh tế số hoá.
 Hạn chế
Những hạn chế về mặt kỹ thuật:
 Bảo mật hệ thống, tính đáng tin cậy, tiêu chuẩn và các phương thức giao
tiếp vẫn còn đang tiến triển.
 Hợp nhất giữa internet và phần mềm EC với các ứng dụng và dữ liệu đã
có sẵn là một điều khó khắn.
 Một vài phần mềm EC có thể không thích hợp với phần cứng hoặc nó có
thể trở nên không hợp với hệ điều hành hiện tại hoặc thiết bị hiện đại.

 Sản phẩm thương mại điện tử
Một sản phẩm thương mại điện tử là sản phẩm phải đạt được những yêu cầu
hoặc tiêu chuẩn nhất định để đem đến cho khách hàng một sản phẩm TMĐT hay
website không chỉ ấn tượng về giao diện mà còn hoàn hảo về chức năng và trải
nghiệm người dùng.
 Chất lượng thiết kế
Yếu tố được xem xét đầu tiên chính là chất lượng thiết kế. Thiết kế là một
yếu tố thuộc về thẩm mĩ, nó là xấu hay đẹp và nó không liên quan tới khả năng
code hay sự thành thạo PSD. Đơn giản đó chỉ là cách sử dụng typography, spacing,
visual hierachy, color, contrast, layout… Hiện nay, các thiết kế thường theo xu
hướng phẳng, đơn giản. Đơn giản ở đây vì thiết kế đẹp, nó tuân thủ theo những
nguyên tắc thiết kế và nhìn bắt mắt. Tất cả những gì bạn phải làm là có một thiết
kế đẹp, và bạn chỉ tập trung vào thiết kế, đẩy tất cả những cái “dirty behind” gồm
thanh toán, bảo mật, mua bán… cho bên thứ ba.
 Độc đáo
Độc đáo là một yếu tố quan trọng cho sản phẩm thương mại điện tử. Nó là

một sự thống nhất trong thiết kế từ đầu đến cuối trang web từ việc sử dụng font
chữ, màu sắc, tương phản cho tới các hiệu ứng, bố cục…Nên có tính độc đáo riêng

10


trong thiết kế của mình, không nên rập khuôn hay làm tương tự với những thiết kế
có sẵn.
Một số xu hướng thiết kế độc đáo trong những năm gần đây như thiết kế
responsive nghĩa là website thương mại điện tử ngày nay phải tương thích với các
loại thiết bị di động thông minh như smartphone, tablet… Ngoài ra, thiết kế phẳng
cũng trở thành xu hướng phổ biến và phát triển được một thời gian dài, tương thích
với tất cả các xu hướng khác như tối giản, thiết kế web đáp ứng và material design.

11


 Chất lượng code
Chất lượng code ở đây có nghĩa là code phải sáng sủa, dễ hiểu, mã hóa sạch
và tối ưu hóa. Các tiêu chuẩn chất lượng cần được chú trọng như tiêu chuẩn
HTML, tiêu chuẩn CSS, tiêu chuẩn JavaScript, tiêu chuẩn PHP và tiêu chuẩn phát
triển chủ đề web thương mại điện tử. Việc áp dụng và tuân thủ các tiêu chuẩn này
trong khi làm chủ đề của bạn sẽ là một lợi thế rất lớn.
Sản phẩm thương mại điện tử yêu cầu thiết kế được tích hợp đầy đủ các
chức năng với mong muốn làm sao khách hàng dễ sử dụng nhất. Khi thiết kế
website để đạt được hiệu quả thành công yêu cầu bắt buộc là phải có cấu trúc thân
thiện công cụ tìm kiếm google, tương thích với các kích thước màn hình và một
giao diện thân thiện người dùng tăng tối đa tỉ lệ convertion.
 Tổng quan về Shopify

 Giới thiệu sơ lược về Shopify
Có trụ sở chính tại Ottawa – Canada và Giám đốc điều hành của công ty
được đặt tên là Tobias Lütke được thành lập vào năm 2006, Shopify là một trong
những công ty đi tiên phong trong cuộc cách mạng thương mại điện tử trên phạm
vi toàn cầu. Sau gần 10 năm đi vào hoạt động, Shopify ngày nay đứng vào hàng
ngũ những ông lớn của thương mại điện tử thế giới bên cạnh Bigcommerce,
Weebly eCommerce và Squarespace. Tuy nhiên, trong những cái tên kể trên
thì Shopify được đánh giá cao nhất.
Shopify là nền tảng thương mại điện tử tốt nhất thế giới hiện nay, tính đến
thời điểm đầu năm 2016, có tổng cộng hơn 200.000 website đang sử dụng nền tảng
Shopify trên phạm vi toàn cầu và đang không ngững tăng lên. Một thống kê chỉ ra
rằng Shopify đã mang lại doanh thu tổng cộng hơn 12 tỷ đô la trên toàn cầu. Khác
với những đối thủ cạnh tranh khác, Shopify luôn tiên phong áp dụng những công
nghệ mới nhất và tiên tiến nhất của internet để tích hợp vào website sử
dụng Shopify. Cùng với đó, Shopify sở hữu đội ngũ chuyên gia nhiều năm kinh
12


nghiệm và có những am hiểu sâu sắc về thương mại điện tử nói riêng và công nghệ
internet nói chung.
Được đánh giá có giao diện chuyên nghiệp cho thương mại điện tử. Shopify
sở hữu kho giao diện miễn phí được thiết kế dành riêng cho website thương mại
điện tử. Và người dùng hoàn toàn không cần bất cứ kỹ năng thiết kế hay lập trìn
nào để có thể sử dụng Shopify. Với kho ứng dụng đồ sộ và miễn phí, Shopify Apps
sở hữu hơn 900 ứng dụng miễn phí dành riêng cho website sử dụng Shopify. Việc
tự cài đặt những ứng dụng cần thiết cho website hoàn toàn miễn phí như Live chat,
pop-up, mạng xã hội, McAfee Secure…
Tất cả website sử dụng Shopify đều được thiết kế để hiển thị một cách tối
ưu trên mọi thiết bị. Shopify sở hữu giao diện riêng và tự động co lại kích cỡ phù
hợp khi khách hàng truy cập bằng smartphone hay máy tính bảng. Bên cạnh đó,

Shopify còn được thiết kế để tương thích với tất cả các bộ máy tìm kiếm như
Google, Bing, Yahoo,.. Với Shopify việc tích hợp các công cụ như Google
Analytics hay Google Webmaster Tools hoàn toàn dễ dàng.
Với giao diện quản lý chuyên nghiệp, dễ sử dụng. Shopify sở hữu giao diện
quản lý chuyên nghiệp và vô cùng đơn giản để sử dụng. Ngoài ra còn có thể cài đtặ
ứng dụng, thiết kế lại theo giao diện ý muốn như chỉnh sửa HTML/CSS.
Tất cả website sử dụng Shopify đều có thể dễ dàng tích hợp cổng thanh toán
Paypal qua đó khách hàng có thể thanh toán tài khoản Paypal hoặc thẻ Visa,
MasterCard, American Express,… Tất cả thanh toán tại Shopify đều được bảo mật
tuyệt đối bằng giao thức SSL.
Với Shopify bạn có thể hoàn toàn kết nối và bán hàng thông qua trang
Facebook của bạn vô cùng dễ dàng. Tất cả những sản phẩm có trên website của
bạn sẽ được hiển thị trên trang Facebook và khách hàng có thể đặt hàng trực tiếp
tại trangg Facebook của bạn.
Theo đánh giá của giới chuyên môn, Shopify hiện tại đang là nền tảng
thương mại điện tử tốt nhất trên thế giới. Shopify cũng được giới thiệu bởi những
13


trang công nghệ lớn nhất thế giới như TechCrunch, Mashable, The New York
Times, The Wall Street Journal,...

 Tính năng của Shopify
Shopify có đầy đủ những tính năng căn bản tối thiểu mà bất cứ cửa hàng
nào cần như:
 Hệ thống hàng trăm giao diện chuyên nghiệp với phần lớn là giao diện
miễn phí
 Kho ứng dụng đồ sộ với hàng trăm ứng dụng miễn phí thuộc nhiều lĩnh
vực khác nhau như: Marketing, Sales, Mạng xã hội, Quản lý đơn hàng, Chăm sóc
khách hàng,... Hệ thống Marketing chuyên nghiệp với các tính năng cung cấp mã

giảm giá, thẻ quà tặng, tab cửa hàng trên Facebook, hệ thống email marketing, tính
năng review sản phẩm …
 Miễn phí Hosting chất lượng cao với tính năng bảo mật được đảm bảo
tuyệt đối và băng thông không giới hạn. Cho dù trang của bạn có 100 hay 100.000
người cùng truy cập cùng một lúc thì tốc độ luôn được đảm bảo ở mức nhanh nhất.
 Hỗ trợ trực tuyến 24/7. Bạn có thể gọi điện hoặc Chat với Shopify để
được hỗ trợ vào bất cứ thời điểm nào trong ngày
 Tích hợp thanh toán PayPal, Visa, MasterCard
 Hệ thống admin quản lý đặt hàng, quản lý khách hàng, chăm sóc khách
hàng, đăng sản phẩm chuyên nghiệp. Có hệ thống tạo tài khoản cho khách hàng
 Hệ thống email tự động gửi cho khách hàng để xác nhận đặt hàng, tạo
tài khoản, lấy lại mật khẩu.
 Được thiết kế tối ưu cho SEO: nền tảng chuẩn SEO với sitemap, các thẻ
H1, title, meta tags được tối ưu …
 Giỏ hàng kết nối hơn 70 cổng thanh toán với các tính năng về thuế, phí
vận chuyển, ….
 Có ứng dụng quản lý trên smartphone rất tiện lợi, có POS để kết hợp
14


bán hàng Offline.
 Và đặc biệt là họ có các đối tác phát triển ứng dụng tới hơn 900 Apps hỗ
trợ như: live chat, email, popup, tích hợp vận chuyển, quyết toán, báo cáo và vô
vàn các ứng dụng hữu ích khác …
 Cung cấp đầy đủ những thông tin chi tiết về sản phẩm giúp khách hàng
dễ dàng lựa chọn được sản phẩm phù hợp.
 Website được tải với tốc độ nhanh, có khả năng tương thích với hầu hết
các trình duyệt web phổ biến nhất hiện nay.
 Website được cập nhật thông tin, tin tức chuyên ngành một cách hoàn
toàn tự động từ các báo điện tử nổi tiếng.

 Shopify nền tảng tạo website bán hàng cùng rất nhiều tính năng và tiện
ích quản lý khách hàng, sản phẩm, marketing, cũng như nhiều hỗ trợ tốt cho shop
bán hàng online.
 Lập trình Liquid
Liquid [3] là một mã nguồn mở, ngôn ngữ mẫu được sáng tạo bởi Shopify
dựa trên nền tảng ngôn ngữ Ruby. Nó là thành phần chính của các theme trong
Shopify và được sử dụng để tải các nội dung động lên giao diện các cửa hàng.
Liquid sử dụng sự kết hợp các tag (nhãn), object (đối tượng) và filter (bộ
lọc) để tải những nội dung động, phần lý thuyết này được tham khảo tại document
của trang docs shopify.com [3] và được trình bày chi tiết ở mục dưới.

 Tags – Nhãn
Thẻ (tags) liquid là các logic lập trình dùng để thông báo cho hệ thống cần
làm gì để đưa ra ngoài giao diện. Các thẻ được bao bởi: {%%}.
Ví dụ:
{% if user.name == 'elvis' %}
Hey Elvis
{% endif %}

15


Một số thẻ như for và cycle có thể đi kèm theo một số tham số. Các thẻ có
thể được chia làm 4 loại chính sau:
 Thẻ điều khiển luồng – Control Flow Tag
 Thẻ lặp – Iteration Tag
 Thẻ biến số - Variable Tag
 Thẻ giao diện – Theme Tag


16


 Thẻ điều khiển luồng
Các thẻ luồng điều khiển sẽ quyết định đoạn mã nào sẽ được thực hiện dựa
trên các điều kiện khác nhau. Bao gồm các thẻ: if, elsif/else, case/when, unless.
 If: Thực hiện một đoạn mã khi điều kiện chính xác được đáp ứng.
Ví dụ
{% if product.name == 'Product A' %}
Sản phẩm giảm giá hôm nay "Product A"
{% endif %}
 elsif / else: Bổ sung các điều kiện khác khi dùng thẻ if hoặc unless.
Ví dụ:
{% if customer.name == 'Ha' %}
Chào bạn Ha!
{% elsif customer.name == 'guest' %}
Xin chào quý khách!
{% else %}
Chào bạn!
{% endif %}
 case/when: Tạo nên một hướng chuyển đổi để so sánh một biến số với các
giá trị khác nhau. Case sẽ tạo hướng chuyển đổi và when sẽ so sánh các giá trị..
Ví dụ
{% assign vendor = 'Adidas' %}
{% case vendor %}
{% when 'Adidas' %}
Một sản phẩm của Adidas
{% when 'Nike' %}
Một sản phẩm của Nike
{% else %}

17


Sản phẩm này không phải của Adidas hay Nike
{% endcase %}
 Unless: Thẻ này tương tự với if, nhưng nó sẽ thực hiện đoạn mã nếu các
điều kiện cụ thể không được đáp ứng.
Ví dụ
{% unless product.name == 'Adidas Neo' %}
Đây không phải là giày Adidas Neo
{% endunless %}
 Thẻ lặp
Các thẻ lặp dùng để chạy một đoạn mã nhiều lần liên tiếp: for, cycle.
 For: thực hiện một đoạn mã lặp lại nhiều lần. Để xem đầy đủ các thuộc
tính có trong vòng lặp for.
Vòng lặp chỉ có thể đưa ra tối đa 50 kết quả mỗi trang, trong trường hợp có
nhiều hơn 50 kết quả, hãy sử dụng thẻ paginate để phân thành nhiều trang.
Ví dụ:
{% for product in collection.products %}
{{ product.name }}
{% endfor %}
 Break: Sử dụng để tạm dừng vòng lặp.
Ví dụ:
{% for i in (1..5) %}
{% if i == 4 %}
{% break %}
{% else %}
{{ i }}
{% endif %}
{% endfor %}

 Continue: Bỏ qua 1 vòng lặp.
18


Ví dụ:
{% for i in (1..5) %}
{% if i == 4 %}
{% continue %}
{% else %}
{{ i }}
{% endif %}
{% endfor %}

 Tham số của for
 Limit: Thoát khỏi vòng lặp tại giá trị xác định.
Ví dụ:
<!-- if array = [1,2,3,4,5,6] -->
{% for item in array limit:2 %}
{{ item }}
{% endfor %}
 Offset: Bắt đầu vòng lặp tại giá trị xác định.
Ví dụ
<!-- if array = [1,2,3,4,5,6] -->
{% for item in array offset:2 %}
{{ item }}
{% endfor %}
 Range: Quy định khoảng bắt đầu và kết thúc của vòng lặp
Ví dụ:
{% assign num = 4 %}
{% for i in (1..num) %}

{{ i }}
{% endfor %}
{% for i in (3..5) %}
19


{{ i }}
{% endfor %}
 Reversed: Đảo ngược thứ tự của vòng lặp
Ví dụ:
<!-- if array = [1,2,3,4,5,6] -->
{% for item in array reversed %}
{{ item }}
{% endfor %}
 Cycle: Chạy qua một nhóm các chuỗi và xuất chúng theo thứ tự mà
chúng được thông qua như là tham số. Mỗi lần cycle được gọi, chuỗi tiếp theo đã
được thông như là một tham số là đầu ra. Cycle phải được sử dụng trong vòng
lặp for.
Ví dụ:
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
Cycle có thể sử dụng khi:
 Thêm vào class odd/even cho các hàng/cột trong bảng
 Thêm một class vào ảnh nhỏ cuối cùng trong một hàng
 Các thẻ liên quan đến biến
Các thẻ này dùng để tạo các biến Liquid mới sẽ được sử dụng trong giao
diện: assign, capture, increment, decrement.
 Assign: Tạo một biến mới.

Ví dụ
{% assign new_variable = false %}
{% if new_variable != true %}

20


Hiện thị nội dung cần thiết.
{% endif %}
Sử dụng ("") để tạo biến là một chuỗi.
Ví dụ
{% assign foo = "bar" %}
{{ foo }}
 Capture: Bắt một chuỗi và gán nó vào một biết mới.
Ví dụ
{% capture new_variable %}Nội dung chuỗi.{% endcapture %}
{{ new_variable }}
 Increment: Tạo một biến số mới và sau mỗi lần gọi sẽ tăng biến số thêm
một đơn vị, biến số mới bắt đầu bằng 0.
Ví dụ
{% increment variable %}
{% increment variable %}
{% increment variable %}
 Decrement: Tạo một biến số mới và sau mỗi lần gọi sẽ giảm biến số
thêm một đơn vị, biến số mới bắt đầu bằng -1.
Ví dụ
{% decrement variable %}
{% decrement variable %}
{% decrement variable %}
 Thẻ giao diện

Các thẻ giao diện có tác dụng để:
 Xuất ra các đoạn mã HTML đặc biệt
 Thông báo cho hệ thống biết cần phải gọi snippet nào khi hiển thị giao diện
 Phân trang cho giao diện.

21


Bao gồm các thẻ: comment, include, form, layout, paginate, raw.
 Comment: Cho phép bạn để lại chú thích trong đoạn mã Liquid. Nội
dung trong thẻ comment sẽ không được xuất ra ngoài, các đoạn mã Liquid trong
đó cũng sẽ không được thực thi.
Ví dụ
Xin chào {% comment %} bạn, {% endcomment %} Nguyễn Văn A!
 Include: Thêm một đoạn mã snippet lấy từ thư mục snippets của giao diện.
{% include 'snippet-name' %}
Chú ý, tên của snippet sẽ không bao gồm đuôi .bwt. Khi một snippet được
gọi ra để sử dụng, các đoạn mã trong snippet đó sẽ được quyền truy cập đến các
biến số trong template gốc.
 Form: Tạo đoạn mã HTML với <form> bao gồm các thuộc tính tương
ứng (action, id, etc.) và <input> để có thể gửi được thông tin thành công.

 Các tham số của form:
 article_comments
Tạo một form để thêm bình luận vào bài viết, sử dụng trong article.bwt. Bắt
buộc có đối tượng article như là một tham số.
Ví dụ
{% form "article_comments", article %}
...
{% endform %}

 contact
Tạo một form liên hệ để khách hàng có thể gửi liên hệ đến chủ website.
Ví dụ
{% form 'contact' %}
...
{% endform %}

22


 customer_register
Tạo một form để khách hàng có thể đăng kí tài khoản trên website, sử dụng
trong template register.bwt.
Ví dụ
{% form 'customer_register' %}
...
{% endform %}
 customer_address
Tạo một form để khách hàng chỉnh sửa địa chỉ nhận hàng hoặc thêm mới
địa chỉ nhận hàng khác, sử dụng trong template addresses.bwt. Khi thêm mới địa
chỉ, dùng tham số customer.new_address. Khi chỉnh sửa dùng tham số address.
Ví dụ
{% form 'customer_address', customer.new_address %}
...
{% endform %}
 customer_login
Tạo một form để khách hàng có thể đăng nhập tài khoản trên website, sử
dụng trong template login.bwt.
Ví dụ
{% form 'customer_login' %}

...
{% endform %}
 recover_customer_password
Tạo một form để khách hàng có thể lấy lại mật khẩu tài khoản trên website,
sử dụng trong template login.bwt.
Ví dụ
{% form 'recover_customer_password' %}
...
23


{% endform %}

 Layout: Hiển thị một layout khác từ thư mục layout của giao diện. Nếu
không có layout nào được chỉ định, theme.bwt sẽ được hiển thị mặc định.
Ví dụ:
<!-- Hiển thị layoput alternate.bwt -->
{% layout 'alternate' %}
 Paginate: Chia sản phẩm, bài viết blog hoặc kết quả tìm kiếm thành các
trang nhỏ, tối đa 50 đối tượng mỗi trang, xem thêm tại thẻ for.
Paginate phải được sử dụng với for để chia nội dung thành các trang khác
nhau. Nó phải bao ngoài vòng lặp for chạy qua một mảng.
Ví dụ:
{% paginate collection.products by 5 %}
{% for product in collection.products %}
<!--Hiển thị chi tiết sản phẩm -->
{% endfor %}
{% endpaginate %}
Tham số by sử dụng kiểu số nguyên từ 1 đến 50 để thông báo cho thẻ
paginate biết cần phân chia bao nhiêu đối tượng trên 1 trang.

Trong thẻ paginate, bạn có thể truy cập đến các thuộc tính của đối
tượng paginate. Nó bao gồm các thuộc tính để xuất ra các liên kết đến các trang
khác.
 Raw: Cho phép hiện thị một đoạn mã Liquid trên một trang. Đoạn code
này sẽ không được thực thi.
Ví dụ:
{% raw %}{{ 5 | plus: 6 }}{% endraw %} bằng 11

 Object – Đối tượng
Các Đối tượng chứa những thuộc tính được sử dụng để hiển thị nội dung
24


động trên một trang.
{{ product.title }} <!-- Output: Awesome T-Shirt-->
Các đối tượng trong Liquid bao gồm các thuộc tính để xuất ra các trang nội
dung động. Ví dụ: đối tượng product có thuộc tính là name có thể sử dụng để xuất
ra tên của sản phẩm.
Để gọi ra các thuộc tính của đối tượng trên một trang, ta sử dụng {{ và }},
như sau:
{{ product.name }} <!-- Output: “Awesome Shoes” -->
 Đối tượng tổng quát:
Đây là những đối tượng có thể được sử dụng và truy cập từ bất cứ tập tin
nào trong giao diện, chúng được gọi là đối tượng tổng quát hoặc biến tổng quát:
blogs

<ul>
{% for article in blogs.myblog.articles %}
<li>{{ article.title | link_to: article.url }}</li>
{% endfor %}

</ul>
Đối tượng blogs bao gồm các thuộc tính liên quan đến blog.

cart

Đối tượng cart bao gồm các thuộc tính liên quan đến giỏ hàng.

collections

{% for product in collections.frontpage.products %}
{{ product.name }}
{% endfor %}
Đối tượng collections bao gồm các thuộc tính liên quan đến
danh mục sản phẩm.

current_page

{% if current_page != 1 %} Trang {{ current_page }}{%
endif %}
Đối tượng current_page trả về số trang hiện tại khi bạn sử
dụng phân trang.

25