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

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

Em xin cảm ơn Thầy ThS Nguyễn Quốc Bảo, đã tận tình hướng dẫn và giúp đỡ em trong thời gian thực hiện bài báo cáo đồ án tốt nghiệp này Trong suốt thời gian từ khi bắt đầu học tập ở giảng đường đại học đến nay, em đã nhận được rất nhiều sự quan tâm, giúp đỡ của các thầy cô, gia đình và bạn bè Với sự hướng dẫn của thầy cô giáo và nhu cầu thực tế phát triển tại trung tâm RDCMA em đã lựa

chọn đề tài: “Xây dựng sản phẩm thương mại điện tử SOZO trên nền Shopify”.

Với lòng biết ơn sâu sắc nhất, em chân thành cảm ơn quý Thầy, Cô trong Khoa Công Điện Tử và Truyền Thông, các thầy ở trung tâm RDCMA Trường Đại Học Công Nghệ Thông Tin và Truyền thông đã tận tình và tâm huyết truyền đạt kiến thức quý báu trong những năm em học tập Với vốn kiến thức được tiếp thu trong quá trình học không chỉ là nền tảng cho quá trình nghiên cứu học tập mà còn

là hành trang quý báu để em bước vào đời một cách vững chắc và tự tin

Em cũng xin chân thành cảm ơn đến các bạn bè đã giúp đỡ tài liệu, trao đổi học thuật mới có thể thực hiện bài thực tập tốt nghiệp này Xin gửi lời cảm ơn đến các bạn

Sau cùng, em xin kính chúc quý Thầy Cô thật dồi dào sức khỏe, niềm tin để tiếp tục thực hiện sứ mệnh cao đẹp của mình là truyền đạt kiến thức cho thế hệ mai sau Đồng kính chúc các thầy cô và các bạn trong trung tâm RDCMA đạt được nhiều thành công tốt đẹp trong công việc

Thái Nguyên, ngày tháng năm 2016

Sinh viên

Nguyễn Quang Long

LỜI CAM ĐOAN

Em xin cam đoan báo cáo này là công trình tổng hợp và nghiên cứu của cá nhân em, được thực hiện trên cơ sở nghiên cứu lý thuyết, kiến thức dưới sự hướng dẫn tận tình của thầy giáo Th.s Nguyễn Quốc Bảo cùng các thầy và các bạn trong trung tâm RDCMA trường Đại học Công nghệ thông tin và Truyền thông Trong báo cáo có sử dụng một số tài liệu tham khảo như đã nêu trong phần tài liệu tham khảo

MỤC LỤC

LỜI CẢM ƠN 1

LỜI CAM ĐOAN 2

MỤC LỤC 3

DANH MỤC HÌNH ẢNH 4

LỜI NÓI ĐẦU 5

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 6

1.1 Đặt vấn đề 6

1.2 Tìm hiểu về thương mại điện tử và sản phẩm thương mại điện tử 7

1.2.1 Một số định nghĩa về thương mại điện tử 7

1.2.2Vai trò, lợi ích và hạn chế của thương mại điện tử 8

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

1.3Tổng quan về Shopify 10

1.3.1Giới thiệu sơ lược về Shopify 10

1.3.2Tính năng của Shopify 11

1.4Lập trình Liquid 13

1.4.1Tags – Nhãn 13

1.4.2Object – Đối tượng 21

1.4.3Giới thiệu Bộ lọc - Filter 24

CHƯƠNG 2: MÔ TẢ, KHẢO SÁT HIỆN TRẠNG VÀ 32

PHÂN TÍCH THIẾT KẾ HỆ THỐNG 32

2.1 Khảo sát các giao diện điện tử hiện nay 32

2.2Phân tích hệ thống 37

2.2.1 Biểu đồ UseCase 37

CHƯƠNG 3: XÂY DỰNG SẢN PHẨM THƯƠNG MẠI ĐIỆN TỬ SOZO TRÊN

NỀN SHOPIFY 47

3.1 Các bước xây dựng sản phẩm thương mại điện tử 47

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

3.3 Giao diện Admin 63

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 66

