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

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

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

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

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

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

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

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

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

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

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”

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

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

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

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

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

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

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

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

- 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

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

- 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

- 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

- 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

- 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

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

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

<h1>{{ settings.homepage_heading }}</h1>

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

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

đâ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ó

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

paginate raw

Ví dụ:

{% assign check_even_int = check_even_int | plus :1 %}

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 }} <! Output: "Awesome Shoes" >

Đố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 Đố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 %}

<a href="/account">My Account</a>

{{ 'Log out' | customer_logout_link }}

{% for link in linklists.categories.links %}

<li>{{ link.title | link_to: link.url }}</li>

<meta name="description" content="{{ page_description }}" />

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'}}<! Output:sales.jpg >

Bảng 1.4 Bảng các loại bộ lọc trong lập trình Liquid

Bộ lọc mảng –

Array filters

jion: {{ product.tags | join: ', ' }}

=> Result: tag1, tag2, tag3

first: <! product.tags = "sale", "mens", "womens",

"awesome" >

{{ product.tags | first }} => Result: "salse"

last: <! product.tags = "sale", "mens", "womens",

"awesome" >

{{ product.tags | last }} => Result:awesome

index: <! product.tags = "sale", "mens", "womens",

"awesome" >

{{ product.tags[2] }} => Result: mens

map: <! collection.title = "Spring", "Summer",

<! products = "a", "b", "A", "B" >

