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

LỜI CẢM ƠN Trong thời gian thực đồ án với giúp đỡ tạo điều kiện Trường Đại Học Công nghệ Thông Tin Truyền Thông - ĐH Thái Nguyên, góp ý bạn đặc biệt hướng dẫn trực tiếp, bảo tận tình thầy TS Bùi Ngọc Tuấn em hoàn thành đề tài với báo cáo thời gian quy định Em xin chân thành cảm ơn thầy ThS Nguyễn Quốc Bảo thầy ThS Đào Trần Chung toàn thể anh chị em trung tâm nghiên cứu phát triển phần mềm (RDCMA) tạo điều kiện thuận lợi, dẫn tận tình để em nghiên cứu, học hỏi ngôn ngữ lập trình tiếp cận với môi trường làm thực tế Và kinh nghiệm quý báu để em học tập, trang bị kiến thức chuyên môn ngày hoàn thiện Bài báo cáo đồ án tốt nghiệp em thực 10 tuần, bước đầu em gặp nhiều khó khăn, bỡ ngỡ vốn kiến thức hạn chế nên nội dung đề tài tránh khỏi sai sót, em mong nhận đóng góp ý kiến, phê bình thầy cô Một lần nữa, em xin chân thành cảm ơn tất thầy, cô giáo, tổ chức liên kết dạy dỗ, bảo em suốt thời gian học trường Em xin kính chúc thầy cô giáo trường Đại học Công Nghệ Thông Tin Truyền Thông Thái Nguyên, toàn thể anh chị em trung tâm RDCMA sức khỏe dồi dào, công tác tốt, đạt nhiều thành công công việc Thái Nguyên, tháng năm 2016 Sinh viên thực Đào Thị Miền LỜI CAM ĐOAN Nhận thức Đồ án tốt nghiệp sản phẩm hoàn thiện sinh viên CNTT trường, cần tới miệt mài thân hướng dẫn bảo tận tình Thầy cô giáo Em tổng hợp kiến thức học kinh nghiệm số liệu khảo sát thực tế nhằm hoàn thành Đồ án tốt nghiệp Em xin cam đoan: Những nội dung đồ án tốt nghiệp em thực trực tiếp hướng dẫn thầy TS Bùi Ngọc Tuấn ThS Nguyễn Quốc Bảo Mọi tham khảo dùng đồ án 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ố danh mục tài liệu tham khảo Nội dung Đồ án em không chép nội dung Đồ án sản phẩm thân em nghiên cứu thực tế xây dựng lên Mọi 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 Đào Thị Miền MỤC LỤC LỜI CẢM ƠN .1 LỜI CAM ĐOAN MỤC LỤC DANH MỤC HÌNH ẢNH DANH MỤC BẢNG LỜI NÓI ĐẦU 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 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 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 toán 35 2.1.2 Khảo sát xu hướng sử dụng Mega Menu 36 2.1.3 Đề xuất ý tưởng xây dựng chức Mega Menu cho Shopify 46 2.1.4 Khảo sát số website TMĐT Shopify 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ự 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 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 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 menu 40 Hình 2.8 Mega menu cho mobile .40 Hình 2.9 Hiển thị video nội dung video menu 41 Hình 2.10 Hiển thị danh mục sản phẩm carousel sản phẩm 41 Hình 2.11 Hiển thị bố cục website qua hình ảnh menu .42 Hình 2.12 Hiển thị hình ảnh nội dung tính features 42 Hình 2.13 Mega menu sau 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 .47 Hình 2.16 Ý tưởng xây dựng Mega Menu kiểu .47 Hình 2.17 Ý tưởng xây dựng Mega Menu kiểu .48 Hình 2.18 Ý tưởng xây dựng Mega Menu kiểu .48 Hình 2.19 Ý tưởng xây dựng Mega Menu kiểu .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ự chức tạo Mega Menu 62 Hình 2.27 Biểu đồ cộng tác chức tạo Mega Menu .63 Hình 2.28 Biểu đồ trình chức quick view 63 Hình 2.29 Biểu đồ cộng tác chức quick view 64 Hình 2.30 Biểu đồ trình tự chức wishlist 64 Hình 2.31 Biểu đồ cộng tác chức wishlist 65 Hình 2.32 Biểu đồ trình tự chức compare 65 Hình 2.33 Biểu đồ cộng tác chức compare 66 Hình 2.34 Biểu đồ lớp chức Mega Menu 66 Hình 2.35 Biểu đồ lớp chức quick view 67 Hình 2.36 Biểu đồ lớp chức wishlist 67 Hình 2.37 Biểu đồ lớp chức compare 68 Hình 3.1 Khung header 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ươ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 sản phẩm 77 Hình 3.10 Giao diện 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 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 Add to Cart 80 Hình 3.15 Giao diện chi tiết chức 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ý 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 toán tử Liquid 20 Bảng 1.2 Bảng thẻ Liquid 22 Bảng 1.3 Bảng đối tượng lập trình Liquid .23 Bảng 1.4 Bảng loại lọc lập trình Liquid 26 LỜI NÓI ĐẦU Trong thời đại công nghiệp hóa, đại hóa bùng nổ sức mạnh công nghệ thông tin Việc mua bán sản phẩm, đặt hàng trực tuyến trở thành nếp văn minh 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 phát triển đa dạng thương mại điện tử Shopify giúp cho người dễ dàng tìm kiếm thông tin Shopify đầu việc xây dựng hệ thống đối tác phát triển giao diện, ứng dụng, hỗ trợ Shop làm Marketing hùng hậu Nhu cầu giao diện sử dụng Shopify ngày lớn Website thương mại điện tử nói chung với tính 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, toán qua mạng, quản lý khách hàng, quản lý đơn đặt hàng,… Bên cạnh đó, đa số sản phẩm thương mại điện tử chuyên nghiệp, xây dựng dựa Bootstrap 3.0, HTML5 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 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…) 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ô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 số tính cần thiết sản phẩm thương mại điện tử, sản phẩm mang 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 hàng Đây lý em chọn đề tài: “Xây dựng chức Mega Menu sản phẩm thương mại điện tử Shopify” CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI 1.1 Đặt vấn đề Trước phát triển ngày nhanh chóng lĩnh vực Công nghệ thông tin kèm với phát triển mạnh mẽ dịch vụ, tiện ích để phục vụ đời sống, công việc, giải trí người cụ thể dịch vụ mua bán trực tuyến qua mạng tỏ hiệu người dần trở thành nhu cầu thiết yếu phục vụ người Nắm bắt nhu cầu thiết yếu này, sau khoảng thời gian nghiên cứu tìm hiểu thị trường em đưa định đồ án tốt nghiệp : “Xây dựng chức Mega Menu sản phẩm thương mại điện tử Shopify” 1.1.1 Mục đích xây dựng đề tài Xây dựng chức Mega Menu đáp ứng cho toàn theme thương mại điện tử Shopify trung tâm RDCMA Mega Menu có khả 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 menu theme khác Xây dựng hoàn chỉnh theme “thương mại điện tử” Shopify với đầy đủ nhiều layout lựa chọn khác nhau, đầy đủ tính website bán hàng trực tuyến thêm số tính vượt trội so với theme khác Đóng gói theme mang thương mại thị trường themeforest Mục tiêu nghiên cứu em tìm hiểu sâu làm rõ khái niệm sản phẩm thương mại điện tử Biết cách phân tích cho hệ thống, tiếp cận công cụ lập trình, kĩ thuật lập trình môi trường internet Tìm hiểu sản phẩm thương mại Shopify, xây dựng chức MegaMenu 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ử sản phẩm, lĩnh vực rộng nghiệp vụ lẫn lý thuyết ứng dụng Doanh nghiệp, tổ chức hay cá nhân muốn hoạt động 10  Giao diện Shop sản phẩm Hình 3.7 Giao diện Collection dạng Grid 75 Hình 3.8 Giao diện Collection dạng List Hình 3.7 hình 3.8 mô tả khách hàng xem sản phẩm dạng Grid List để xem sản phẩm, thông tin sản phẩm, giá sản phẩm Người dùng Add to cart, wishlist, quick-view sản phẩm 76  Giao diện Compare Hình 3.9 Giao diện so sánh sản phẩm Hình 3.9 mô tả người dùng click vào chức “Compare” hiển thị thông tin sản phẩm để so sánh giá, mô tả, thông tin sản phẩm, sản phẩm có kho không 77  Giao diện Wishlist (sản phẩm yêu thích) Hình 3.10 Giao diện người dùng click vào wishlist Hình 3.10 mô tả chức wishlist sau đăng nhập vào hệ thống, người dùng wishlist vào sản phẩm để lựa chọn sản phẩm lựa chọn sản phẩm yêu thích, hiển thị màu sản phẩm yêu thích Và click tiếp “View my wishlist” giao diện Hình 4.11 người dùng “Add to cart” để thêm vào giỏ hàng Hình 3.11 Giao diện View my wishlist 78  Giao diện chức Quick View Hình 3.12 Giao diện chức Quick View Hình 3.12 mô tả chức “Quick View” người dùng click vào chức Quick View Sẽ hiển thị modal với thông tin chi tiết sản phẩm, giá, hình ảnh hình ảnh liên quan, có chức để chia sẻ lên mạng xã hội  Giao diện chi tiết sản phẩm Hình 3.12 mô tả chi tiết sản phẩm với chức Elevate Zoom: Nó đặc biệt hữu ích để hiển thị phiên lớn hình ảnh sản phẩm thay đổi hình ảnh khác để nhìn rõ chi tiết sản phẩm, thông tin giá, thông tin sản phẩm,… Và có sản phẩm liên quan hiển thị bên với mục đích tìm kiếm sản phẩm liên quan loại collection, size,… 79 Hình 3.13 Giao diện xem chi tiết sản phẩm  Chức Add to Cart Hình 3.14 Giao diện chức Add to Cart 80 Hình 3.15 Giao diện chi tiết chức Add to Cart Hình 3.14 Hình 3.15 mô tả chức “Add to Cart” thực người dùng muốn mua sản phẩm đưa vào giỏ hàng Và thêm sản phẩm vào giỏ hàng, xóa sản phẩm không muốn đặt mua nữa, giảm số lượng sản phẩm muốn mua 81  Giao diện Blog – tin tức website Hình 3.16 Giao diện trang Blog Hình 3.16 Mô tả Blog giúp người dùng xem theo kiểu sidebar-left, sidebar-right, nosidebar Sau xem Blog viết bình luận Blog 82 3.2.2 Giao diện Admin  Giao diện đăng nhập Hình 3.17 Giao diện đăng nhập vào hệ thống  Giao diện quản lý Blog Hình 3.18 Giao diện quản lý viết 83  Giao diện quản lý sản phẩm Hình 3.19 Giao diện quản lý sản phẩm  Giao diện quản lý mã nguồn, chỉnh sửa mã nguồn Hình 3.20 Giao diện viết Code, chỉnh sửa HTML, CSS 84 KẾT LUẬN Qua trình làm đề tài “Xây dựng chức Mega Menu sản phẩm thương mại sử điện tử Shopify” em đạt kết quả: Những điểm đạt được:  Xây dựng hoàn thành Layouts với đầy đủ chức website thương mại điện tử Compare, Wishlist, QuickView trang Shop, Blog, Pages, Account,… theme  Khả thay đổi template, giao diện linh hoạt  Theme tối ưu tốc độ tải trang, chế độ bảo mật tốt  Khả tùy biến cao dễ dàng mở rộng theo yêu cầu người dùng  Nắm vững kiến thức ngôn ngữ lập trình giao diện Liquid quy chế hoạt động Shopify  Nâng cao kiến thức HTML5, CSS3, Responsive  Nâng cao trình độ đọc, hiểu tài liệu tiếng anh  Chương trình kiểm thử xét duyệt themeforest để mang thương mại  Hoàn thành đề tài tiến độ giao Những điểm chưa đạt được:  Đây Framework mới, việc tìm hiểu Shopify gặp khó khăn: tài liệu, tài liệu tiếng anh khó hiểu  Khả phân tích thiết kế hệ thống hạn chế Hướng phát triển:  Xây dựng nhiều sản phẩm thương mại để đưa thương mại phục vụ cho doanh nghiệp, công ty sử dụng website để bán hàng online  Xây dựng shortcode để ứng dụng nhiều tính rộng rãi cho người sử dụng Sau năm học tập trường Đại học Công Nghệ Thông Tin Truyền Thông – Đại học Thái Nguyên em thầy cô giáo cung cấp truyền đạt kiến thức chuyên môn sâu sắc quý giá Nơi môi trường học tập, rèn luyện ý chí, độc lập, đầy sáng tạo tuổi trẻ, hành trang, 85 kiến thức để chúng em bắt tay vào nghề nghiệp tương lai Em hy vọng đề tài tiền đề tạo kỹ làm việc nhóm, kỹ lập trình, xây dựng ý tưởng, tạo điều kiện trình làm việc học tập em Em xin chân thành cảm ơn ban giám hiệu, ban chủ nhiệm khoa, thầy cô giáo môn Công nghệ phần mềm hướng dẫn dạy chúng em suốt thời gian học tập trường, đặc biệt em xin cảm ơn thầy TS Bùi Ngọc Tuấn, thầy ThS Nguyễn Quốc Bảo tận tình hướng dẫn, giúp đỡ em hoàn thành đồ án Em xin chân thành cảm ơn! 86 TÀI LIỆU THAM KHẢO [1] Leslie F Sikos Ph.D, Web Standards: Mastering HTML5, CSS3, and XML, November 17, 2011 [2] Brian P Hogan, HTML5 and CSS3: Develop with Tomorrow's Standards Today (Pragmatic Programmers) 1st Edition, January 17, 2011 [3] Jamie Phoenix, How To Start an Online Store with Shopify, April 27 2009 [4] WallPearl, Simple Css Standard Editor, 2008 [5] David Flanagan, JavaScript: The Definitive Guide, Since 1996 [6] David Herman, Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript (Effective Software Development Series), December 6, 2012 [7] Douglas Crockford, JavaScript: The Good Parts, May 2008 [8] Dustin DiazRoss Harmes, Pro JavaScript Design Patterns: The Essentials of Object-Oriented JavaScript Programming, 2007 [9] Eric T FreemanElisabeth Robson, Head First JavaScript Programming, April 10, 2014 [10] John ResigBear Bibeault, Secrets of the JavaScript Ninja, December 2012 [11] Kyle Simpson, You Don't Know JS: Up & Going, April 10 2015 [12] Marijn Haverbeke, Eloquent JavaScript: A Modern Introduction to Programming, Feruary 6, 2011 [13] Mark Myers, A Smarter Way to Learn JavaScript: The new approach that uses technology to cut your effort in half, December 1, 2013 [14] Nicholas C Zakas, High Performance JavaScript (Build Faster Web Application Interfaces), April 2, 2010 [15] Sai Srinivas Sriparasa, JavaScript and JSON Essentials Paperback, October 26, 2013 [16] Wendy Boggs & Michael Boggs, UML with rational rose 2002 [17] Đặng Văn Đức, Phân tích thiết kế hướng đối tượng UML, Nhà Xuất Bản Khoa học Kỹ thuật, năm 2002 [18] Demon Warlock, Nhập môn thiết kế web, tháng 2013 87 [19] https://docs.shopify.com/ [20] http://cheat.markdunkley.com/ [21] https://docs.bizweb.vn/liquid-document/basics/introduction [22] http://www.shopifyfordesigners.com/ [23] http://www.w3schools.com/ [24] http://thachpham.com/web-development/html-css/huong-dan-su-dung-sassde-viet-css.html 88 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Thái Nguyên, ngày tháng năm 2016 GIÁO VIÊN HƯỚNG DẪN 89 ... : Xây dựng chức Mega Menu sản phẩm thương mại điện tử Shopify 1.1.1 Mục đích xây dựng đề tài Xây dựng chức Mega Menu đáp ứng cho toàn theme thương mại điện tử Shopify trung tâm RDCMA Mega Menu. .. môi trường internet Tìm hiểu sản phẩm thương mại Shopify, xây dựng chức MegaMenu 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ử sản phẩm, lĩnh vực rộng nghiệp vụ... dụng sản phẩm thương mại điện tử 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 số tính cần thiết sản phẩm thương mại điện tử, sản phẩm