TÀI LIỆU THAM KHẢO 67

DANH MỤC HÌNH ẢNH Hình 3.1 Sơ đồ Xmind xây dựng theme “SOZO” Shopify 35

Hình 3 2: Biểu đồ Use Case cho Tác nhân Customer 38

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

Hình 3 4: Biểu đồ trình tự cho tác vụ compare (so sánh sản phẩm) 44

Hình 3 5: Biểu đồ cộng tác cho tác vụ compare (so sánh sản phẩm) 44

Hình 3.6: Biểu đồ trình tự cho chức năng wishlist 45

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

Hình 3.8: Biểu đồ lớp chức năng tìm kiếm 46

Hình 4.1: Các khung chính của giao diện 48

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

Hình 4.3a: Giao diện Collection dạng Grid 52

Hình 4.3b: Giao diện Collection dạng List 53

Hình 4.4: Giao diện trang hiển thị chi tiết một sản phẩm 54

Hình 4.5: Giao diện hiển thị trang wishlist 55

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

Hình 4.7a: Giao diện khi thực hiện chức năng “Add to cart” 57

Hình 4.7b: Giao diện hiển thị tất cả các sản phẩm trong giỏ hàng 58

Hình 4.8: Giao diện trang Contact Us 59

Hình 4.9: Giao diện trang About Us 60

Hình 4.10a: Giao diện trang Blog dạng Grid 61

Hình 4.10b: Giao diện Blog dạng Large Images 62

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

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

Hình 4.13: Giao diện viết Code, chỉnh sửa HTML, CSS 64

Hình 4.14: Giao diện quản lý sản phẩm 64

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

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

LỜI NÓI ĐẦU

Trong thời đại công nghiệp hóa, hiện đại hóa và sự bùng nổ về sức mạnh của công nghệ thông tin hiện nay Việc mua bán sản phẩm, đặt hàng trực tuyến đang trở thành một nếp văn minh mới trong thời đại tiên tiến, người tiêu dùng đã quen dần với thói quen mua sắm trực tuyến

Đặc biệt sự phát triển đa dạng của thương mại điện tử trên nền Shopify đã giúp cho mọi người dễ dàng tìm kiếm thông tin Shopify đi đầu trong việc xây

dựng một hệ thống đối tác cùng phát triển giao diện, ứng dụng, hỗ trợ các Shop

làm Marketing rất hùng hậu Nhu cầu giao diện sử dụng Shopify ngày một lớn

Website thương mại điện tử nói chung với các tính năng mở rộng cao cấp cho phép giao dịch qua mạng như: Mega Menu đa dạng, giỏ hàng, wishlist, so sánh sản phẩm, quick view, đặt hàng, thanh toán qua mạng, quản lý khách hàng, quản lý đơn đặt hàng,…

Bên cạnh đó, hiện nay đa số các sản phẩm thương mại điện tử chuyên nghiệp, được xây dựng dựa trên Bootstrap 3.0, HTML5 và CSS3 để có sản phẩm thương mại điện tử đẹp mắt, dễ nhìn, thu hút khách hàng Tương thích với tất cả các thiết bị di động (từ máy tính bảng, điện thoại di động đến máy tính xách tay…)

và màn hình độ phân giải Retina (cho hình ảnh chất lượng cao)

Với nhu cầu thực tiễn từ việc sử dụng sản phẩm thương mại điện tử

Shopify ngày càng nhiều của các công ty, doanh nghiệp , qua khảo sát thị trường

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

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 Đặt vấn đề

Ngày nay, thương mại điện tử (TMĐT) đã trở thành một công cụ phổ biến không những ở trên thế giới mà còn cả ở Việt Nam Với sự phát triển mạnh mẽ như ngày nay, cùng với nhu cầu mua bán online nên việc phát triển các website bán hàng là thực sự cần thiết Các giải pháp tạo một website bán hàng hiện nay có rất nhiều

Hiện nay, một số công ty có xu hướng tiếp cận TMĐT theo một hướng khác, đó là họ sẽ tạo ra những dịch vụ khác ngay trên dịch vụ của chính mình Tức