{% assign products = collection.products | sort:

– HTML filters {{ product | img_tag }}

{{ variant | img_tag: 'alt text' }}

{{ line_item | img_tag: 'alt text', 'css-class' }} {{ image | img_tag: 'alt text', 'small' }}

{{ collection | img_tag: 'alt text','clec','large' }}

abs: {{ -17 | abs }} => Result: 17

ceil: {{ 4.6 | ceil }} => Result: 5

{{ product | img_url: 'small' }}

{{ variant | img_url: 'small' }}

{{ line_item | img_url: 'small' }}

{{ image | img_url: 'small' }}

{{ collection | img_url: 'small' }}

{{ article.published_at | date: "%a, %b %d, %y" }}

=> Result: Tue, Apr 22, 14

json:

var content = {{ pages.page-handle.content | json }};

1.4 Cấu trúc giao diện Shopify

Hình 1.1 Cấu trúc giao diện Shopify

- layouts: Bao gồm các file khung giao diện, mặc định sẽ có theme.liquid

- templates: Bao gồm các template của giao diện

- snippets: Gồm các đoạn mã ngắn (snippet) mà giao diện có thể dùng lại

nhiều lần khi cần

- assets: Bao gồm các file thư viện sẽ được sử dụng cho giao diện như

ảnh, file css và các file js

- configs: Gồm 2 tập tin settings_schem.json và settings_data.json

- locales: Gồm các file dịch ngôn ngữ gồm các files: de.json,

en.default.json, es.json, fr.json, pt-BR.json, pt-PT.json

1.4.1 Khung giao diện (layout)

Hình 1.2 Khung giao diện Shopify

Khung giao diện là một thành phần rất quan trọng của giao diện Các thành phần của website sẽ hiển thị thông qua khung giao diện đang được kích hoạt

Chỉ có một khung giao diện được sử dụng mỗi khi hiển thị trang web Các thành phần xuất hiện lặp đi lặp lại ở tất cả các trang nên được đặt trong theme.liquid Ví dụ: logo, menu đầu trang, phần chân trang

{% for link in linklists.main-menu.links %}

<li {%if link.active %}class="current"{% endif%}>

<a href="{{ link.url }}">{{ link.title }}</a>

Hình 1.3 Các files template cơ bản

1.4.3 Thiết lập giao diện (Customize theme)

Hình 1.4 Giao diện Customize theme

Người phát triển giao diện có thể dễ dàng thêm vào các tùy chọn để người dùng sử dụng có thể tùy biến các thành phần của giao diện mà không cần biết hay tìm hiểu về Liquid

Khả năng tùy biến đem lại sự tiện lợi cho người dùng, cũng như tạo nên điểm nổi trội của giao diện

Thông qua thiết lập giao diện, người sử dụng giao diện có thể:

 Kích hoạt ẩn/hiện một khu vực, đối tượng trên giao diện như banner, slideshow, hiển thị danh sách sản phẩm,

 Thay đổi nội dung của một đối tượng như thay đổi banner, thay đổi danh mục sản phẩm sẽ hiển thị tại một khu vực,

Ví dụ: Thiết lập giao diện cho banner:

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

2.1.1 Nêu bài toán

Với những tính năng vượt trội được nêu ở trên cùng với nhu cầu mua sản phẩm thương mại được rất đông đảo người mua với mục đích website đó bán các sản phẩm thương mại điện tử nó giúp cho:

Các doanh nghiệp vừa tiết kiệm được chi phí, mang lại giá trị về thương hiệu cũng như việc trao đổi với khách hàng được nhanh chóng, mở rộng thị trường

Đối với khách hàng, việc mua sản phẩm trên mạng tiết kiệm được thời gian, xem được chi tiết các sản phẩm, so sánh sản phẩm yêu thích với các sản phẩm cùng loại một cách chi tiết nhất Khách hàng có thể lựa chọn mặt hàng để mua Khác với mua trực tiếp tại cửa hàng thì khách hàng tự thao tác thông qua từng bước cụ thể để có thể mua hàng trên mạng, các mặt hàng được sắp xếp theo thứ tự dễ tìm kiếm, thao tác nhanh gọn

Đặc biệt, nhu cầu hiện nay sử dụng Framework 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 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 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 biệt, Mega Menu là một phần không thể

thiếu đối với mỗi website và đang là xu hướng tất yếu hiện đại của mọi website thương mại điện tử Nó có thể giúp cho việc sắp xếp các menu con trong các cột khác nhau của các hạng mục khác nhau một cách dễ dàng Độ tùy biến cao về giao diện, hình ảnh, hiển thị ở mỗi menu, dễ dàng truy cập vào thông tin nào mà bạn muốn tìm kiếm

Chính vì nhu cầu sử dụng, cùng với các tính năng vượt trội của Shopify

hơn một số sản phẩm thương mại điện tử khác mà em đã phát triển sản phẩm thương mại điện tử trên nền Shopify để tạo ra sản phẩm để đưa đi thương mại

2.1.2 Khảo sát xu hướng sử dụng Mega Menu hiện nay

2.1.2.1 Tầm quan trọng của Mega Menu đối với website thương mại điện tử

Đối với mỗi website, Mega Menu chính đóng một vai trò hết sức quan

trọng Nó giới thiệu cho người truy cập về những gì mà website của bạn có, là

phần tóm tắt về nội dung trang web Mục đích của Mega Menu cho phép độ tùy

biến cao của người dùng, tùy vào mục đích sử dụng trang web mà người dùng có thể tùy biến theo cách riêng của họ Dropdown Menu thường hiển thị tất cả các tùy chọn trong một mega-panel và nhóm các chủ đề có liên quan lại với nhau thành một nhóm

 Tính năng của Mega Menu

- Mega Menu hỗ trợ menu hiển thị với nhiều hiệu ứng slideDown/slideUp, fadeIn /fadeOut và các hiệu ứng đơn giản khác;

- Mega Menu không chỉ hỗ trợ tạo mega menu rất đẹp mà còn hỗ trợ thêm các tính năng khác như icons, video, hình ảnh, banner, background-image, menu đa cấp, Có thể đặt bất kỳ nội dung gì trong Dropdowns: liên kết, văn bản, hình ảnh,…

- Responsive & Mobile Tối ưu hóa bao gồm cả iPhone, iPad, và Android;

- Dễ dàng thêm hình ảnh vào menu;

- Tùy chỉnh nội dung;

- Tạo settings tùy chỉnh cho menu;

- Dễ dàng tổ chức sub-menu theo ý người dùng;

- Dễ sử dụng;

- Dropdown CSS3 Transitions;

- Hỗ trợ Menu dọc hoặc ngang;

- Tự động phân chia độ rộng, số cột cho dropdown mega menu;

- Thiết lập hình ảnh nền cho mỗi menu con;

2.1.2.2 Khảo sát một số MegaMenu của framework khác

 Mega Menu Woocommerce

Khảo sát Mega Menu của một số theme Woocommerce trên thị trường themeforest có các tính năng nổi bật:

- Thiết kế menu theo 2 chiều: Menu theo chiều ngang (Horizontal) và menu theo chiều dọc(Vertical) Bố trí dropdown meu theo tabs, hàng, cột,

Hình 2.1 Mega Menu bố trí theo chiều ngang và chiều dọc

- Bố trí menu dọc có sử dụng icons

Hình 2.2 Menu có chứa icons

- Trong dropdown menu có sử dụng background-image

Hình 2.3 Mega dropdown menu có sử dụng background-image

- Mega menu có chứa hình ảnh

Hình 2.4 Mega dropdown menu sử dụng hình ảnh banner

- Menu được bố trí có nhiều level

Hình 2.5 Sử dụng hình ảnh cho menu

- Thêm hình ảnh banner vào trong dropdown menu Và có thêm tính năng ở các collection có thêm label “new”

Hình 2.6 Menu đa cấp

- Hiển thị form thông tin liên hệ ngay trên menu

Hình 2.7 Hiển thị form contact trong menu

- Mega Collapsible Navigation Menu – Thiết kế menu của website hiển thị thu gọn trên các devices nhỏ như điện thoại hay máy tính bảng

Hình 2.8 Mega menu cho mobile