Hình 4.1 Giao diện đặt hàng Giao diện đặt hàng gồm có:
- Panel chọn sản phẩm - Panel danh sách sản phẩm - Panel Thông tin đặt hàng
Panel chọn sản phẩm gồm có:
- Selectbox Chọn sản phẩm: Cho phép chọn sản phẩm cần mua
- Input Số lượng: Cho phép nhập số lượng sản phẩm ứng với sản phẩm bên cạnh - Button Chọn ngay: Thực hiện thêm sản phẩm ứng với số lượng vào Danh sách
Panel sản phẩm gồm có:
- Button Xóa hết: Thực hiện xóa hết các sản phẩm trong danh sách sản phẩm - Selectbox Đơn vị tính: Cho phép chọn đơn vị tính của sản phẩm tương ứng - Input Số lượng: Cho phép nhập, sửa số lượng sản phẩm của sản phẩm cùng
dòng
- Button Xóa: Xóa sản phẩm cùng dòng ra khỏi danh sách sản phẩm
Panel thông tin đặt hàng gồm có:
- Bản đồ google map: Cho phép chọn địa điểm mua hàng - Input Ngày xuất: Hiển thị ngày xuất đơn đặt hàng - Input Địa điểm mua: Hiển thị địa điểm mua
- Select box Tỉnh/Thành Phố: Cho phép chọn Tỉnh hoặc Thành Phố nơi nhận hàng
- Select box Quận/Huyện: Cho phép chọn Quận hoặc Huyện thuộc Tỉnh hoặc Thành Phố đã chọn ở select box Tỉnh/Thành Phố
- Select box Xã/Phường: Cho phép chọn Xã hoặc Phường thuộc Quận hoặc Huyện đã chọn ở select box Xã/Phường
- Input Đường phố/Số nhà: Cho phép nhập Tên đường phố và số nhà địa điểm nhận hàng hoặc khu vực địa điểm nhận hàng
- Input Số điện thoại: Cho phép nhập số điện thoại người nhận hàng - Textarea Ghi chú: Cho phép nhận ghi chú về đơn hàng
- Input Số tiền đặt cọc: Cho phép nhận số tiền đặt cọc
- Input Khoảng cách: Hiển hiện khoảng cách tính được từ địa điểm mua hàng đến địa điểm nhận hàng
- Button đặt hàng ngay: Thực hiện gửi đơn đặt hàng
Mô tả hoạt động:
- Bước 1: Chọn sản phẩm cần mua ở select box Panel Chọn sản phẩm. Nhập số lượng sản phẩm ở Input Số lượng Panel Chọn sản phẩm. Nhấn button Chọn ngay ở Panel Chọn sản phẩm. Sau khi Nhấn vào button Chọn ngay Sản phẩm sẽ được thêm vào danh sách sản phẩm ở Panel Danh sách sản phẩm. Kiểm tra, điều chỉnh số lượng sản phẩm hoặc xóa sản phẩm chọn nhầm bằng button Xóa tương ứng với sản phẩm trong Panel Danh sách sản phẩm
- Bước 2: Nhập địa điểm mua tại Input Nhập nơi mua hàng trên Google map chọn kết quả chính xác tại box kết quả ngay dưới input này. Sau khi chọn Input Địa điểm nhận sẽ được tự động điền với kết quả đã chọn
- Bước 3: Chọn Tỉnh hoặc Thành phố nơi nhận hàng ở select box Tỉnh/Thành phố. Sau khi chọn Tỉnh/Thành phố Select box Quận/Huyện sẽ hiện ra các quận huyện thuộc thành phố đó, chọn quận hoặc huyện nơi nhận hàng. Sau khi chọn
Quận/Huyện Select box Xã Phường sẽ hiện ra các xã phường thuộc quận huyện đó, chọn xã hoặc phường nơi nhận hàng. Sau đó nhập đầy đủ thông tin vào các mục Đường/Số nhà, Số điện thoại, Ghi chú nếu có),Số tiền đặt cọc. Khoảng cách sẽ được tự động tính dự vào địa điểm mua và địa điểm nhận.
- Bước 4: Nhấn vào button Đặt hàng ngay. Nếu không xảy ra lỗi đơn hàng sẽ được gửi lên server và lưu vào database. Sau đó tự động chuyển hướng sang trang xem đơn hàng này.