là một trang TMĐT bây giờ không chỉ dừng lại ở một công ty, một doanh nghiệp, một tổ chức hay là một cá nhân mà nó tiến hành liên kết tất cả các công ty, các doanh nghiệp các cá nhân lại với nhau hoặc từ một doanh nghiệp ta có thể tổ chức thành nhiều doanh nghiệp nhỏ hơn cùng chung một lĩnh vực hoạt động tạo thành một hệ thống TMĐT linh động hơn, chuyên nghiệp hơn Đặc biệt các sản phẩm thương mại điện tử ngày càng có nhiều yêu cầu cao từ khâu thiết kế đến lập trình Một sản phẩm thương mại điện tử thường có nhiều layout, giao diện mượt đẹp mắt, có đầy đủ các chức năng cơ bản như wishlist, compare và hiển thị hoàn hảo trên mọi trình duyệt trên mọi thiết bị – từ máy tính bàn, laptop đến di động, máy tính bảng…

Lựa chọn nền tảng thương mại điện tử thích hợp nhất cho việc tạo, quản lý

và duy trì một cửa hàng trực tuyến là rất quan trọng, vì nó có thể là yếu tố chịu trách nhiệm cho thành công hay thất bại đối với doanh nghiệp của bạn

Là một kế hoạch để tạo ra một cửa hàng trực tuyến hay di chuyển cửa hàng hiện tại sang nền tảng khác trong tương lai gần hoặc với nhu cầu tạo một trang bán hàng đơn giản, không có nhiều tính năng phức tạp như thanh toán trực tuyến thì có việc sử dụng những dịch vụ tạo gian hàng điện tử như Shopify khá nổi tiếng ở

giới Khác với những đối thủ cạnh tranh khác, Shopify luôn tiên phong áp dụng những công nghệ mới nhất và tiên tiến nhất của internet để tích hợp vào website sử dụng Shopify Có thể nói Shopify là một dịch vụ thương mại điện tử tiềm năng

Từ vốn kiến thức có được trong quá trình học tập áp dụng các kiến thức về html5/css3/js và thông qua tham khảo một số trang Web giới thiệu sản phẩm, quảng bá sản phẩm cũng như một vài mã nguồn CMS Em đã hoàn thành cho mình

sản phẩm thương mại điện tử với đề tài : “Xây dựng sản phẩm thương mại điện

tử SOZO trên nền Shopify” mục tiêu có được sản phẩm thương mại và nhằm

hiểu biết về tình hình phát triển thương mại điện tử trên thế giới cũng như trong nước

1.2 Tìm hiểu về thương mại điện tử và sản phẩm thương mại điện tử

1.2.1 Một số định nghĩa về thương mại điện tử

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

Thương mại điện tử (Electronic commerce – EC) là một từ dùng để mô tả quá trình mua, bán và trao đổi mặt hàng, dịch vụ và thông tin qua mạng máy tính bao gồm cả mạng internet

Thương mại điện tử là một kênh mua sắm mới có vị trí quan trọng không

thể phủ nhận được Thật vậy, giải pháp thương mại điện tử, E-Commerce, giúp

mở rộng phạm vi người mua và giúp cho công việc kinh doanh trở nên linh hoạt hơn Mở cửa 24/7, suốt trong năm, thương mại điện tử hiện nay có vai trò không thể thiếu đối với các doanh nghiệp hiện đại, giúp tăng doanh số và thúc đẩy hoạt động mua bán trên mạng với giá cả cạnh tranh

 Mô hình thương mại điện tử

Mô hình thương mại điện tử là phương thức kinh doanh của một công ty phát sinh ra lợi nhuận để duy trì công ty Mô hình thương mại giải thích một công

ty đóng vai trò như thế nào trong một dây chuyền

 Một số mô hình TMĐT điển hình thành công

Trên thế giới

 Amazon.com – Sàn bán lẻ trực tuyến hàng đầu trên thế giới

 Facebook.com – Kênh Marketing hiệu quả

 Groupon.com – Mua hàng theo nhóm

 Paypal.com – Giải pháp thanh toán trực tuyến

 SlideShare.net - Giải pháp lưu trữ tài liệu

