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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (4.23 MB, 89 trang )

LỜI CẢM ƠN
Trong thời gian thực hiện đồ án với sự giúp đỡ tạo điều kiện của Trường Đại
Học Công nghệ Thông Tin và Truyền Thông - ĐH Thái Nguyên, sự góp ý của các
bạn và đặc biệt là sự hướng dẫn trực tiếp, chỉ bảo tận tình của thầy TS. Bùi Ngọc
Tuấn em đã hoàn thành đề tài cùng với bản báo cáo đúng thời gian quy định.
Em xin chân thành cảm ơn thầy ThS. Nguyễn Quốc Bảo và thầy ThS.
Đào Trần Chung cùng toàn thể anh chị em 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 hỏi ngôn ngữ lập trình mới và được tiếp cận với môi
trường làm thực tế. Và là kinh nghiệm quý báu để em học tập, trang bị kiến thức
chuyên môn ngày một hoàn thiện hơn.
Bài báo cáo đồ án tốt nghiệp của em được thực hiện trong 10 tuần, bước
đầu em còn gặp nhiều khó khăn, bỡ ngỡ và vốn kiến thức hạn chế nên nội dung
đề tài không thể tránh khỏi những sai sót, em mong nhận được sự đóng góp ý
kiến, phê bình của thầy cô.
Một lần nữa, em xin chân thành cảm ơn tất cả các thầy, cô giáo, các tổ
chức liên kết đã dạy dỗ, chỉ bảo em trong suốt thời gian học tại trường. Em xin
kính chúc các thầy cô giáo trong trường Đại học Công Nghệ Thông Tin và
Truyền Thông Thái Nguyên, cùng toàn thể anh chị em trong trung tâm RDCMA
một sức khỏe dồi dào, công tác tốt, đạt được nhiều thành công trong công việc.

Thái Nguyên, tháng

năm 2016

Sinh viên thực hiện
Đào Thị Miền

1

LỜI CAM ĐOAN
Nhận thức được Đồ án tốt nghiệp là sản phẩm hoàn thiện của sinh viên
CNTT khi ra trường, cần tới sự miệt mài của bản thân và nhất là sự hướng dẫn chỉ bảo
tận tình của các Thầy cô giáo. Em đã tổng hợp các kiến thức được học cùng kinh
nghiệm và số liệu khảo sát thực tế nhằm hoàn thành Đồ án tốt nghiệp của mình.
Em xin cam đoan:
Những nội dung trong đồ án tốt nghiệp là do em thực hiện dưới sự trực
tiếp hướng dẫn của thầy TS. Bùi Ngọc Tuấn và ThS. Nguyễn Quốc Bảo
Mọi tham khảo dùng trong đồ án được trích dẫn rõ ràng tên tác giả, tên
công trình, thời gian, địa điểm công bố và danh mục tài liệu tham khảo.
Nội dung Đồ án của em không sao chép nội dung cơ bản của bất kỳ Đồ án
nào và là sản phẩm của chính bản thân em nghiên cứu thực tế xây dựng lên.
Mọi sao chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trá, em xin
cam đoan chịu hoàn toàn trách nhiệm trước Hội đồng bảo vệ.

Thái Nguyên, tháng

năm 2016

Sinh viên thực hiện
Đào Thị Miền

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

DANH MỤC BẢNG ...........................................................................................8
LỜI NÓI ĐẦU ....................................................................................................9
CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI..........................................................10
1.1. Đặt vấn đề ..............................................................................................10
1.1.1. Mục đích xây dựng đề tài ..............................................................10
1.1.2. Phạm vi đề tài ...............................................................................10
1.2. Cơ sở lý thuyết .......................................................................................11
1.2.1. Thương mại điện tử (TMĐT) ........................................................11
1.2.2. Điều kiện sản phẩm thương mại điện tử ........................................13
1.2.3. Tìm hiểu Shopify ..........................................................................14
1.2.3. So sánh phần mềm Shopify và một số mã nguồn mở khác ............18
1.3. Lập trình liquid.......................................................................................19
1.3.1. Giới thiệu lập trình liquid ..............................................................19
1.3.2. Toán tử - Operator.........................................................................20
1.3.3. Thẻ................................................................................................22
1.3.4. Đối tượng – Objects ......................................................................23
1.3.5. Bộ lọc – Filter ..............................................................................25
1.4. Cấu trúc giao diện Shopify .....................................................................29
1.4.1. Khung giao diện (layout)...............................................................30
1.4.2. Các template cơ bản ......................................................................31
1.4.3. Thiết lập giao diện (Customize theme) ..........................................32
CHƯƠNG 2: KHẢO SÁT, PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG.............35
2.1. Mô tả đối tượng nghiên cứu....................................................................35
2.1.1. Nêu bài toán..................................................................................35
2.1.2. Khảo sát xu hướng sử dụng Mega Menu hiện nay. ........................36

