Xây dựng sản phẩm thương mại điện tử vanesa và chức năng banner builder trên nền shopify

LỜI CẢM ƠN
Để hoàn thành đồ án này, em xin cảm ơn Thầy T.S Bùi Ngọc Tuấn, thầy
Th.S 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 này. Đồng thời, em cũng xin chân thành cảm ơn thầy Th.S
Đào Trần Chung cùng toàn thể các bạn trong trung tâm nghiên cứu và phát triển
phần mềm (RDCMA) đã tạo mọi điều kiện thuận lợi, chỉ dẫn tận tình để em được
nghiên cứu, học tập và được tiếp cận với môi trường làm thực tế. 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ử Vanesa và chức năng banner
builder 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 Nghệ Thông Tin, 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 đồ án 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 luôn dồi dào
sức khỏe, đạt được nhiều thành công tốt đẹp trong công việc.
Thái Nguyên, ngày 26 tháng 05 năm
2016
Sinh viên

1

Phạm Thị Hà

2


LỜI CAM ĐOAN
Em xin cam đoan báo cáo đồ án tốt nghiệp 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 T.S Bùi Ngọc Tuấn và thầy 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 Thái Nguyên. Trong báo cáo có sử dụng
các tài liệu tham khảo được trích dẫn rõ ràng về tên tác giả, thời gian công bố cùng
danh mục tài liệu tham khảo như đã nêu trong phần tài liệu tham khảo.
Nếu có phát hiện bất kỳ sự gian trá nào trong đồ án, em xin chịu hoàn toàn
trách nhiệm trước Hội đồng bảo vệ.
Thái Nguyên, ngày 26 tháng 05 năm 2016
Sinh viên
Phạm Thị Hà

3


MỤC LỤC
LỜI CẢM ƠN1
LỜI CAM ĐOAN
MỤC LỤC

2

3

DANH MỤC BẢNG VÀ HÌNH ẢNH
LỜI NÓI ĐẦU

5

7

CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 10
1.1. Tìm hiểu về thương mại điện tử và sản phẩm thương mại điện tử

10

1.1.1. Một số định nghĩa về thương mại điện tử 10
1.1.2. Vai trò, lợi ích và hạn chế của thương mại điện tử
1.1.3. Sản phẩm thương mại điện tử
1.2. Tổng quan về Shopify

11

12

1.2.1. Giới thiệu sơ lược về Shopify
1.2.2. Tính năng của Shopify

12

14

1.2.3. So sánh Shopify với một số mã nguồn

1.3. Lập trình Liquid

10

15

17

1.3.1. Tags – Nhãn 17
1.3.2. Object – Đối tượng 22
1.3.3. Giới thiệu Bộ lọc - Filter

25

CHƯƠNG 2 KHẢO SÁT HIỆN TRẠNG VÀ PHÂN TÍCH THIẾT KẾ HỆ THỐNG
34
2.1. Mô tả đối tượng nghiên cứu

34

2.1.1. Nêu bài toán 34
2.1.2. Khảo sát xu hướng sử dụng banner hiện nay.

35

2.1.3. Đề xuất giải pháp cho sản phẩm Vanesa trên nền Shopify
2.1.4. Kế hoạch xây dựng sản phẩm Vanesa trên nền Shopify 40
2.2. Yêu cầu sản phẩm đề xuất 41
4

38


2.3. Phân tích thiết kế hệ thống 42
2.3.1. Biểu đồ UseCase

42

2.3.2. Biểu đồ Trình tự và Cộng tác
2.3.3. Biểu đồ lớp

49

53

CHƯƠNG 3 XÂY DỰNG SẢN PHẨM VÀ CHỨC NĂNG BANNER BUILDER
56
3.1. Xây dựng sản phẩm thương mại điện tử Shopify56
3.1.1. Phần Header 58
3.1.2. Phần Menu

58

3.1.3. Slider 59
3.1.4. Main content(Shortcode products) 59
3.1.5. Banner builder

61

3.1.6. Brand 62

3.1.7. Phần Footer

63

3.2. Giao diện người dùng
3.3. Giao diện Admin

64

75

KẾT LUẬN 78
TÀI LIỆU THAM KHẢO

80

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

5

81


DANH MỤC BẢNG VÀ HÌNH ẢNH
Bảng 1.1 Bảng các đối tượng tổng quát của Liquid
Bảng 1.2 Bảng các tham số kích thước ảnh
Hình 1.1 Giao diện Customize theme

25

31

33

Hình 2.1 Các module trong Visual Composer của Wordpress 36
Hình 2.2 Banner sử dụng hình ảnh đơn giản

37

Hình 2.3 Banner sử dụng làm giao diện chính của website