Tại Việt Nam

 Lazada.vn - Bán lẻ trực tuyến

 Muachung.vn - Mua hàng theo nhóm

 Homepay.vn - Thanh toán trực tuyến

 K12school.vn - Đào tạo trực tuyến

 Vai trò, lợi ích và hạn chế của thương mại điện tử

 Vai trò

Thương mại điện tử là hình thái hoạt động thương mại bằng phương pháp điện tử, là làm việc trao đổi thông tin thương mại thông qua các phương tiện công nghệ điện tử mà nói chung là không cần phải in ra giấy trong bất cứ công đoạn nào của quá trình giao dịch

Phát triển thương mại điện tử là nhu cầu tất yếu của nền kinh tế hiện đại, nó mang lại lợi ích cho cả các doanh nghiệp cũng như khách hàng

 Lợi ích

 Giúp cho các doanh nghiệp nắm được thông tin phong phú về thị trường

và đối tác

 Giúp giảm chi phí sản xuất

 Giúp giảm chi phí bán hàng và tiếp thị

 Thời gian và chi phí giao dịch

 Tạo điều kiện cho việc thiết lập và củng cố mối quan hệ giữa các thành phần tham gia vào quá trình thương mại

 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, Shopify là một trong những công ty đi tiên phong trong cuộc cách mạng thương mại điện tử trên phạm

vi toàn cầu Sau gần 10 năm đi vào hoạt động, Shopify ngày nay đứng vào hàng ngũ những ông lớn của thương mại điện tử thế giới bên cạnh Bigcommerce, Weebly eCommerce và Squarespace Tuy nhiên, trong những cái tên kể trên thì Shopify được đánh giá cao nhất

Shopify là nền tảng thương mại điện tử tốt nhất thế giới hiện nay, tính đến thời điểm đầu năm 2016, có tổng cộng hơn 200.000 website đang sử dụng nền tảng Shopify trên phạm vi toàn cầu và đang không ngững tăng lên Một thống kê chỉ ra rằng Shopify đã mang lại doanh thu tổng cộng hơn 12 tỷ đô la trên toàn cầu Khác với những đối thủ cạnh tranh khác, Shopify luôn tiên phong áp dụng những công nghệ mới nhất và tiên tiến nhất của internet để tích hợp vào website sử dụng Shopify Cùng với đó, Shopify sở hữu đội ngũ chuyên gia nhiều năm kinh

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

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

 Tính năng của Shopify

Shopify có đầy đủ những tính năng căn bản tối thiểu mà bất cứ cửa hàng nào cần như:

 Hệ thống hàng trăm giao diện chuyên nghiệp với phần lớn là giao diện miễn phí

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

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

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

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

 Hệ thống admin quản lý đặt hàng, quản lý khách hàng, chăm sóc khách hàng, đăng sản phẩm chuyên nghiệp Có hệ thống tạo tài khoản cho khách hàng

 Hệ thống email tự động gửi cho khách hàng để xác nhận đặt hàng, tạo tài khoản, lấy lại mật khẩu

 Được thiết kế tối ưu cho SEO: nền tảng chuẩn SEO với sitemap, các thẻ H1, title, meta tags được tối ưu …

 Giỏ hàng kết nối hơn 70 cổng thanh toán với các tính năng về thuế, phí vận chuyển, …

 Có ứng dụng quản lý trên smartphone rất tiện lợi, có POS để kết hợp

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

 Lập trình Liquid

Liquid [3] là một mã nguồn mở, ngôn ngữ mẫu được sáng tạo bởi Shopify dựa trên nền tảng ngôn ngữ Ruby Nó là thành phần chính của các theme trong Shopify và được sử dụng để tải các nội dung động lên giao diện các cửa hàng

Liquid sử dụng sự kết hợp các tag (nhãn), object (đối tượng) và filter (bộ lọc) để tải những nội dung động, phần lý thuyết này được tham khảo tại document của trang docs shopify.com [3] và được trình bày chi tiết ở mục dưới

 Tags – Nhãn