3

2.1.3. Đề xuất ý tưởng xây dựng chức năng Mega Menu cho Shopify.....46

2.1.4. Khảo sát một số website TMĐT trên nền Shopify hiện nay...........49
2.1.5. Kế hoạch xây dựng theme “Supershop” Shopify. ..........................56
2.2. Phân tích thiết kế hệ thống......................................................................56
2.2.1. Xác định tác nhân..........................................................................56
2.2.2. Biểu đồ Use Case ..........................................................................58
2.2.3. Biểu đồ trình tự và cộng tác .........................................................62
2.2.4. Biểu đồ lớp ...................................................................................66
CHƯƠNG 3: CÀI ĐẶT CHƯƠNG TRÌNH ......................................................69
3.1. Quy trình xây dựng sản phẩm thương mại điện tử ..................................69
3.1.1. Section Header..............................................................................70
3.1.2. Section Product tabs......................................................................71
3.1.3. Section banner ..............................................................................72
3.1.4. Section Brand................................................................................73
3.1.5. Section Footer...............................................................................73
3.2. Một số giao diện chương trình................................................................74
3.2.1. Giao diện người dùng....................................................................74
3.2.2. Giao diện Admin...........................................................................83
KẾT LUẬN.......................................................................................................85
TÀI LIỆU THAM KHẢO .................................................................................87
NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN................................................89

4

DANH MỤC HÌNH ẢNH
Hình 1.1 Cấu trúc giao diện Shopify..................................................................29
Hình 1.2 Khung giao diện Shopify ....................................................................30
Hình 1.3 Các files template cơ bản ....................................................................32
Hình 1.4 Giao diện Customize theme ................................................................32
Hình 1.5 Thiết lập giao diện cho banner ............................................................34

Hình 2.1 Mega Menu bố trí theo chiều ngang và chiều dọc................................37
Hình 2.2 Menu có chứa icons ............................................................................37
Hình 2.3 Mega dropdown menu có sử dụng background-image.........................38
Hình 2.4 Mega dropdown menu sử dụng hình ảnh banner .................................38
Hình 2.5 Sử dụng hình ảnh cho menu ................................................................39
Hình 2.6 Menu đa cấp .......................................................................................39
Hình 2.7 Hiển thị form contact trong menu........................................................40
Hình 2.8 Mega menu cho mobile.......................................................................40
Hình 2.9 Hiển thị video và nội dung video trong menu......................................41
Hình 2.10 Hiển thị danh mục sản phẩm và carousel sản phẩm ...........................41
Hình 2.11 Hiển thị bố cục website qua hình ảnh trong menu .............................42
Hình 2.12 Hiển thị hình ảnh và nội dung của tính năng features ........................42
Hình 2.13 Mega menu sau khi scroll..................................................................43
Hình 2.14 Menu hiển thị hình ảnh, tiêu đề blog .................................................43
Hình 2.15 Ý tưởng xây dựng Mega Menu kiểu 1...............................................47
Hình 2.16 Ý tưởng xây dựng Mega Menu kiểu 2...............................................47
Hình 2.17 Ý tưởng xây dựng Mega Menu kiểu 3...............................................48
Hình 2.18 Ý tưởng xây dựng Mega Menu kiểu 4...............................................48
Hình 2.19 Ý tưởng xây dựng Mega Menu kiểu 5...............................................49
Hình 2.20 Trang chủ website “cendo” ...............................................................50
Hình 2.21 Trang chủ website “inspius zorka” ....................................................51
Hình 2.22 Trang chủ website “ap michael”........................................................52
Hình 2.23 Sơ đồ Xmind xây dựng theme “Supershop” Shopify .......................56
Hình 2.24 Biểu đồ Use Case khách hàng ...........................................................58

5

Hình 2.25 Biểu đồ Use Case Admin ..................................................................58
Hình 2.26 Biểu đồ trình tự của chức năng tạo Mega Menu ................................62