38

Hình 2.4 Giải pháp xây dựng chức năng banner builder 40
Hình 2.5 Sơ đồ Xmind xây dựng theme “Vanesa” Shopify
Hình 2.6 Biểu đồ Use Case cho Tác nhân Customer

40

43

Hình 2.7 Biểu đồ Use Case cho Tác nhân Adminitrator(quản trị)

44

Hình 2.8 Biểu đồ trình tự cho chức năng banner builer 50
Hình 2.9 Biểu đồ cộng tác cho chức năng banner builer50
Hình 2.10 Biểu đồ trình tự cho tác vụ compare (so sánh sản phẩm)

50

Hình 2.11 Biểu đồ cộng tác cho tác vụ compare (so sánh sản phẩm) 51
Hình 2.12 Biểu đồ trình tự cho chức năng wishlist

51

Hình 2.13 Biểu đồ cộng tác cho chức năng wishlist

51

Hình 2.14 Biểu đồ trình tự cho chức năng thêm sản phẩm vào giỏ hàng(cart)52
Hình 2.15 Biểu đồ cộng tác cho chức năng thêm sản phẩm vào giỏ hàng(cart)
52
Hình 2.16 Biểu đồ trình tự cho chức năng quick view 52
Hình 2.17 Biểu đồ cộng tác của chức năng quick view 53
Hình 2.18 Biểu đồ lớp cho chức năng wishlist

53

Hình 2.19 Biểu đồ lớp cho chức năng compare 54
Hình 2.20 Biểu đồ lớp cho chức năng quickview54
Hình 2.21 Biểu đồ lớp cho chức năng thêm sản phẩm vào giỏ hàng
6

54


Hình 2.22 Biểu đồ lớp cho chức năng banner builder

55

Hình 3.1 Các khung chính của giao diện 57
Hình 3.2 Settings phần header cho theme 58
Hình 3.3 Giao diện sử dụng shortcode “tab product”

59

Hình 3.4 Giao diện sử dụng shortcode “tabs product” 60
Hình 3.5 Giao diện sử dụng shortcode “tab vertical”

60

Hình 3.6a Giao diện cho chức năng banner builder

61

Hình 3.6b Giao diện modal hiển thị code HTML62
Hình 3.6c Giao diện banner sau khi đã paste code HTML

62

Hình 3.7 Giao diện sử dụng shortcode “brand” 63
Hình 3.8 Giao diện phần Footer

63

Hình 3.9 Giao diện chính của chương trình

64

Hình 3.10a Giao diện Collection dạng Grid

65

Hình 3.10b Giao diện Collection dạng List

65

Hình 3.11 Giao diện trang hiển thị chi tiết một sản phẩm
Hình 3.12 Giao diện hiển thị trang wishlist

66

67

Hình 3.13 Giao diện trang compare (các sản phẩm được so sánh)

68

Hình 3.14a Giao diện khi thực hiện chức năng “Add to cart” 69
Hình 3.14b Giao diện hiển thị tất cả các sản phẩm trong giỏ hàng
Hình 3.15 Giao diện trang Contact Us

70

Hình 3.16 Giao diện trang About Us

71

Hình 3.17a Giao diện trang Blog dạng Grid

72

Hình 3.17b Giao diện một bài viết trong Blog

73

Hình 3.18 Giao diện trang Login cho khách hàng

74

Hình 3.19 Giao diện admin đăng nhập vào hệ thống

75

Hình 3.20 Giao diện viết Code, chỉnh sửa HTML, CSS 75
Hình 3.21 Giao diện quản lý sản phẩm

76

Hình 3.22 Giao diện quản lý bài viết

77
7

69


Hình 3.23 Giao diện quản lý khách hàng 77

8


DANH MỤC CÁC TỪ VIẾT TẮT
Chữ cái viết tắt/ký hiệu

Cụm từ đầy đủ

TMĐT

Thương mại điện tử

EC

Electronic commerce

CMS

Content Management System

HTML

HyperText Markup Language

CSS

Cascading Style Sheets

SEO

Search Engine Optimization

API

Application Programming Interface

9