Thẻ (tags) liquid là các logic lập trình dùng để thông báo cho hệ thống cần

làm gì để đưa ra ngoài giao diện Các thẻ được bao bởi: {%%}

Ví dụ:

{% if user.name == 'elvis' %}

Hey Elvis

{% endif %}

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 customer.name == 'guest' %}

Xin chào quý khách!

{% else %}

Chào bạn!

{% endif %}

 case/when: Tạo nên một hướng chuyển đổi để so sánh một biến số với các

giá trị khác nhau Case sẽ tạo hướng chuyển đổi và when sẽ so sánh các giá trị

Sản phẩm này không phải của Adidas hay Nike

{% endcase %}

 Unless: Thẻ này tương tự với if, nhưng nó sẽ thực hiện đoạn mã nếu các

điều kiện cụ thể không được đáp ứng

Ví dụ

{% unless product.name == 'Adidas Neo' %}

Đây không phải là giày Adidas Neo

{% endunless %}

 Thẻ lặp

Các thẻ lặp dùng để chạy một đoạn mã nhiều lần liên tiếp: for, cycle

 For: thực hiện một đoạn mã lặp lại nhiều lần Để xem đầy đủ các thuộc

 Tham số của for

 Limit: Thoát khỏi vòng lặp tại giá trị xác định

Ví dụ:

{% cycle 'one', 'two', 'three' %}

{% cycle 'one', 'two', 'three' %}

{% cycle 'one', 'two', 'three' %}

{% cycle 'one', 'two', 'three' %}

Cycle có thể sử dụng khi:

 Thêm vào class odd/even cho các hàng/cột trong bảng

 Thêm một class vào ảnh nhỏ cuối cùng trong một hàng

 Các thẻ liên quan đến biến

Các thẻ này dùng để tạo các biến Liquid mới sẽ được sử dụng trong giao diện: assign, capture, increment, decrement

 Assign: Tạo một biến mới.

Ví dụ

{% assign new_variable = false %}

{% if new_variable != true %}

Hiện thị nội dung cần thiết.

 Increment: Tạo một biến số mới và sau mỗi lần gọi sẽ tăng biến số thêm

một đơn vị, biến số mới bắt đầu bằng 0

Ví dụ

{% increment variable %}

{% increment variable %}

{% increment variable %}

 Decrement: Tạo một biến số mới và sau mỗi lần gọi sẽ giảm biến số

thêm một đơn vị, biến số mới bắt đầu bằng -1

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

Tạo một form để khách hàng có thể lấy lại mật khẩu tài khoản trên website,

sử dụng trong template login.bwt

Ví dụ

{% form 'recover_customer_password' %}

{% endform %}

 Layout: Hiển thị một layout khác từ thư mục layout của giao diện Nếu

không có layout nào được chỉ định, theme.bwt sẽ được hiển thị mặc định

Ví dụ:

<! Hiển thị layoput alternate.bwt >

{% layout 'alternate' %}

 Paginate: Chia sản phẩm, bài viết blog hoặc kết quả tìm kiếm thành các

trang nhỏ, tối đa 50 đối tượng mỗi trang, xem thêm tại thẻ for

Paginate phải được sử dụng với for để chia nội dung thành các trang khác nhau Nó phải bao ngoài vòng lặp for chạy qua một mảng

Ví dụ:

{% paginate collection.products by 5 %}

{% for product in collection.products %}

<! Hiển thị chi tiết sản phẩm >

 Raw: Cho phép hiện thị một đoạn mã Liquid trên một trang Đoạn code

này sẽ không được thực thi

Ví dụ:

{% raw %}{{ 5 | plus: 6 }}{% endraw %} bằng 11

 Object – Đối tượng

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

động trên một trang.

{{ product.title }} <! Output: Awesome T-Shirt >

Các đối tượng trong Liquid bao gồm các thuộc tính để xuất ra các trang nội dung động Ví dụ: đối tượng product có thuộc tính là name có thể sử dụng để xuất

ra tên của sản phẩm

Để gọi ra các thuộc tính của đối tượng trên một trang, ta sử dụng {{ và }}, như sau:

{{ product.name }} <! Output: “Awesome Shoes” >

 Đối tượng tổng quát:

Đây là những đối tượng có thể được sử dụng và truy cập từ bất cứ tập tin nào trong giao diện, chúng được gọi là đối tượng tổng quát hoặc biến tổng quát:blogs <ul>

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

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

{% endfor %}

</ul>

Đối tượng blogs bao gồm các thuộc tính liên quan đến blog cart Đối tượng cart bao gồm các thuộc tính liên quan đến giỏ hàng.collections {% for product in collections.frontpage.products %}

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 <h1>{{ pages.about.title }}</h1>

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

Đối tượng pages gồm các trang nội dung có trong website.page_description {% if page_description %}

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

Đố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.template {% 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 sử dụng

settings.featured_collection and collections[settings.featured_collection].products_count > 0 %}

{% for product in collections[settings.featured_collection].products %}

{% include 'product-loop' %}

{% endfor %}

{% endif %}

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

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

Ví dụ

<! product.name = "Alin Ma" >

{{ product.name | upcase | remove: "MA" }}

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

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

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

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

Ví dụ

<! product.name = "Text Tee Size M" >

{{ product.name | last }}

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

Ví dụ

<! product.tags = "giảm giá", "quần áo", "nam" >

{{ product.tags[2] }}

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

Ví dụ

<! collection.title = "Xuân", "Hạ", "Thu", "Đông" >

{% assign collection_names = collections | map: 'name' %}

{% assign products = collection.products | sort: 'price' %}

{% for product in products %}

<h4>{{ product.name }}</h4>

{% endfor %}

Danh sách sẽ được xuất ra và sắp xếp từ chữ hoa đến chữ thường

Ví dụ

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

{% assign products = collection.products | sort: 'name' %}

{% for product in products %}

img_tag có thể sử dụn thêm các tham số để thêm vào thẻ alt, cũng như class Tham số đầu tiên sẽ được xuất ra như alt text, tham số tiếp theo sẽ là các class trong css

Ví dụ

{{ 'logo.png' | asset_url | img_tag: 'Bizweb', 'logo new-version' }}

Kết quả

<img src="//bizweb.dktcdn.net/100/000/006/themes/1118/assets/logo.png? v=132322871" alt="Bizweb" class="logo new-version" />

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

{{ product | img_tag }}

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

{{ line_item | img_tag: 'alternate text', 'css-class' }}

{{ image | img_tag: 'alternate text', 'css-class', 'small' }} {{ collection | img_tag: 'alternate text', 'css-class', 'large' }}

 script_tag: Tạo thẻ script.

{{ 'style.css' | asset_url | stylesheet_tag }}

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

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

{{ product.name | replace: 'Awesome', 'Mega' }} Kết quả

Mega Shoes

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

{{ product | img_url: 'small' }}

{{ variant | img_url: 'small' }}

{{ line_item | img_url: 'small' }}

{{ image | img_url: 'small' }}

{{ collection | img_url: 'small' }}

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

CHƯƠNG 2: MÔ TẢ, KHẢO SÁT HIỆN TRẠNG VÀ

PHÂN TÍCH THIẾT KẾ HỆ THỐNG 2.1 Khảo sát các giao diện điện tử hiện nay

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 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 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 Em 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

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

 Shopify hiện nay

Ưu điểm:

 Trên thị trường, hầu hết các sản phẩm Shopify hiện nay đã có đầy đủ các chúc năng cơ bản của một sản phẩm thương mại điện tử như add to cart, wishlist, quick view

 Giao diện đẹp, mượt mà với các hiệu ứng tương đối đẹp

Nhược điểm:

 Tuy nhiên, hầu hết đều chưa có tính năng icon menu và chức năng compare…

 Không sử dụng search ajax để lọc sản phẩm, bài viết

 Đề xuất giải pháp cho sản phẩm thương mại điện tử SOZO trên nền Shopify

Qua việc khảo sát các FrameWork trên, em đã học hỏi được một số những tính năng nổi bật của các Framework khảo sát và cũng đề xuất để bổ sung, áp dụng