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ộ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 th

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

Phạm Thị Hà

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à

LỜI NÓI ĐẦU 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ử 101.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ử 10

1.1.3 Sản phẩm thương mại điện tử 11

1.2 Tổng quan về Shopify 12

1.2.1 Giới thiệu sơ lược về Shopify 12

1.2.2 Tính năng của Shopify 14

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

1.3 Lập trình Liquid 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 382.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

3.2 Giao diện người dùng 64

3.3 Giao diện Admin 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 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 25

Bảng 1.2 Bảng các tham số kích thước ảnh 31

Hình 1.1 Giao diện Customize theme 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 40

Hình 2.6 Biểu đồ Use Case cho Tác nhân Customer 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)52Hì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 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 66

Hình 3.12 Giao diện hiển thị trang wishlist 67

Hình 3.13 Giao diện trang compare (các sản phẩm được so sánh) 68Hì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 69Hì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

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

DANH MỤC CÁC TỪ VIẾT TẮT

Chữ cái viết tắt/ký hiệu Cụm từ đầy đủ

API Application Programming Interface

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 choviệ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ưShopifykhá 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

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

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

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”

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

 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á

 Sản phẩm thương mại điện tử

Một sản phẩm thương mại điện tử là sản phẩm phải đạt được những yêu cầu hoặc tiêu chuẩn nhất định để đem đến cho khách hàng một sản phẩm TMĐT hay website không chỉ ấn tượng về giao diện mà còn hoàn hảo về chức năng và trải nghiệm người dùng

 Chất lượng thiết kế

Yếu tố được xem xét đầu tiên chính là chất lượng thiết kế Thiết kế là một yếu tố thuộc về thẩm mĩ, nó là xấu hay đẹp và nó không liên quan tới khả năng code hay sự thành thạo PSD Đơn giản đó chỉ là cách sử dụng typography, spacing, visual hierachy, color, contrast, layout… Hiện nay, các thiết kế thường theo xu hướng phẳng, đơn giản Đơn giản ở đây vì thiết kế đẹp, nó tuân thủ theo những

nguyên tắc thiết kế và nhìn bắt mắt Tất cả những gì bạn phải làm là có một thiết

kế đẹp, và bạn chỉ tập trung vào thiết kế, đẩy tất cả những cái “dirty behind” gồm thanh toán, bảo mật, mua bán… cho bên thứ ba

 Độc đáo

Độc đáo là một yếu tố quan trọng cho sản phẩm thương mại điện tử Nó là một sự thống nhất trong thiết kế từ đầu đến cuối trang web từ việc sử dụng font chữ, màu sắc, tương phản cho tới các hiệu ứng, bố cục…Nên có tính độc đáo riêng 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

được đặt tên là Tobias Lütke được thành lập vào năm 2006,Shopifylà 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

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ămgiao diện chuyên nghiệpvới phần lớn là giao diện miễn phí

 Khoứng dụngđồ sộ với hàng trăm ứng dụng miễn phí thuộc nhiều lĩnh vực khác nhau như: Marketing, Sales, mạng xã hội, quản lý đơn hàng, chăm sóc khách hàng, Hệ thống Marketing chuyên nghiệp với các tính năng cung cấp mã giảm giá, thẻ quà tặng, tab cửa hàng trên Facebook, hệ thống email marketing, tính năng review sản phẩm …

 Miễn phí Hosting chất lượng cao với tính năng bảo mật được đảm bảo tuyệt đối và băng thông không giới hạn Cho dù trang của bạn có 100 hay 100.000 người cùng truy cập cùng một lúc thì tốc độ luôn được đảm bảo ở mức nhanh nhất

 Hỗ trợ trực tuyến 24/7 Bạn có thể gọi điện hoặc Chat với Shopify để được hỗ trợ vào bất cứ thời điểm nào trong ngày

 Tích hợp thanh toánPayPal, Visa, MasterCard

 Hệ thống adminquả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 choSEO: 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

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

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ợ

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ó

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

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

 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ặpfor

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



 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:

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ạithẻ 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ượngpaginate 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:

<ul>

{% for article in blogs.myblog.articles %}

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

{{ 'Tạo tài khoản' | customer_register_link }}

<ul>

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

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

<div>{{ pages.about.content }}</div>

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

Đối tượng page_title trả về tiêu đề của trang hiện tại

store Đối tượng store bao gồm các thông tin liên quan đến

website

{% if template contains 'product' %}

Bạn đang ở trang sản phẩm{% endif %}

Đối tượng template trả về cho biết template bạn đang

Bảng 1.1 Bảng các đối tượng tổng quát của Liquid

 Giới thiệu Bộ lọc - Filter

Bộ lọc mà một cách dùng để sửa đổi kết quả được xuất ra của một số, chuỗi, biến hoặc đối tượng Chúng được đặt trong các thẻ{{ }}, được phân cách bởi |