LỜI NÓI ĐẦU
Ngày nay, thương mại điện 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 máy tính bảng,
di độ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 trên thế
giới. Khác với những đối thủ cạnh tranh khác, Shopify luôn tiên phong áp dụng
10


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.
Hầu hết các website bán hàng trực tuyến hiện nay đều có chức năng banner, quảng
bá giới thiệu sản phẩm theo giao diện mới. Đồng thời, trung tâm RDCMA đang
phát triển sản phẩm Shopify mà trong đó sản phẩm nào cũng cần banner. Từ đó,
đặt ra yêu cầu là cần có module có thể áp dụng được cho tất cả sản phẩm phát
triển, không cần xây dựng lại từ đầu khi làm một sản phẩm mới. Nắm bắt được xu
hướng này, em đã đi nghiên cứu tìm hiểu và xây dựng chức năng banner builder –
linh hoạt, dễ tùy biến cho sản phẩm Shopify.
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ố sản phẩm thương mại điện tử trên thị
trường của 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ử Vanesa và
chức năng banner builder trên nền Shopify” mục tiêu có được chức năng
banner linh hoạt, áp dụng vào để cho ra sản phẩm thương mại điện tử hoàn thiện.
Vì khả năng và thời gian còn hạn chế và trong giới hạn đề tài em sẽ chuyên
sâu vào làm sao để xây dựng hoàn thiện chức năng banner builder linh hoạt nhất và
áp dụng nó vào để ra được một trang web với giao diện đẹp, đơn giản, tương tác
với người dùng dễ dàng, đồng thời có đầy đủ những chức năng cơ bản nhất của
một website thương mại điện tử trên nền Shopify.
 Mục tiêu nghiên cứu
Nhằm tổng hợp những kiến thức đã học được trong suốt quá trình học tập

tại trường cũng như những kiến thức có được trong quá trình làm đồ án tại trung
tâm RDCMA để:
 Tìm hiểu rõ hơn, sâu hơn và làm rõ các khái niệm về TMĐT, sản phẩm
TMĐT và Framework.
 Khả năng phân tích cho một hệ thống
 Hiểu về Shopify và lập trình liquid
11


 Kĩ thuật lập trình trên môi trường internet
 Tìm hiểu và áp dụng các công nghệ mới như Bootstrap, HTML5, CSS3,
Javascript…
Trên cơ sở đó tiến hành xây dựng chức năng banner builder và sản phẩm
TMĐT toàn diện cho người dùng là doanh nghiệp, tổ chức, cá nhân cũng có thể
là người tiêu dùng. Việc xây dựng hệ thống này cần phải thỏa mãn những tiêu
chí như:
 Chức năng banner builder linh hoạt, áp dụng được mọi hệ thống của Shopify
 Có đầy đủ những chức năng của một website TMĐT bình thường
 Tích hợp những tính năng mới nhất hiện nay vào công việc thanh toán
 Giao diện đẹp mắt, dễ quản lý và đơn giản sử dụng, được thiết kế để
hiện thị tối ưu trên mọi thiết bị.
 Tương thích với các bộ máy tìm kiếm như Google, Bing,…
 An toàn, ổn định và bảo mật dữ liệu…
 Phương pháp nghiên cứu
Phương pháp nghiên cứu kết hợp các phương pháp tổng hợp, thống kê,
phân tích và tham khảo một vài ý kiến của các thầy cô hướng dẫn cũng như doanh
nghiệp hướng dẫn…
 Phương pháp nghiên cứu lý thuyết: đọc tài liệu, phân tích và tổng hợp
tài liệu nghiên cứu.
 Tham khảo tài nguyên trên internet dưới sự chỉ dẫn của giáo viên hương

dẫn.
 Phạm vi nghiên cứu
Phạm vi của sản phẩm thương mại điện tử rất rộng, bao quát hầu hết các
lĩnh vực hoạt động kinh tế, việc mua bán hàng hóa và dịch vụ…do đó cần đòi hỏi
phải có nhiều thời gian và kinh nghiệm tìm hiểu cũng như tiếp cận với nó. Trong
giới hạn phạm vi của đề tài thực hiện về quy mô, không gian và thời gian đối với
12


nguồn số liệu của vấn đề nghiên cứu. Đề tài nghiên cứu trong phạm vi:
 Tìm hiểu sản phẩm thương mại điện tử và Shopify.
 Tập trung xây dựng hoàn thiện chức năng “banner builder”
 Tập trung vào việc thiết kế giao diện, xây dựng giao diện hoàn thiện.
 Xây dựng hoàn chỉnh sản phẩm thương mại điện tử “Vanesa”

13



CHƯƠNG 1 CƠ SỞ LÝ THUYẾT
 Tìm hiểu về thương mại điện tử và sản phẩm thương mại điện tử
 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.
 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

14


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


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
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.
 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
16


đượ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 [7].
Shopify là nền tảng thương mại điện tử tốt trên 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
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.
17


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 trên thế giới. Shopify cũng được giới thiệu bởi những 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.
18


 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
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.
 So sánh Shopify với một số mã nguồn
Qua việc khảo sát trên mạng cũng như trong quá trình làm đồ án tốt nghiệp
19