Hình 2.27 Biểu đồ cộng tác chức năng tạo Mega Menu .....................................63
Hình 2.28 Biểu đồ trình chức năng quick view ..................................................63
Hình 2.29 Biểu đồ cộng tác của chức năng quick view ......................................64
Hình 2.30 Biểu đồ trình tự của chức năng wishlist.............................................64
Hình 2.31 Biểu đồ cộng tác của chức năng wishlist ...........................................65
Hình 2.32 Biểu đồ trình tự của chức năng compare ...........................................65
Hình 2.33 Biểu đồ cộng tác của chức năng compare..........................................66
Hình 2.34 Biểu đồ lớp của chức năng Mega Menu ...........................................66
Hình 2.35 Biểu đồ lớp chức năng quick view ....................................................67
Hình 2.36 Biểu đồ lớp chức năng wishlist .........................................................67
Hình 2.37 Biểu đồ lớp chức năng compare ........................................................68
Hình 3.1 Khung header của website...................................................................70
Hình 3.2 Section Product tabs............................................................................71
Hình 3.3 Section banner ....................................................................................72
Hình 3.4 Section Brand .....................................................................................73
Hình 3.5 Section Footer.....................................................................................73
Hình 3.6 Giao diện chính của chương trình........................................................74
Hình 3.7 Giao diện Collection dạng Grid...........................................................75
Hình 3.8 Giao diện Collection dạng List............................................................76
Hình 3.9 Giao diện so sánh các sản phẩm ..........................................................77
Hình 3.10 Giao diện khi người dùng click vào wishlist......................................78
Hình 3.11 Giao diện View my wishlist ..............................................................78
Hình 3.12 Giao diện chức năng Quick View......................................................79
Hình 3.13 Giao diện xem chi tiết sản phẩm .......................................................80
Hình 3.14 Giao diện chức năng Add to Cart ......................................................80
Hình 3.15 Giao diện chi tiết chức năng Add to Cart...........................................81
Hình 3.16 Giao diện trang Blog .........................................................................82
Hình 3.17 Giao diện đăng nhập vào hệ thống ....................................................83

6

Hình 3.18 Giao diện quản lý bài viết .................................................................83
Hình 3.19 Giao diện quản lý sản phẩm ..............................................................84
Hình 3.20 Giao diện viết Code, chỉnh sửa HTML, CSS .....................................84

7

DANH MỤC BẢNG
Bảng 1.1 Bảng các toán tử trong Liquid.............................................................20
Bảng 1.2 Bảng các thẻ trong Liquid...................................................................22
Bảng 1.3 Bảng đối tượng trong lập trình Liquid.................................................23
Bảng 1.4 Bảng các loại bộ lọc trong lập trình Liquid .........................................26

8

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ử của
các công ty, doanh nghiệp trên, qua khảo sát thị trường sản phẩm thương mại
điện tử em nhận thấy cần bổ sung một số tính năng cần thiết của sản phẩm
thương mại điện tử, và sản phẩm đó có thể mang đi thương mại giúp người dùng
sử dụng sản phẩm đó theo nhu cầu sử dụng của cửa hàng. Đây cũng là lý do em
chọn đề tài: “Xây dựng chức năng Mega Menu và sản phẩm thương mại điện
tử trên nền Shopify”.

9

CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI
1.1. Đặt vấn đề
Trước sự phát triển ngày càng nhanh chóng của lĩnh vực Công nghệ thông
tin đi kèm với sự phát triển mạnh mẽ này là các dịch vụ, tiện ích để phục vụ đời
sống, công việc, giải trí... của con người cụ thể là dịch vụ mua bán trực tuyến qua
mạng đang tỏ ra hiệu quả đối với con người và dần trở thành nhu cầu thiết yếu
phục vụ con người.
Nắm bắt được nhu cầu thiết yếu này, sau một khoảng thời gian nghiên
cứu và tìm hiểu thị trường em đã đưa ra quyết định đồ án tốt nghiệp của mình là :
“Xây dựng chức năng Mega Menu và sản phẩm thương mại điện tử trên nền
Shopify”.
1.1.1. Mục đích xây dựng đề tài
Xây dựng chức năng Mega Menu đáp ứng cho toàn bộ các theme thương

mại điện tử Shopify của trung tâm RDCMA. Mega Menu có khả năng tùy biến
cao, dễ dàng sử dụng, tính năng, hiệu ứng đa dạng, phù hợp với nhu cầu sử dụng
của từng menu trong các theme khác nhau.
Xây dựng hoàn chỉnh theme “thương mại điện tử” trên nền Shopify với
đầy đủ nhiều layout lựa chọn khác nhau, đầy đủ các tính năng của một website
bán hàng trực tuyến và còn thêm một số tính năng vượt trội hơn so với các theme
khác.
Đóng gói theme mang đi thương mại trên thị trường themeforest.
Mục tiêu của nghiên cứu em đã tìm hiểu sâu hơn và làm rõ các khái niệm
sản phẩm thương mại điện tử. Biết cách phân tích cho một hệ thống, tiếp cận
công cụ lập trình, các kĩ thuật lập trình trên môi trường internet. Tìm hiểu sản
phẩm thương mại trên nền Shopify, xây dựng chức năng MegaMenu và sản phẩm
thương mại điện tử.
1.1.2. Phạm vi đề tài
Sản phẩm thương mại điện tử là sản phẩm, lĩnh vực rộng cả về nghiệp vụ
lẫn lý thuyết ứng dụng. Doanh nghiệp, tổ chức hay cá nhân muốn hoạt động

10