Một vài bộ lọc yêu cầu phải có tham số mới có thể sử dụng

Ví dụ

{{ product.name | remove: "Ma" }}

Nhiều bộ lọc có thể sử dụng trên cùng một dữ liệu được xuất ra, chúng sẽ được áp dụng từ trái sang phải

 Bộ lọc mảng - Array filter

Bộ lọc mảng dùng để sửa đổi đầu ra của một mảng dữ liệu

 Join: Liên kết các yếu tố của một mảng bởi ký tự được chèn vào như

một tham số, kết quả nhận được sẽ là một chuỗi đơn

Ví dụ:

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

 First: Trả về yếu tố đầu tiên của một mảng.

first có thể sử dụng sau dấu chấm , trong trường hợp nó cần được sử dụng

bên trong mộtthẻ.

{% if product.tags.first == "giảm giá" %}

Sản phẩm đang được giảm giá!

{% endif %}

 Last: Lấy phần tử cuối của một mảng.

last có thể sử dụng sau dấu chấm , trong trường hợp nó cần được sử dụng bên trong mộtthẻ

Sử dụng last với một chuỗi, bạn sẽ lấy được ký tự cuối của chuỗi đó

 Index: Trả về đối tượng tại một vị trí cụ thể trong mảng Lưu ý rằng một

mảng bắt đầu bằng 0, nên vị trí đầu tiên trong mảng là [0]

 Map: Chấp nhận một danh sách các thuộc tính của phần tử trong mảng

và xuất ra một chuỗi ghép bởi các thuộc tính đó

 Size: Trả về kích thước của một chuỗi (số kí tự) hoặc một mảng (số phần tử).

 Sort: Sắp xếp các phần tử của một mảng bằng một thuộc tính của phần

Bộ lọc img_tag có thể áp dụng lên các đối tượng: product, variant, line item, collection, image

 script_tag: Tạo thẻ script.

 stylesheet_tag: Tạo thẻ chèn file css.

 Bộ lọc toán học - Math filters

Bộ lọc toán học cho phép thực hiện các phép tính toán

Bộ lọc toán học có thể liên kết với các bộ lọc khác và được áp dụng từ trái qua phải ceil divided_by, floor, minus, plus, round, times, modulo

 Bộ lọc tiền tệ - Money Filters

Bộ lọc tiền tệ sẽ định dạng giá dự theo thiết lập tiền tệ của cửa hàng (được thiết lập trong trang quản trị): money, money_with_currency, money_without_currency

 money: Định dạng giá dựa trên thiết lập của website (có hoặc không có

mã HTML của đơn vị tiền tệ)

 money_with_currency: Định dạng đơn vị tiền tệ theo thiết lập Định dạng

có tiền tệ của website

 money_without_currency: Trả về định dạng tiền tệ chỉ có số, không có

đơn vị tiền tệ

 Bộ lọc chuỗi - String Filters

Bộ lọc chuỗi được sử dụng để chỉnh sửa đầu ra và các biến của dữ liệu chuỗi

 Append: Thêm ký tự vào sau một chuỗi.

 Remove: Loại bỏ tất cả các chuỗi con thích hợp trong một chuỗi.

 Replace: Thay thế các chuỗi con bằng chuỗi tương ứng.

 Bộ lọc URL- URL Filter

Các bộ lọc URL sẽ xuất ra đường dẫn đến các tài nguyên được trên máy chủ CDN của website, các bộ lọc này cũng sẽ sử dụng để tạo nên liên kết để lọc danh mục sản phẩm hay blog

 asset_url: Trả về đường dẫn của file trong thư mục "assets" của giao diện.

 file_url: Trả về đường dẫn của file được upload lên trong trang quản trị

website

 img_url: Trả về đường dẫn đến file ảnh, chấp nhận tham số vềkích

thước ảnh

Bộ lọc img_url có thể sử dụng với các đối tượng sau: product, variant, line item, collection, image

 Tham số: Kích thước ảnh

pico Returns the image at a maximum size of 16 by 16 pixels

icon Returns the image at a maximum size of 32 by 32 pixels

thumb Returns the image at a maximum size of 50 by 50 pixels

small Returns the image at a maximum size of 100 by 100 pixels

compact Returns the image at a maximum size of 160 by 160 pixels

medium Returns the image at a maximum size of 240 by 240 pixels

large Returns the image at a maximum size of 480 by 480 pixels

grande Returns the image at a maximum size of 600 by 600 pixels

original Deprecated - do not use this when creating themes

Returns the image at a maximum size of 1024 by 1024 pixels

1024x1024 Returns the image at a maximum size of 1024 by 1024 pixels

2048x2048 Returns the image at a maximum size of 2048 by 2048 pixels

master Returns the largest possible image (the current maximum image size

is 2048 x 2048 pixels)