tại Trung tâm RDCMA của trường ĐH Công nghệ thông tin và truyền thông Thái
Nguyên em đã khảo sát một vài Framework cùng với Shopify và thấy được những
đặc điểm như sau:
 Haravan:
 Shopify và Haravan là 2 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. Về tính năng Haravan có cách thức vận hành
tương tự Shopify chỉ có 1 vài điểm khác biệt sau đây:

 Về giao diện và trải nghiệm người dùng của Haravan ở trong phần
admin (quản trị) chưa được thông minh và mượt mà như Shopify. Và quan trọng
hơn là có 1 vài tính năng vẫn thiếu sót chưa hoàn thiện, chưa có 1 hệ thống đồ sộ
app hỗ trợ như Shopify.
 Nhưng ngược lại về giao diện ngoài trang bán hàng thì đã được làm
theo phong cách quen thuộc và thân thiện hơn với người Việt.
 Hệ thống POS (Point Of Sales) tức là các công cụ hỗ trợ tại điểm bán
như máy hóa đơn, máy thanh toán thẻ … chưa được hoàn thiện như Shopify.
 Chưa có ứng dụng quản lý trên smartphone thuận lợi như Shopify.
 Tuy nhiên, thì đây là một sản phẩm làm tại Việt Nam nên họ có thể kết
nối được với Giao Hàng Nhanh, 5 Giây, Webtretho, Kiot Việt nên sẽ thêm một số
tính năng về vận chuyển và Marketing phù hợp hơn với người Việt Nam.
 Magento
Magento là một Thương mại điện tử ứng dụng web mã nguồn mở.
Shopify là một sản phẩm thương mại (mà bạn cần phải trả tiền) trong khi
Magento cộng đồng là một phần mềm mã nguồn mở miễn phí.
Qua khảo sát một vài sản phẩm của Magento em nhận thấy rằng hầu hết các
sản phẩm đã có những tính năng nổi bật như add to cart, wishlist, compare… Tuy
nhiên thì giao diện chưa được mượt khi hover cũng như xử lý các action. Có hỗ trợ

20


slider tuy nhiên không được mượt và nhiều hiệu ứng như Nivoslider.
Với Magento chức năng viết Blog được sử dụng plugin miễn phí còn với
Shopify chức năng này đã được tích hợp sẵn
 Woocommerce
WooCommerce là một plugin cơ bản WordPress, là một lựa chọn tốt cho
phép quản trị web để tạo ra chất lượng, các trang web chức năng cao.
Shopify cung cấp thêm tính năng nhanh hơn, nâng cao hơn và với một thiết

kế tốt hơn, nó là một trong những nền tảng tốt nhất hiện có. Ngoài ra, Shopify chắc
chắn là dễ dàng hơn để thực hiện và an toàn hơn.
Khảo sát một vài sản phẩm của Woocommerce cho thấy các sản phẩm của
nó có thiết kế và giao diện tương đối mượt, đẹp mắt và hầu hết đều sử dụng các
hiệu ứng animation, transition đẹp. Các chức năng chuyển đổi tiền tệ tương đối
hoàn chỉnh, hiệu ứng di chuyển text ở slide show độ mượt, kiểu chuyển đổi
(animation) tương đối đẹp. Hỗ trợ nhiều Layout để người sử dụng lựa chọn. Menu
Blog hiển thị ảnh của cùng tiêu đề bài viết ở trong Menu con.
Tuy nhiên, vẫn còn những sản phẩm chưa có đầy đủ các tính năng như icon
menu
 Lập trình Liquid
Liquid [6] 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 [6] 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: {%%}.
Một số thẻ như for và cycle có thể đi kèm theo một số tham số. Các thẻ có
21


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
 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.
 elsif / else: Bổ sung các điều kiện khác khi dùng thẻ if hoặc unless.
 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ị..
 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.
 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.
 Break: Sử dụng để tạm dừng vòng lặp.
 Continue: Bỏ qua 1 vòng lặp.

 Tham số của for
 Limit: Thoát khỏi vòng lặp tại giá trị xác định.
 Offset: Bắt đầu vòng lặp tại giá trị xác định.
Range: Quy định khoảng bắt đầu và kết thúc của vòng lặp

22


 Reversed: Đảo ngược thứ tự của vòng lặp
 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.

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.
 Capture: Bắt một chuỗi và gán nó vào một biết mới.
 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.
 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.


23


 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.
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
 contact
 customer_register
 customer_address
 customer_login
 recover_customer_password
 Layout: Hiển thị một layout khác từ thư mục layout của giao diện. Nếu
24


không có layout nào được chỉ định, theme.bwt sẽ được hiển thị mặc định.
 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.
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.
 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
độ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:

25