trong lĩnh vực này cần đòi hỏi phải có thời gian tìm hiểu để tiếp cần và hiểu nó
hơn. Đề tài nghiên cứu trong phạm vi:
- Tìm hiểu về Shopify.
- Xây dựng chức năng “MegaMenu”.
- Xây dựng sản phẩm thương mại điện tử “Supershop” và mang đi thương
mại.
- Tập trung vào việc thiết kế, xây dựng nhiều layout, đầy đủ các chức năng
của sản phẩm thương mại điện tử, giao diện hoàn chỉnh.
Đây là một sản phẩm thương mại đủ mạnh để cho phép nhanh chóng xây
dựng các ứng dụng bán hàng trên Internet. Với tính năng của sản phẩm thương

mại điện tử website xây dựng nhằm mục đích ứng dụng cho các cửa hàng bán
sản phẩm đa dạng như thời trang, đồng hồ, máy tính, điện thoại,... áp dụng cho hệ
thống cửa hàng lớn, nhỏ khác nhau.
1.2. Cơ sở lý thuyết
1.2.1. Thương mại điện tử (TMĐT)
1.2.1.1. Khái niệm thương mại điện tử
TMĐT là hình thức quan trọng của các hoạt động thương mại trong xã hội
ở thế kỉ XXI, bao gồm một loạt các hoạt động thương mại được thực hiện thông
qua mạng, từ tìm nguồn nguyên liệu, thu mua, trưng bày sản phẩm, đặt hàng đến
giao hàng, vận chuyển và thanh toán điện tử,…Ngoài các giao dịch điện tử đối
với mua bán hàng hóa, TMĐT sẽ bao gồm cả những hoạt động thương mại dịch
vụ như việc truyền tin trực tuyến, chuyển tiền điện tử, giao dịch cổ phiếu điện tử,
vận đơn điện tử, tiến hành đấu giá trên mạng…TMĐT vừa đề cập việc mua bán
hàng hóa và cung cấp các dịch vụ, vừa có những nội dung hoạt động xã hội
mới(cửa hàng ảo, kinh doanh qua mạng,…).
Tuy nhiên, TMĐT càng được biết tới như một phương thức kinh doanh hiệu
quả nhất từ khi internet hình thành và phát triển. Chính vì vậy, nhiều người hiểu
TMĐT theo nghĩa cụ thể hơn là giao dịch thương mại, mua sắm qua internet và mạng.

11

1.2.1.2. Lợi ích của thương mại điện tử.
Đối với doanh nghiệp, lợi ích lớn nhất mà TMĐT mang lại chính là sự kết
hợp chi phí vào tạo lợi nhuận cho các bên giao dịch. Giao dịch bằng phương tiện
điện tử nhanh hơn so với giao dịch truyền thống. Các giao dịch qua internet có
chi phí rất rẻ, với TMĐT các bên có thể tiến hành giao dịch khi ở cách xa nhau,
giữa thành phố với nông thôn, từ nước này sang nước khác hay nói cách khác là
không bị giới hạn không gian địa lý. Điều này cho phép các doanh nghiệp tiết
kiệm chi phí sản xuất, giao dịch. Bên cạnh đó, doanh nghiệp có thể mở rộng thị

trường, tìm kiếm, liên lạc với đối tác và khách hàng ở bất kì nơi đâu với chi phí
thấp hơn phương thức tiếp cận thị trường truyền thống.
Đối với người tiêu dùng, TMĐT mở rộng khả năng lựa chọn hàng hóa,
dịch vụ và nhà cung cấp. Do có nhiều lựa chọn nên khách hàng dễ tìm được sản
phẩm có chất lượng cao hoặc giá thấp. Hàng hóa như phần mềm, phim, nhạc có
thể được giao ngay đến khách hàng qua internet.
Đối với xã hội, TMĐT tạo ra một phong cách kinh doanh, làm việc mới
phù hợp với cuộc sống công nghiệp, giúp các khu vực kém phát triển nhanh
chóng mở rộng trao đổi. TMĐT là một công cụ giúp doanh nghiệp vừa và nhỏ
khắc phục những điểm kém lợi thế để cạnh tranh bằng với doanh nghiệp lớn.
TMĐT cũng tạo ra động lực mạnh mẽ.
1.2.1.3. Website thương mại điện tử là gì?
Theo quy định tại Nghị định số 52/2013/NĐ-CP ngày 16/5/2013 của
Chính phủ về thương mại điện tử, website thương mại điện tử là trang thông tin
điện tử được thiết lập để phục vụ một phần hoặc toàn bộ quy trình của hoạt động
mua bán hàng hóa hay cung ứng dịch vụ, từ trưng bày giới thiệu hàng hóa, dịch
vụ đến giao kết hợp đồng, cung ứng dịch vụ, thanh toán và dịch vụ sau bán hàng.
Với thời kì CNTT phát triển cực thịnh, smartphone được sử dụng từ cụ già
đến trẻ nhỏ. Việc tìm kiếm khách hàng tiềm năng trên Internet đã quá phổ biến
và trở thành một trong những chiến lược chính của một số lượng không nhỏ công
ty doanh nghiệp.

