Thiết kế website thương mại điện tử | Môn Thiết kế và xây dựng website - Trường Cao đẳng Công Nghệ Bách Khoa Hà Nội

lOMoAR cPSD| 58675420
THIẾT KẾ WEBSITE THƯƠNG MẠI ĐIỆN TỬ
Câu 1 (2 điểm). Trình bày các chức năng cơ bản trong giao diện quản trị của website thương
mại điện tử. Cho ví dụ minh họa cụ thể. Bài làm:
Giao diện quản trị là một phần mềm được thiết kế đặc biệt để cho phép người quản
lý website có thể điều khiển và quản lý mọi hoạt động của cửa hàng trực tuyến một cách
hiệu quả, là nơi mà người quản trị có thể thực hiện mọi thao tác để quản lý và vận hành
cửa hàng trực tuyến của mình. Từ việc thêm sản phẩm, quản lý đơn hàng, đến tùy chỉnh
giao diện, tất cả đều được thực hiện thông qua giao diện này. Có thể nói đây là trái tim của
một website thương mại điện tử, ảnh hưởng trực tiếp đến hiệu quả kinh doanh. Các chức
năng cơ bản và quan trọng nhất của giao diện quản trị một website thương mại điện tử là:
1.1. Quản lý Sản phẩm •
Thêm sản phẩm mới: Người quản trị có thể dễ dàng tạo ra các sản phẩm mới bằng
cách điền đầy đủ thông tin như tên sản phẩm, mô tả, giá bán, hình ảnh, thuộc tính (màu sắc, kích cỡ), ... •
Sửa sản phẩm: Cập nhật thông tin sản phẩm đã tồn tại, chẳng hạn như thay đổi giá,
mô tả, hoặc thêm hình ảnh mới. •
Xóa sản phẩm: Xóa bỏ sản phẩm khỏi danh mục nếu sản phẩm đã hết hàng hoặc không còn được bán. •
Quản lý danh mục sản phẩm: Tổ chức các sản phẩm vào các danh mục và phân cấp
để người dùng dễ dàng tìm kiếm. •
Quản lý thuộc tính sản phẩm: Xác định các thuộc tính của sản phẩm như màu sắc,
kích cỡ, chất liệu để tạo ra các biến thể sản phẩm.
Ví dụ: Trong WooCommerce (một plugin thương mại điện tử phổ biến cho WordPress),
người quản trị có thể tạo một sản phẩm áo phông, với các thuộc tính là màu sắc (đỏ, xanh,
đen) và kích cỡ (S, M, L). lOMoAR cPSD| 58675420
1.2. Quản lý Đơn hàng •
Xem danh sách đơn hàng: Hiển thị tất cả các đơn hàng đã được đặt, bao gồm thông
tin khách hàng, sản phẩm đã mua, trạng thái đơn hàng (đang chờ xử lý, đã đóng gói, đã giao hàng, ...). •
Xử lý đơn hàng: Thay đổi trạng thái đơn hàng, in hóa đơn, gửi email xác nhận cho khách hàng. •
Hoàn tiền: Xử lý các yêu cầu hoàn tiền từ khách hàng. •
Quản lý giao hàng: Theo dõi quá trình giao hàng, cập nhật thông tin vận chuyển.
Ví dụ: Trong Shopify, người quản trị có thể dễ dàng theo dõi quá trình giao hàng của một
đơn hàng bằng cách tích hợp với các dịch vụ vận chuyển như ShipBob.
1.3. Quản lý Khách hàng •
Xem danh sách khách hàng: Hiển thị thông tin chi tiết về từng khách hàng, bao gồm
lịch sử mua hàng, địa chỉ giao hàng, thông tin liên hệ. •
Thêm khách hàng: Thêm thông tin của khách hàng mới vào hệ thống. •
Phân nhóm khách hàng: Tạo các nhóm khách hàng khác nhau để thực hiện các chiến dịch marketing phù hợp.
Ví dụ: Trong Magento, người quản trị có thể tạo các nhóm khách hàng như khách hàng
VIP, khách hàng mới, khách hàng thường xuyên để gửi các ưu đãi khác nhau.
1.4. Quản lý Nội dung •
Tạo trang: Tạo các trang tĩnh như về chúng tôi, liên hệ, chính sách bảo mật. •
Sửa bài viết: Chỉnh sửa nội dung các bài viết trên blog. •
Quản lý menu: Tạo và quản lý các menu điều hướng trên website.
Ví dụ: Trong WordPress, người quản trị có thể sử dụng trình chỉnh sửa Gutenberg để tạo
ra các trang có giao diện đẹp mắt và chuyên nghiệp. lOMoAR cPSD| 58675420
1.5. Cài đặt Cửa hàng •
Cài đặt chung: Cấu hình thông tin chung của cửa hàng như tên cửa hàng, địa chỉ, số điện thoại, email. •
Cài đặt thanh toán: Tích hợp các phương thức thanh toán trực tuyến như PayPal, Stripe. •
Cài đặt vận chuyển: Cấu hình các phương thức vận chuyển và chi phí vận chuyển. •
Cài đặt thuế: Cấu hình các loại thuế áp dụng cho sản phẩm.
Ví dụ: Trong Shopee, người quản trị có thể dễ dàng cấu hình các phương thức vận chuyển
như giao hàng tiêu chuẩn, giao hàng nhanh, và tính toán chi phí vận chuyển dựa trên trọng
lượng hoặc kích thước sản phẩm.
1.6. Quản lý Marketing •
Tạo mã giảm giá: Tạo các mã giảm giá để khuyến khích khách hàng mua hàng. •
Chạy quảng cáo: Quảng bá sản phẩm và dịch vụ đến khách hàng tiềm năng. •
Gửi email marketing: Tạo các chiến dịch email marketing để tương tác với khách hàng. •
Phân tích dữ liệu: Theo dõi hiệu quả của các chiến dịch marketing.
Giao diện quản trị của một website thương mại điện tử cung cấp cho người quản trị một
công cụ mạnh mẽ để xây dựng và điều hành cửa hàng trực tuyến của mình. Bằng cách hiểu
rõ các chức năng cơ bản và cách sử dụng chúng, người quản trị có thể tối ưu hóa hoạt động
kinh doanh và mang lại trải nghiệm mua sắm tốt nhất cho khách hàng.
Câu 2 (2 điểm). Giả sử anh/chị là một nhà kinh doanh nông sản địa phương, anh/chị đang
xây dựng một website để quảng bá và bán lẻ trực tuyến. Theo anh/chị giao diện website
này cần có các thành phần nào, mô tả các thành phần này? Bài làm: lOMoAR cPSD| 58675420
Theo em giao diện website để quảng bá và bán lẻ trực tuyến sản phẩm nông sản của
địa phương cần có các thành phần như:
2.1. Trang chủ (Homepage): •
Banner hấp dẫn: Hình ảnh tươi tắn, chất lượng cao của các sản phẩm nông sản chủ lực. •
Thông tin nổi bật: Giới thiệu ngắn gọn về nguồn gốc sản phẩm, cam kết về chất
lượng, các chương trình khuyến mãi đang diễn ra. •
Danh mục sản phẩm chính: Hiển thị các danh mục sản phẩm lớn như trái cây, rau
củ, thực phẩm chế biến, ... •
Tìm kiếm: Ô tìm kiếm giúp khách hàng dễ dàng tìm kiếm sản phẩm theo tên hoặc danh mục.
2.2. Trang danh mục sản phẩm: •
Phân loại sản phẩm chi tiết: Chia sản phẩm thành các nhóm nhỏ hơn (ví dụ: rau củ
-> rau, củ) để khách hàng dễ dàng lựa chọn. •
Hình ảnh sản phẩm rõ nét: Hình ảnh thật của sản phẩm ở nhiều góc độ. •
Thông tin sản phẩm đầy đủ: Tên sản phẩm, giá bán, xuất xứ, trọng lượng, hướng
dẫn sử dụng, hạn sử dụng. •
Đánh giá sản phẩm: Cho phép khách hàng đánh giá và đưa ra bình luận về sản phẩm.
2.3. Trang chi tiết sản phẩm: •
Hình ảnh phóng to: Khách hàng có thể zoom hình để xem chi tiết sản phẩm. •
Mô tả chi tiết: Thông tin về đặc điểm, lợi ích của sản phẩm, cách bảo quản. •
Giá cả: Giá bán, các chương trình khuyến mãi (nếu có). •
Số lượng: Cho phép khách hàng chọn số lượng muốn mua. lOMoAR cPSD| 58675420 •
Thêm vào giỏ hàng: Nút mua hàng nhanh chóng. •
Sản phẩm liên quan: Gợi ý các sản phẩm khác có thể khách hàng quan tâm. 2.4. Giỏ hàng: •
Danh sách sản phẩm đã chọn: Hiển thị đầy đủ thông tin về sản phẩm đã chọn, tổng tiền. •
Thay đổi số lượng: Khách hàng có thể tăng giảm số lượng sản phẩm. •
Xóa sản phẩm: Khách hàng có thể xóa sản phẩm khỏi giỏ hàng. •
Tiến hành thanh toán: Nút để chuyển đến trang thanh toán. 2.5. Thanh toán: •
Các hình thức thanh toán: Tiền mặt, chuyển khoản, thanh toán online qua các cổng thanh toán. •
Thông tin giao hàng: Yêu cầu khách hàng nhập đầy đủ thông tin giao hàng. •
Xác nhận đơn hàng: Gửi email xác nhận đơn hàng cho khách hàng.
2.6. Trang giới thiệu: •
Giới thiệu: Giới thiệu về doanh nghiệp, quá trình hình thành và phát triển, các cam
kết về chất lượng sản phẩm. 2.7. Blog (Tin tức): •
Bài viết chia sẻ: Chia sẻ kiến thức về nông sản, các công thức nấu ăn, các bài viết
về đời sống nông dân. 2.8. Chính sách: •
Chính sách đổi trả: Quy định về đổi trả hàng. •
Chính sách bảo mật: Cam kết bảo mật thông tin khách hàng. •
Điều khoản sử dụng: Các quy định chung khi sử dụng website. lOMoAR cPSD| 58675420 2.9. Trang Liên hệ •
Liên hệ: Thông tin liên hệ chi tiết (điện thoại, email, địa chỉ). •
Form liên hệ: Cho phép khách hàng gửi câu hỏi, góp ý. •
Bản đồ: Hiển thị vị trí của cửa hàng (nếu có).
Câu 3 (6 điểm). Xây dựng website bán lẻ trực tuyến nông sản bằng Wordpress. Yêu cầu:
- Website phải có tối thiểu 3 trang (trong đó phải có trang bán hàng), ít nhất 10 sản phẩm,và 5 bài viết.
- Sinh viên nộp 01 file PDF mô tả và có hình minh họa quá trình xây dựng, các giao diệncủa
website, đường link demo trang web đã được xuất bản trực tuyến (kèm tên đăng nhập và
mật khẩu của tài khoản quản trị), và đường link file backup website (.wpress) tạo bởi
plugin All-in-One WP Migration. Bài làm:
3.1. Giới thiệu trang web:
 Tên trang web: Thiết kế website bán lẻ trực tuyến nông sản có tên là Nông sản Vân Nhiên.
 Nền tảng phát triển: WordPress với giao diện Flatesome, sử dụng hệ thống quản lý sản phẩm WooCommerce.
 Link demo: http://vannhien.id.vn/  Link file backup website:  Tên đăng nhập:  Mật khẩu:
3.2. Thiết lập giao diện
3.2.1. Giao diện trang chủ
Trang chủ: Tại đây khách hàng sẽ được trải nghiệm những sản phẩm bán chạy nhất,
sản phẩm mới nhất, sản phẩm đang giảm giá của shop. Ngoài ra, trang chủ còn cập nhật lOMoAR cPSD| 58675420
các chương trình khuyến mãi đặc biệt, giúp khách hàng không bỏ lỡ bất kỳ ưu đãi hấp dẫn
nào. Tất cả các thông tin về địa chỉ cửa hàng, số điện thoại và các phương thức liên hệ đều
được trình bày rõ ràng, giúp khách hàng dễ dàng liên lạc khi cần.
Hình 3.1. Giao diện trang chủ.
- Mục đích: thu hút, giữ chân khách hàng và khuyến khích họ thực hiện mua sắm.
Hình 3.2. Danh mục sản phẩm trong trang chủ. lOMoAR cPSD| 58675420
- Mục đích: Giúp khách hàng dễ dàng tìm kiếm và khám phá các sản phẩm họ quan tâm.
- Nội dung: Danh sách các danh mục chính (Rau củ, Trái cây, Gạo – ngũ cốc – hạt).
Hình 3.3. Sản phẩm bán chạy nhất của Nông sản Vân Nhiên.
Hình 3.4. Các sản phẩm mới nhất của Nông sản Vân Nhiên. lOMoAR cPSD| 58675420
Hình 3.5. Các sản phẩm đang khuyến mãi của shop.
- Hiển thị nhanh các sản phẩm bán chạy nhất, mới nhất, đang giảm giá giúp người dùngdễ
dàng tiếp cận và giúp tăng tỷ lệ mua hàng.
Hình 3.6. Đánh giá, nhận xét của khách hàng.
- Tăng độ tin cậy cho sản phẩm và cửa hàng, giúp khách hàng đưa ra quyết định muahàng dễ dàng hơn. lOMoAR cPSD| 58675420
Hình 3.7. Các bài viết chia sẻ của Nông sản Vân Nhiên.
- Cung cấp bản tin nấu ăn, mẹo vặt, tin tức mới nhất cho khách hàng mỗi khi họ ghé thămwebsite.
Hình 3.8. Thông tin trang web. lOMoAR cPSD| 58675420
- Cung cấp thông tin về cửa hàng, bao gồm thông tin liên hệ, thông tin về chính sách đổitrả
hàng, bảo mật của shop, và fanpage hỗ trợ cho khách hàng mỗi khi khách hàng gặp vấn đề.
3.2.2. Giao diện trang sản phẩm (trang bán hàng)
Hình 3.9. Giao diện trang sản phẩm.
- Thanh tìm kiếm: Giúp người dùng nhanh chóng tìm kiếm sản phẩm mà họ quan tâm. -
Danh mục sản phẩm: Liệt kê các danh mục sản phẩm, giúp người dùng dễ dàng điều
hướng và tìm kiếm sản phẩm theo các nhóm cụ thể.
- Sản phẩm đang giảm giá.
- Hình ảnh sản phẩm: Cung cấp hình ảnh chất lượng cao của sản phẩm để người dùng có thể xem chi tiết.
- Giá cả sản phẩm: Hiển thị giá của sản phẩm, bao gồm giá gốc và giá khuyến mãi (nếu có).
- Bộ lọc sản phẩm (theo giá, theo màu sắc): giúp khách hàng có thể tìm kiếm sản phẩm
theo mong muốn một cách nhanh chóng. lOMoAR cPSD| 58675420
Hình 3.10. Các bộ lọc sản phẩm.
3.2.3. Trang chi tiết sản phẩm
Hình 3.11. Trang chi tiết sản phẩm.
- Thông tin chi tiết sản phẩm: Bao gồm mô tả sản phẩm, chất liệu, kích thước, màu sắc, v.v. lOMoAR cPSD| 58675420
- Nút thêm vào giỏ hàng và mua ngay: Giúp người dùng thêm sản phẩm vào giỏ hàng hoặc mua ngay lập tức.
- Nút danh mục yêu thích (add to wishlist): giúp khách hàng có thể thêm sản phẩm yêu thích.
3.2.4. Giao diện trang Tin tức
Hình 3.12. Giao diện trang tin tức.
Trang tin tức của Nông Sản Vân Nhiên được thiết kế đơn giản, trực quan, dễ sử dụng. Nội
dung đa dạng, các bài viết ở nhiều chủ đề khác nhau như công thức nấu ăn, mẹo vặt, tin
tức, đáp ứng nhu cầu tìm hiểu của nhiều đối tượng người dùng. lOMoAR cPSD| 58675420
Hình 3.13. Thanh bên của trang tin tức. lOMoAR cPSD| 58675420
Hình 3.14. Form đăng ký trang tin tức.
- Thu thập thông tin khách hàng, gửi các chương trình khuyến mãi, thông báo mới
nhất.3.2.5. Giao diện trang Giới thiệu
Hình 3.15. Giao diện trang Giới thiệu.
- Giúp người dùng hiểu rõ hơn về Nông sản Vân Nhiên, về sản phẩm hoặc dịch vụ mà cửa hàng cung cấp. lOMoAR cPSD| 58675420
3.2.6. Giao diện trang liên hệ Thông tin liên lạc cơ bản:
- Địa chỉ cửa hàng: Giúp khách hàng biết vị trí cụ thể của shop.
- Số điện thoại: số điện thoại hỗ trợ khách hàng.
- Địa chỉ email: Địa chỉ email hỗ trợ khách hàng.
- Form liên hệ: Giúp khách hàng có thể liên hệ hoặc phản hồi các thông tin tới shop.
Hình 3.16. Giao diện trang liên hệ. lOMoAR cPSD| 58675420
Hình 3.17. Form khách hàng có thể phản hồi tới cửa hàng.
3.2.7. Giao diện trang đăng ký, đăng nhập.
Hình 3.18. Giao diện trang đăng ký, đăng nhập.
- Thực hiện các thao tác liên quan mua sắm sản phẩm nông sản. Đối tượng phục vụ là tấtcả
khách hàng trên 63 tỉnh thành Việt Nam có nhu cầu mua hàng online và nhận hàng hóa tại nhà. lOMoAR cPSD| 58675420
- Đối với khách hàng đã có tài khoản từ trước chỉ cần lúc trước khi vào trang web
kháchhàng đã để chế độ ghi nhớ thông tin thì lần sau khi vào lại trang web thì khách chỉ cần đăng nhập.
- Đối với khách hàng chưa có tài khoản thì hãy đăng ký tài khoản để có trải nghiệm tốinhất trên cửa hàng.
- Với tài khoản của mình khách hàng có thể đưa ra đánh giá, cảm nhận về sản phẩm hoặckhi
có thắc mắc về sản phẩm sẽ gửi bình luận hoặc đặt câu hỏi và được trả lời bởi các khách
hàng đã mua sản phẩm hoặc bởi nhân viên vannhien.id.vn. Đây cũng là cơ sở để những
khách hàng khác khi vào mua sản phẩm đó đọc được những đánh giá khách quan từ những
người đã trải nghiệm sản phẩm của shop.
3.2.8. Giao diện giỏ hàng và thanh toán.
Hình 3.19. Giao diện giỏ hàng lOMoAR cPSD| 58675420
Hình 3.20. Giao diện đặt hàng và thanh toán.
3.3. Các tính năng và plugin sử dụng.
3.3.1. Các tính năng sử dụng trên Wordpress.
- Tạo mã giảm giá cho sản phẩm.
Vào mục tiếp thị trên Wordpress -> Các ưu đãi -> Tạo ưu đãi.
Hình 3.21. Tạo mã giảm giá.
- Tạo trang đăng ký, đăng nhập. lOMoAR cPSD| 58675420
Bước 1: Vào cài đặt trên Wordpress -> Cài đặt chung -> Vai trò của thành viên chọn thành viên đăng ký.
Bước 2: Vào Woocommerce -> Cài đặt -> Tài khoản & Bảo mật -> Tích vào như hình bên dưới.
Hình 3.22. Các bước tạo giao diện đăng ký cho website.
3.3.2. Các plugin sử dụng.
- Woocommerce giúp em tạo ra một cửa hàng trực tuyến chuyên nghiệp với các tính
năngnhư quản lý sản phẩm, quản lý đơn hàng, phương thức thanh toán, phương thức vận
chuyển, marketing, tính thuế, tạo báo cáo.