Bảng 1.2 Bảng các tham số kích thước ảnh

 Cấu trúc giao diện Shopify

Cấu trúc giao diện Shopify bao gồm các file cơ bản:

- 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

- 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

 Khung giao diện (layout)

Khung giao diện là một thành phần rất quan trọng trong theme 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, phần header, phần footer

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

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

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

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

Hình 1.1 Giao diện Customize themeNgườ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,



CHƯƠNG 2 KHẢO SÁT HIỆN TRẠNG VÀ PHÂN TÍCH

THIẾT KẾ HỆ THỐNG

 Mô tả đối tượng nghiên cứu

 Nêu bài toán

Các nền tảng thương mại điện tử miễn phí hàng đầu như Magento, OpenCart, PrestaShop, Wordpress, osCommerce,…đang rất phổ biến và được sử dụng bởi rất nhiều cửa hàng trực tuyến trên toàn thế giới Các giải pháp thương mại điện tử Open Source giúp lập trình và quản lý website thương mại điện tử Nhờ vào các giải pháp này, khách hàng có thể quản lý danh mục sản phẩm, cài đặt website bán hàng trực tuyến (đồ họa và hỗ trợ tối đa người dùng), đề xuất quy trình bán hàng tối ưu (giỏ hàng, chuyển phát, thuế và các phương thức thanh toán) đồng thời đảm bảo hoạt động của website (đơn hàng, chiến dịch marketing và emailing, quan hệ khách hàng, xúc tiến thương mại…)

Đặc biệt, nhu cầu 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 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 Việc chọn lựa các giải pháp hiệu quả nhất trên thị trường dựa trên nhiều tiêu chí đã được đề ra sau nhiều năm theo sát công nghệ, tích lũy kinh nghiệp và đóng góp vào lĩnh vực Open Source

Nhận thấy, banner là một phần không thể thiếu trong hầu hết các website

bán hàng và hiện nay xu hướng giao diện đơn giản, chỉ sử dụng các ảnh banner để quảng bá sản phẩm được sử dụng rất phổ biến Do đó, em tập trung vào xây dựng chức năng này sao cho có thể áp dụng được cho tất cả các sản phẩm phát triển Shopify, độ tùy biến giao diện, hình ảnh, hiển thị ở mỗi banner cao Đồng thời tập trung vào các giải pháp bền vững, chất lượng của cộng đồng lập trình, khả năng phát triển cũng như tính bảo mật của các giải pháp này để cho ra sản phẩm hoàn thiện có các chức năng chính của một website thương mại điện tử

 Khảo sát xu hướng sử dụng banner hiện nay.

Có những đánh giá cho rằng, banner không thật sự quan trọng trong một website Tuy nhiên, qua khảo sát thị trường website thương mại điện tử hiện nay, việc sử dụng banner để quảng bá thương hiệu là rất cần thiết và được chú trọng Việc có banner là cần thiết nhưng làm sao để có được những giao diện banner tùy thích mà không cần mất nhiều thời gian với cách bố trí code Mục đích của banner builder chính là cho phép người dùng sử dụng đơn giản nhất, có thể kéo thả theo ý muốn và tưởng tượng ra nhanh chóng giao diện để xây dựng ra trang web của mình một cách dễ dàng mà không cần nhiều kiến thức lập trình

Các tính năng trực quan Banner builder

 Kéo và thả giao diện trực quan

+ Trọng lượng nhẹ, dễ sử dụng giao diện mà khách hàng sẽ yêu thích

+ Tạo trang và các bài viết dễ dàng hơn bao giờ hết

+ Không yêu cầu người dùng có kiến thức lập trình

 Định hướng đối tượng: Hình ảnh banner sử dụng các mô hình lập trình tiên tiến và hiệu quả nhất, để có được kết quả tốt nhất cho trang web

 Thiết kế responsive: Giao diện tương thích trên các kích thước màn hình khác nhau cả máy tính để bàn, laptop hay điện thoại di động

 Chiều rộng, chiều cao hàng và khoảng cách vị trí:

Tạo toàn bộ chiều rộng và chiều cao hàng với các tùy chọn kéo dài linh hoạt Việc kiểm soát khoảng cách giữa các hàng, các cột với nhau đã được định sẵn, người dùng chỉ cần xác định vị trí ở giữa hay trên đỉnh, rộng bao nhiêu… Xây dựng phần này chỉ trong vài giây Thiết lập khoảng cách giữa các cột hoặc ghép chúng lại với nhau và vị trí kiểm soát của các cột, các nội dung trong cột với kết cấu theo chiều dọc

 SEO thân thiện: Hình ảnh banner là hoàn toàn tương thích với hầu hết

các plugin SEO phổ biến.



 Khảo sát một số Banner của framework khác

 Woocommerce

 Ưu điểm: Sử dụng Visual Composer có rất nhiều tính năng nổi bật, dễ

dàng cho người sử dụng