12

Thương mại điện tử lên ngôi, đồng nghĩa với việc website trở thành một
điều không thể thiếu trong chiến dịch tăng doanh thu doanh số. Một đơn vị hoạt
động tìm kiếm doanh thu trên internet ngoài sử dụng các dịch vụ có sẵn như rao
vặt, mạng xã hội, gian hàng,.. nhất thiết phải trang bị cho mình một website
thương mại điện tử với những chức năng cũng như những trải nghiệm căn bản

nhất chí ít là dành cho khách hàng của họ.
Website thương mại điện tử với tính năng mở rộng nâng cao, giúp người
bán có thể bán được sản phẩm qua mạng internet và người mua có thể mua được
sản phẩm họ cần thông qua mạng internet. Website thương mại điện tử sẽ có chức
năng chính đó là hiển thị thông tin sản phẩm bao gồm giá cả, giới thiệu về sản phẩm,
chức năng mua hàng,… giao dịch sẽ được thanh toán qua các cổng thanh toán trực
tuyến như Ngân Lượng, Bảo Kim hoặc chuyển khoản qua ngân hàng.
1.2.2. Điều kiện sản phẩm thương mại điện tử
Để tạo ra sản phẩm thương mại điện tử có sức cạnh tranh lớn, khách hàng
đang đòi hỏi chất lượng cao hơn và chức năng tốt hơn để cho các nhà phát triển
tìm ra những cách thức mới để làm cho sản phẩm của trở nên nổi bật.
Điều kiện để có sản phẩm thương mại mang có tính cạnh tranh lớn đòi hỏi
những yêu cầu, chức năng nổi bật cần thiết như:
 Đòi hỏi thiết kế (Design) đẹp mắt
Một thiết kế tốt đòi hỏi website trong các layout với khoảng trắng, canh
chỉnh, lựa chọn màu sắc và cách trình bày văn bản. Cấu trúc dễ dàng chỉnh sửa
để cho phù hợp với sidebar bên trái, bên phải.
Tùy chỉnh nhiều layout (home) khác nhau với các header phù hợp với các
nội dung khác nhau. Kích thước của logo có thể thay đổi mà không ảnh hưởng
tới layout, theme cho phép cấu trúc nhiều cột. Các layout có thể tùy biến theo ý
người dùng. Được xây dựng trên khung Bootstrap một trong những khung tốt
nhất linh hoạt sạch sẽ, tương thích với mobile và các thiết bị cầm tay. Và đi kèm
với nhiều tùy chọn để có thể quản lý từng chi tiết nhỏ bên trong nó để tạo ra
phong cách riêng của doanh nghiệp, công ty bạn.

13

Thiết kế cần phải nổi bật, có thể đơn giản giống như là một khung hình
ảnh độc nhất, một slide show trên trang chủ, menu với tính năng animation đa

dạng, các nút button, hover qua hình ảnh đòi hỏi độ mượt. Tạo nên sự riêng biệt
website của bạn so với các website khác.
 Chi tiết
Tất cả đều chi tiết, website thương mại điện tử với những đường kẻ sắc nét,
những hiệu ứng chuyển màu mượt mà, canh chỉnh phù hợp và sử dụng khoảng trắng
tốt. Các chức năng dễ dàng sử dụng, khả năng chỉnh sửa một cách dễ dàng.
 Tạo cho người dùng những thao tác tùy chọn dễ dàng nhất.
Để có được sản phẩm thương mại điện tử cung cấp các thiết lập có thể
chỉnh sửa mọi thứ. Sản phẩm phải tạo cho người dùng những điều khiển đơn giản
nhất, dễ thao tác .Ví dụ, nếu thiết kế có menu chính trong phần footer, hãy chắc
rằng bạn có thêm một tuỳ chọn để chuyển nó lên phần header. Giao diện hỗ trợ
thay đổi màu sắc của rất nhiều thành phần như: hình nền, liên kết, text, menu ….
 Chế độ tùy chọn layout khác nhau, tùy chọn footer, header.
Sản phẩm có nhiều layout(home) để lựa chọn, đa dạng màu sắc, hình ảnh,
đa dạng chế độ hiển thị banner. Người dùng muốn hiển thị layout màu sáng hay
tối một sản phẩm thương mại phải đáp ứng được nhu cầu đó của người dùng.
1.2.3. Tìm hiểu Shopify
1.2.3.1. Giới thiệu sơ lược về Shopify
Shopify – Một công ty của Canada hoạt động từ năm 2006: Thực sự thì
đây là một giải pháp toàn diện cho các cửa hàng, cửa hiệu về cả mặt Online và
Offline. Là dịch vụ thương mại điện tử.
Giải pháp bán hàng này đã và đang nhận được sự quan tâm của hơn
90.000 người dùng chính thức trên toàn thế giới. Đây là Shopping Cart nổi tiếng
nhất khi có số lượng người dùng đông đảo nhất, với đầy đủ các thành phần như
người dùng cá nhân, các doanh nghiệp với quy mô bé đến lớn…Điều này phần
nào nói lên được về mức độ “nổi tiếng” của Shopify.
Các gian hàng mà Shopify cung cấp với đa dạng các lĩnh vực, ngành nghề
và có giao diện bắt mắt và chuyên nghiệp.

