Sau một thời gian tìm tòi, học hỏi mình cũng đã viết được một theme bán hàng cho riêng mình có tên Việt Designer Shop nay giới thiệu đến bạn đọc nếu muốn sử dụng thì liên hệ với mình mua theme.
TÍNH NĂNG GIAO DIỆN
Ngay từ tên gọi của nó, theme này mình viết chỉ thiết kế tối ưu cho tính năng bán hàng cho dù là bán bất cứ sản phẩm gì. Dưới đây là danh sách các tính năng mình liệt kê được tích hợp vào theme.
1. Trang chủ
Trang chủ bố cục một cột bao gồm các widget:
- Widget banner slider đầu trang
- Widget Slider sản phẩm được xem nhiều
- Các widget slider theo từng danh mục sản phẩm
- Widget slider cho danh mục tin tức
Ngoài ra mình còn thiết kế một số widget dạng landing sau:
+ Widget Giới thiệu
+ Widget Dịch vụ
+ Widget Khách hàng
+ Tính năng hiển thị của widget sản phẩm
Bao gồm các tính năng chính:
- Bao gồm 2 ảnh sản phẩm hiện thị một ảnh và hiển thị ảnh còn lại khi hover
- Các biểu tượng: On Sale, Best Seller, Top Rated hiển thị trên hình sản phẩm theo các trường hợp:
- Nếu sản phẩm có giá giảm, hiển thị biểu tượng On Sale
- Nếu sản phẩm bán chạy, hiển thị biểu tượng Best Seller
- Nếu bài viết sản phẩm có số bình luận bằng hoặc lớn hơn 5, hiển thị biểu tượng Top Rated
- Giá sản phẩm bao gồm: Giá bán, Giá giảm, Liên hệ (không để giá) và Hết hàng
- Bộ đếm Star rating hiển thị tương ứng với số lượt bình luận thực trong bài viết
- Nếu số bình luận dưới 3, hiển thị 3 sao
- Nếu số bình luận trong khoảng 3 tới 5, hiển thị 3,5 sao
- Nếu số bình luận trong khoảng 6 tới 8, hiển thị 4 sao
- Nếu số bình luận trong khoảng 9 tới 11, hiển thị 4,5 sao
- Nếu số bình luận trên 11, hiển thị 5 sao
- Button Add to Wishlist, Add to Cart cho phép thêm nhanh sản phẩm vào Wishlist và Giỏ hàng
- Các button modal popup tương ứng với giá và tình trạng
- Nếu sản phẩm có giá, hiển thị button Mua nhanh
- Nếu sản phẩm có giá Liên hệ, hiển thị button Đặt mua
- Nếu sản phẩm hết hàng, hiển thị button Hết hàng và bị vô hiệu hóa
+ Tính năng Quick view (xem nhanh) tóm tắt sản phẩm
Hiển thị button Quick view khi hover vào ảnh
Hiển thị popup tóm tắt sản phẩm khi click vào button
Popup Quick view được chia thành 2 cột:
- Cột bên trái hiển thị slider ảnh sản phẩm
- Cột bên phải hiển thị tên, giá, tính trang, đoạn mô tả ngắn, danh mục, các button tương ứng với giá
- Hiển thị button Thêm vào giỏ khi sản phẩm để giá
- Hiển thị button Đặt mua khi sản phẩm có giá Liên hệ
- Hiển thị button Nhận thông báo khi sản phẩm Hết hàng
+ Các widget popup hiển thị khi click vào các button tương ứng:
 |
| Hiển thị widget order khi click vào button Đặt mua |
 |
| Hiển thị widget quick buy khi click vào button Mua ngay |
 |