14

Thêm vào đó, chúng ta còn có thể bổ sung thêm các tiện ích dạng
Application (Ứng dụng) cho gian hàng ảo hiện tại để nó trở lên phong phú, tiện
dụng hơn với khách hàng ghé thăm.
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. 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.
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
trang công nghệ lớn nhất thế giới như TechCrunch, Mashable, The New York
Times, The Wall Street Journal,...
Shopify là một trong 4 nhà cung cấp nền tảng thương mại điện tử trực
tuyến lớn nhất thế giới bên cạnh Bigcommerce, Weebly eCommerce và
Squarespace eCommerce. Tuy nhiên, trong những cái tên kể tên thì Shopify được
đánh giá cao nhất với hơn 245.000 cửa hàng trực tuyến và đang không ngừng
tăng lên. Với Shopify, bạn sẽ được những thứ sau đây:
- 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,...
- 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.

15

- 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, đă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.
1.2.3.2. Lịch sử phát triển Shopify
Shopify được thành lập vào năm 2004 bởi Tobias Lutke, Daniel Weinand
và Scott Lake.
Tháng 6/2009, Shopify đã đưa ra nền tảng API platform và App Store.
API cho phép nhà phát triển tạo các ứng dụng cho cửa hàng Shopify trực tuyến
và bán sản phẩm trên Shopify App Store. Một số công ty đã phát triển các ứng
dụng tích hợp với nền tảng Shopify.
Tháng 4/2010, Shopify tung ra ứng dụng di động miễn phí trên Apple App
Store vào tháng 5/2010. Ứng dụng của Shopify cho phép chủ sở hữu xem và
quản lý cửa hàng của họ bằng thiết bị di động IOS.
Tháng 8/2013, Shopify đã cho ra mắt Shopify Payments, cho phép chủ sở
hữu chấp nhận thẻ tín dụng mà không yêu cầu cổng thanh toán bên thứ ba.
Đến năm 2014, Shopify đã có xấp xỉ 120.000 người dùng mở cửa hàng
trực tuyến. Shopify đã kiếm được 105 triệu đô la gấp đôi so với doanh thu của
các năm trước.
1.2.3.3. 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ư:
- Giao diện website chuẩn cho các cửa hàng Online (có tất cả hơn 100 giao
diện) và tất nhiên là phải có Domain + Hosting để website đó có thể hoạt động.
- Mobile – Friendly.
- Quản lý admin chuyên nghiệp.

16

- Shopify Facebook Store.
- 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.
- Tính năng quản lý khách hàng, chăm sóc khách hàng, các mẫu email tự
động trả lời cho khách hàng.
- Quản lý đơn hàng, tồn kho, tùy biến các lựa chọn cho sản phẩm chuyên
nghiệp, tiện lợi.
- 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 .
- Công cụ báo cáo, phân tích dữ liệu về traffic, đơn hàng, khách hàng,
insights người dùng … toàn diện và hữu ích.
- 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…
- Tích hợp những tính năng tự động như: Đặt hàng, thanh toán, báo cáo,
quản lý quy trình (tuỳ theo yêu cầu của quý khách và tính chất ngành nghề), tài
khoản log-in cho khách hàng...
- Tích hợp sẵn các tính năng quảng bá website trên Internet, cho phép tối
ưu hóa việc quảng bá hình ảnh sản phẩm và doanh nghiệp.
- Hoạt động ổn định, tính bảo mật cao. Dễ dàng nâng cấp theo yêu cầu.

- Chế độ chăm sóc và hỗ trợ khách hàng 24/7.
- Thông thường các chức năng: đăng và quản lý sản phẩm, giỏ hàng, thanh
toán trực tuyến, đăng nhập và đăng ký, quản lý đơn hàng… sẽ được tích hợp vào
trong website thương mại điện tử. Và để bạn dễ hình dung hơn nữa thì bạn chỉ
cần hiểu về website thương mại điện tử đó là buôn bán, giao dịch thông qua
website, trang web này hoạt động bằng mạng internet.
- 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.

17

- Cung cấp phương thức thanh toán đa dạng, linh hoạt một cách gián tiếp
hoặc trực tiếp bằng chức năng thanh toán trực tuyến với những đối tác uy tín.
- Tích hợp sẵn các tính năng Quảng bá website trên Internet, cho phép tối
ưu hóa quảng bá hình ảnh sản phẩm và doanh nghiệp.
- Khách truy cập dễ dàng tìm thấy dịch vụ, sản phẩm cần thiết chỉ bằng vài
cú click chuột nhờ hệ thống link điều hướng đến những nội dung chính được bố
trí chuyên nghiệ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.
- Hệ thống quản trị web thương mại điện tử hiện đại, đơn giản, giúp doanh
nghiệp quản lý web, cập nhật sản phẩm, dịch vụ một cách dễ dàng, nhanh chóng.
- 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.
1.2.3. So sánh phần mềm Shopify và một số mã nguồn mở khác
 Haravan
Tính năng cũng y như vậy do Haravan copy lại y nguyên hệ thống và cách
thức vận hành của Shopify, chỉ có 1 vài điểm khác biệt sau đây:
- Về UX và UI tức là giao diện và trải nghiệm của người dùng củ 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 cà 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.
- Nhưng bù lại 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 1 số
tính năng về vận chuyển và Marketing phù hợp hơn với người Việt Nam.

18

- Giá của Haravan rẻ hơn nhiều so với Shopify. Điều này cũng là dễ hiểu
khi so sánh giữa 1 bên là nguyên bản và 1 bên là copy lại.
 Woocommerce
Là một plugin miễn phí được sử dụng để tạo một trang thương mại điện tử
cỡ nhỏ tốt nhất hiện nay trong WordPress. Nó cũng như bao plugin khác là bổ
sung chức năng vào website nhưng nó sẽ bổ sung gần như toàn diện các chức
năng mà một trang bán hàng đơn giản cần có.
Woocommerce sẽ có các chức năng chính như:
- Tạo sản phẩm với định dạng thông thường, sản phẩm có thuộc tính, sản
phẩm affiliate và sản phẩm kỹ thuật số (có thể tải về).
- Hỗ trợ một số hình thức thanh toán online như PayPal, Credit Card,
CoD, Cash và sẽ càng nhiều hơn khi cài thêm plugin hỗ trợ cho riêng nó.
- Hỗ trợ tự tính thuế sản phẩm hoặc thuế theo đơn hàng.
- Hỗ trợ tự tính giá chuyển phát, có rất nhiều loại tính giá chuyển phát và
sẽ đa dạng hơn khi cài thêm plugin như có thể tính giá chuyển phát dựa theo cân

nặng, kích thước, tỉnh thành,…
- Trang quản lý đơn hàng chuyên nghiệp, lọc đơn hàng thông qua từng
trạng thái.
- Hỗ trợ template hiển thị riêng để có thể tự cấu hình lại template hiển thị
phần shop và sản phẩm, cái này rất có lợi cho lập trình viên.
- Có sẵn nhiều theme và extension (plugin mở rộng) để biến thành trang
shop chuyên nghiệp.
1.3. Lập trình liquid
1.3.1. Giới thiệu lập trình liquid
Liquid là ngôn ngữ lập trình giao diện, một mã nguồn mở, phát triển từ
năm 2006 dựa trên ngôn ngữ nền tảng là Ruby. Sử dụng để fontend có thể truy
cập và lấy dữ liệu từ backend một cách an toàn và dễ dàng.
Ư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

19

-

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.

1.3.2. Toán tử - Operator

1.3.2.1. Các toán tử cơ bản
Trong Liquid có thể sử dụng được tất cả các toán tử logic cũng như so
sánh, chúng có thể được sử dụng trong các thẻ if và unless.
Bảng 1.1 Bảng các toán tử trong Liquid
==

Bằng

!=

Không bằng

>

Lớn hơn

<

Nhỏ hơn

>=

Nhỏ 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
contains

Điều kiện A và điều kiện B
Kiểm tra xem có sự xuất hiện của
chuỗi

Ví dụ:
{% if product.name contains 'Converse' %}
This is a product of Converse
{% endif %}

- “contains” cũng có thể kiểm tra sự xuất hiện của một chuỗi trong một
mảng.
1.3.2.3. Kiểu dữ liệu
a. Logic True - False trong Liquid
- Tất cả mọi giá trị trong Liquid đều là "true", ngoại trừ null và false.
{% assign product_items = 'dress' %}
{% if product_items %}
Điều này sẽ luôn luôn đúng
{% endif %}

20

- Một chuỗi luôn là đúng kể cả khi nó rỗng. Ví dụ sau, sẽ cho ra kết quả
một thẻ HTML rỗng nếu giá trị “settings.homepage_heading” là rỗng:
{% if settings.homepage_heading %}

{% endif %}

- Trong Liquid, null và false là 2 giá trị duy nhất sai.
“null” là kết quả trả về khi đối tượng Liquid không có gì để trả về. Ví dụ,
nếu danh sách sản phẩm không có ảnh đại diện, “collection.image” sẽ được đặt
là null, vì nó là sai nên bạn có thể làm được điều sau
{% if collection.image %}

{% endif %}