| Hiển thị widget nhận thông báo khi click vào button Nhận thông báo |
+ Tính năng Image Zoom khi hover vào slide ảnh sản phẩm
Tính năng khi hover vào đểm nào nào đó của ảnh có tùy chọn scroll chuột hoặc touchpad để phóng to hoặc thu nhỏ vị trí muốn xem
2. Trang danh mục sản phẩm
Trang danh mục sản phẩm bố cục được chia thành 2 cột, với cột bên trái hiển thị các sản phẩm theo danh mục bên dưới là phân trang đánh số thứ tự, cột bên trái gồm các widget Label theo danh mục và theo giá và widget các sản phẩm xem nhiều.
Các tính năng hiển thị của widget sản phẩm tương tự như Trang chủ
3. Trang bài viết sản phẩm
Trang bài viết sản phẩm với bố cục 2 cột, bên phải cột bài viết sản phẩm, bên dưới có widget slider các sản phẩm liên quan. Cột bên phải gồm 2 widget Quick buy (mua nhanh) và widget Các sản phẩm xem nhiều.
Cột bài viết được chia 3 mục trái phải và dưới nếu xem trên trình duyệt máy tính, và một cột nếu xem trên điện thoại
- Mục bên trái là slider ảnh sản phẩm tích hợp các biểu tượng: On Sale, Best Seller, Top Rated hiển thị trên hình sản phẩm và tính năng Image Zoom khi hover vào ảnh
- Mục bên phải: Tên sản phẩm, button Star rating, Add to Wishlist, Giá sản phẩm, Mô tả ngắn sản phẩm, Danh mục sản phẩm, Các button Thích, Chia sẻ, Liên hệ Fb, Zalo
- Liên kết bào gồm ảnh của bài mới hơn, bài cũ hơn bên phải tên sản phẩm
- Các button tương ứng với giá và tình trạng
- Nếu sản phẩm có giá, hiển thị button Thêm vào giỏ
- Nếu sản phẩm có giá Liên hệ, hiển thị button Đặt mua
- Nếu sản phẩm hết hàng, hiển thị thông báo "Sản phẩm này hiện đang hết hàng và không có sẵn"
- Cột dưới bao gồm 3 tab:
- Tab chi tiết
- Tab Review
- Tab Chính sách bán hàng, thanh toán và giao hàng
- Nếu sản phẩm còn hàng và để giá, hiển thị widget Mua nhanh
- Nếu sản phẩm hết hàng, hiển thị widget Nhận thông báo
4. Trang Wishlist lưu các sản phẩm yêu thích
Trang Wishlist hiển thị danh sách các sản phẩm yêu thích đã thêm, mỗi hàng là thông tin của một sản phẩm gồm: Xóa, Ảnh, Tên, Giá, Tình trạng hàng trong kho, và các button đặt hàng tương ứng
- Nếu sản phẩm để giá, hiển thị button Thêm vào giỏ
- Nếu sản phẩm để giá Liên hệ, hiển thị button Đặt mua
- Nếu sản phẩm hết hàng, hiển thị button Nhận thông báo
+ Tính năng giới hạn số sản phẩm được thêm
Tính năng này cho phép cài đặt số sản phẩm giới hạn thêm vào Wishlist, nếu vượt quá số sản phẩm đã thêm sẽ hiện popup thông báo: "Bạn chỉ thêm được tối đa <số sản phẩm tối đa> sản phẩm. Bạn cần xóa bớt sản phẩm trong Wishlist trước khi thêm sản phẩm mới. Bạn muốn đi đến trang Wishlist?"
5. Widget & Trang Giỏ hàng
Trang Giỏ hàng bố cục 2 cột:
- Cột trái
- Danh sách các sản phẩm đã thêm vào giỏ, mỗi hàng là thông tin của một sản phẩm gồm: Xóa, Ảnh, Tên, Giá, button số lượng tăng giảm và thành tiền
- Button quay về trang danh mục sản phẩm
- Tính năng Cập nhật giỏ hàng nếu số lượng của mỗi sản phẩm thay đổi
- Cột phải
- Số tiền tạm tính
- Phí vận chuyển, form cập nhật địa chỉ
- Tổng tiền
- Form hiển thị và áp dụng mã giảm giá với 2 điều kiện:
1. Mã giảm giá được Admin kích hoạt ='true' hiển thị ngẫu nhiên
2. Tổng đơn hàng (Số tiền tạm tính > lớn hơn số tiền do Admin cài đặt ví dụ 500,000 ₫
+ Mã giảm giá chỉ được kích hoạt bằng số tiền trừ trực tiếp theo % đơn hàng do Admin cài đặt ví dụ 5% khi khách hàng chọn Áp dụng
+ Mã giảm giả chỉ được lưu khi khách hàng đã Áp dụng và không sẽ bị xóa ngay khi khách tắt trình duyệt
+ Thông báo khi khách hàng đã Áp dụng mã giảm giá
+ Thông báo lại khi khách hàng đã Áp dụng mã giảm giá và truy cập lại trang Giỏ hàng, Form hiển thị và áp dụng mã giảm giá sẽ bị ẩn đi
+ Tính năng widget giỏ hàng
- Hiển thị danh sách các sản phẩm được thêm vào giỏ, mỗi hàng hiển thị thông tin một sản phẩm: Ảnh, Tên, Số lượng x Giá, Thành tiền và nút xóa sản phẩm
- Cập nhật tăng số lượng và thành tiền khi thêm sản phẩm vào giỏ mà sản phẩm đã được thêm trước đó
- Hiển thị Số tiền tạm tính, button đi đến trang Giỏ hàng và Thanh toán
+ Tính năng giới hạn số sản phẩm thêm vào giỏ
Tính năng này cho phép cài đặt số sản phẩm giới hạn thêm vào giỏ hàng, nếu vượt quá số sản phẩm đã thêm sẽ hiện popup thông báo: "Bạn chỉ thêm được tối đa <số sản phẩm tối đa> sản phẩm vào giỏ. Bạn cần thanh toán hoặc xóa bớt sản phẩm trong giỏ hàng trước khi thêm sản phẩm mới. Bạn muốn đi đến trang thanh toán?"
6. Trang Thanh toán
+ Trang Thanh toán bố cục 2 cột với cột trái hiển thị form thông tin liên hệ khách hàng tự điền, cột bên phải là tóm tắt đơn hàng với danh sách sản phẩm, số lượng x giá = thành tiền của mỗi sản phẩm, Tổng phụ, Phí vận chuyển (nếu có), Khuyến mãi (nếu có), Số tiền phải Thanh toán, Phương thức thanh toán, xác nhận của khách hàng
+ Tương tự như trang giỏ hàng, trang thanh toán cũng có Form hiển thị và áp dụng mã giảm giá
+ Form hiển thị và áp dụng mã giảm giá sẽ không hiển thị tại trang thanh toán nếu như khách hàng đã áp dụng mã giảm giá tại trang Giỏ hàng, thay bằng thông báo khách hàng đã áp dụng mã giảm giá trước đó.
+ Phí vận chuyển dựa theo khách hàng lựa chọn tỉnh, thành phố
7. Trang Hoàn tất
Hiển thị thông tin đơn hàng khi khách đặt hàng thành công
- Cột trái: hiển thị danh sách sản phẩm được mua, Tổng số phụ, Phí vận chuyển (nếu có), Khuyến mãi (nếu có) và Tổng số tiền phải thanh toán
- Cột phải: hiển thị Số sản phẩm, Ngày đặt hàng, Mã giảm giá, Số tiền thanh toán và Phương thức thanh toán
- Đơn hàng sẽ bị xóa ngay, Giỏ hàng sẽ được làm mới sau khi khách thoát khỏi trang Hoàn tất
- Thông tin đơn hàng sẽ được gửi đến Google form ngay khi click vào button Đặt hàng tại trang Thanh toán
8. Các tính năng khác
 |
| Live search tìm kiếm nhanh sản phẩm |
 |
| Thông báo khi có khách hàng đăng nhận xét sản phẩm |
 |
| Thông báo sản phẩm được đề xuất |
 |
| Bộ lọc Quận, Huyện của 63 Tỉnh Thành |
9. Quy trình mua hàng & thanh toán
Quy trình mua hàng gồm 2 tùy chọn:
- Mua hàng nhanh
- Với tùy chọn này, khách hàng chọn mua ngay sản phẩm khi click vào button Mua ngay
- Hoặc khách có thể chọn Đặt hàng nhanh khi xem bài viết sản phẩm
- Tùy chọn Mua nhanh chỉ áp dụng cho một sản phẩm và không lưu đơn hàng khi khách không Đặt hàng
- Thêm sản phẩm vào Giỏ hàng
- Với tùy chọn này, khách hàng thêm được nhiều sản phẩm vào Giỏ hàng để lưu Đơn hàng, khách có thể truy cập trang Giỏ hàng cập nhật số lượng, áp dụng mã giảm giá hoặc truy cập trang Thanh toán để Đặt hàng
10. Tính năng tùy chỉnh cho Admin
Đăng nhận xét