b. Kiểu – Type
Đối tượng Liquid có thể trả về một trong số 6 kiểu sau: chuỗi (string), số
(number), Boolean, Nil, mảng (array). Các biến Liquid có thể được định nghĩa
bằng thẻ assign hoặc capture.
- Chuỗi – String: Chuỗi được gán bằng cách cho giá trị của biến vào
trong ngoặc đơn ('') hoặc ngoặc kép (""):
{% assign my_string = "Xin chào!" %}

- Số - Number: Bao gốm số thực và số nguyên.
{% assign my_num = 25 %}

- Booleans
Boolean có thể gán là đúng (TRUE) hoặc sai (FALSE). Không cần sự
trích dẫn khi tuyên bố boolean.
{% assign foo = true %}
{% assign bar = false %}

- Nil
Nil là 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ả. Nó không phải là một chuỗi với các kí tự “nil”.
Nil được xem như là kết quả sai của các khối điều kiện {% if %} và các
tags Liquid khác khi kiểm tra tính chính xác của một tuyên bố. Trong ví dụ sau

21

đây nếu như không có một mã vận đơn(tracking number) được nhập vào khi giao
hàng (fulfillment), câu lệnh if sẽ không thể trả về văn bản nằm trong nó.
{% if fulfillment.tracking_numbers %}
Đơn hàng có mã vận đơn
{% endif %}

- Mảng - Array
Chứa một danh sách các biến của mọi kiểu dữ liệu. Truy cập tất cả các đối
tượng trong mảng.
Để truy cập các tối tượng trong một mảng, bạn có thể liên kết các đối
tượng bằng cách sử dụng thẻ for.
1.3.3. Thẻ
Thẻ 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
tham số này có thể xem chi tiết tại thông tin về thẻ đó.
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
Bảng 1.2 Bảng các thẻ trong Liquid
Thẻ điều khiển

Thẻ lặp

Thẻ giao diện

luồng

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

Ví dụ:

22

{% assign check_even_int = check_even_int | plus :1 %}
{% if check_even_int == 2 %}
{% assign product_full_width_style = "style2" %}
{% elsif check_even_int == 3 %}
{% assign check_even_int = 1 %}
{% assign product_full_width_style = "" %}
{% endif %}

1.3.4. Đối tượng – Objects
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, khi gọi các thuộc tính theo đối tượng tương ứng, sử dụng {{ và}}
Ví dụ:
{{ product.name }}

Đối tượng tổng quát
Bảng 1.3 Bảng đối tượng trong lập trình Liquid
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
collections

Đối tượng cart bao gồm các thuộc tính liên quan đến giỏ hàng
{% for product in collections.frontpage.products %}
{{ product.title }}
{% 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 %}
Page {{ 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.

23

current_tags


{% if current_tags %}

{{ blog.title | link_to: blog.url }} › {{
current_tags.first }}

{% else %}

{% endif %}

Đối tượng current_tags trả về các tag đang được sử dụng để lọc
customer

{% if shop.customer_accounts_enabled %}
{% if customer %}
<a href="/account">My Account</a>
{{ 'Log out' | customer_logout_link }}
{% else %}
{{ 'Log in' | customer_login_link }}
{% if shop.customer_accounts_optional %}
{{ 'Create an account' | customer_register_link }}
{% endif %}
{% endif %}
{% endif %}

Đối tượng customer chỉ có thể sử dụng khi khách hàng đăng
nhập tài khoản trên website.
linklists

<ul>
{% for link in linklists.categories.links %}
<li>{{ link.title | link_to: link.url }}</li>
{% endfor %}
</ul>

Đối tượng linklists bao gồm các liên kết trong một menu, bạn có
thể truy cập đối tượng này qua định danh (alias) của nó.
pages

{{ pages.about.author }} says...

<div>{{ pages.about.content }}</div>
{% if page_description %}

24

{% endif %}

Đối tượng pages gồm các trang nội dung có trong website
settings

{% if settings.use_logo %}
{{ 'logo.png' | asset_url | img_tag: shop.name }}
{% else %}
<span class="no-logo">{{ shop.name }}</span>
{% endif %}
{% if settings.featured_collection and
settings.featured_collection != '' and
collections[settings.featured_collection].handle ==
settings.featured_collection and
collections[settings.featured_collection].products_count
> 0 %}
{% for product in
collections[settings.featured_collection].products %}
{% include 'product-loop' %}
{% endfor %}
{% endif %}

Đối tượng settings cho phép bạn truy cập các thiết lập giao diện
đã được thiết lập.
template

<body class="{{ template }}">

Đối tượng template trả về cho biết template bạn đang sử dụng.
1.3.5. Bộ lọc – Filter
Bộ lọc – Filter: Bộ lọc được sử dụng để sửa đổi đầu ra của chuỗi, số, các
biến, và cá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 |.
{{'sales'|append:'.jpg'}}