1. Sử dụng local storage để hiển thị nội dung và trạng thái các đơn hàng mà khách đã đặt hàng trên trình duyệt. Mà không cần phải đăng nhập tài khoản khách hàng.
2. Nội dung đơn hàng:
a. Ngày giờ đặt hàng
b. Tên khách hàng
c. Địa chỉ
d. Số điện thoại
e. Danh sách sản phẩm đã mua: Hình ảnh + Tên sản phẩm và đường dẫn đến trang sản phẩm.
f. Trạng thái đơn hàng
Tham khảo tại link sau: https://onapp.haravan.com/orderstrackingphone/shop/ula-viet-nam
Nhập số điện thoại mẫu: 0938925502
1. Kích thước, màu sắc như thông số bằng cách inspect webpage này.
2. Khi ở trạng thái nút nào thì chỉ số code opacity=1 trong bộ code SVG của icon
3. Viền chỉ đen phía trên chạy đến vị trí icon đang ở trạng thái acitve.
4. Khoảng cách giữa các bộ icon tự động dàn trải (responsive) theo tỷ lệ tương xứng với bề ngang của màn hình di động.
5. Lưu ý: áp dụng css độn cằm cho sticky bottom navigation bar: https://medium.com/butternut-engineering/sticky-bottom-navigation-7b6038bd27b6
6. Menu có tổng cộng 3 cấp (không giới hạn số lượng item trong mỗi menu) được trình bày như hình bên trái.
a. Menu cấp 1: có kèm theo icon với chiều cao cố định là 30px, chiều ngang tự điều chỉnh theo tỷ lệ hình ảnh. File icon có định dạng .svg, được upload trực tiếp vào thư mục Asset của theme, với mẫu tên file là: menu-mobile-san-pham-icon-level-1-1.svg, menu-mobile-san-pham-icon-level-1-2.svg, menu-mobile-san-pham-icon-level-1-3.svg, vân vân... với chữ số thứ tự cuối cùng được gán theo thứ tự của các item trong menu theo quy tắc đặt tên file là:
menu-handle của menu-icon-level-1-hậu tố số thứ tự.svg
Ô chứa thiết kế theo kiểu responsive sao cho khoảng cách trên dưới giữa các ô luôn là 10px, và các ô chứa luôn cách mép màn hình một khoảng 10px.
b. Menu cấp 2: nếu menu cấp 2 có item con bên dưới nó, và menu này nếu không có gắn link "#" thì cần hiển thị thêm link "Xem tất cả" (hình minh họa), ngược lại thì chỉ cần hiển thị dưới dạng nút bấm.
c. Menu cấp 3, cấp 4: có thể xổ ra, và tự động đóng lại khi chuyển qua menu cấp khác.
d. Trạng thái khi bấm vào các nút của menu là đổi màu nền của nút như hình minh họa.
6. Mỗi bộ icon ở phần đáy màn hình sẽ liên kết đến 1 bộ menu với handle khác nhau, tuần tự như sau:
a. Trang chủ: luôn liên kết đến trang chủ
b. Sản phẩm: liên kết đến bộ menu: mobile-san-pham với tên gọi header là: DANH MỤC SẢN PHẨM
c. Thương hiệu: liên kết đến bộ menu: mobile-thuong-hieu với tên gọi header là: DANH SÁCH THƯƠNG HIỆU
d. Ưu đãi: liên kết đến bộ menu: mobile-uu-dai với tên header là: CHƯƠNG TRÌNH ƯU ĐÃI
e. Liên hệ & Hỗ trợ: liên kết đến bộ menu: mobile-lien-he-ho-tro với tên header là: TRUNG TÂM DỊCH VỤ KHÁCH HÀNG
7. Menu cuộn được không giới hạn trong phạm vi ô chứa có chiều cao cố định bằng 70% chiều cao màn hình thiết bị. Trong đó, phần header của Menu đươc giữ cố định trong khi phần content của menu sẽ cuộn được tự do. Khoảng chừa trống trên và dưới cùng của toàn bộ menu content trong phần diện tích pannel sẽ là 20px.
8. Menu pannel chạy từ dưới lên (giống bên trang /product của purchase pannel), ngoài ra, khi bấm vào phần hiển thị bên ngoài diện tích pannel thì Menu tự động đóng xuống lại. Và cũng có thể bấm nút X để close menu lại.
9. Cần dùng chung source code của bên product pannel để đồng bộ code. Đồng thời cần chỉnh CSS ở pannel ở các vị trí cần lưu ý:
a. Dấu X close màu đen 100%
b. Giảm khoảng cách chừa lề trên dưới của cụm nút THÊM VÀO GIỎ HÀNG và MUA NGAY, GỬI EMAIL KHI CÓ HÀNG TRỞ LẠI.
c. 2 đường line trên và dưới cùng sẽ chạy hết mép màn hình
d. Các đường line phân chia nội dung thì chừa lề 10px trái, phải.
10. Ở mục top header của theme:
a. Gỡ bỏ đoạn code Menu cũ bên trái đi.
b. Thay thế vị trí icon Menu 3 gạch ngang bằng icon sau, và dẫn link về trang đăng nhập thành viên.
LƯU Ý:
Khi có nhiều item trong menu thì có cuộn lên xuống được mượt mà trong phạm vi diện tích của khung panel của Menu.
Code cần được tối ưu để tránh xung đột, hoạt động nhẹ nhàng, không nặng máy.
1. Tạo các file gsheet chứa Google Script để Đồng Bộ Stock & Price
2. Chức năng: gửi thông tin giá, và số lượng tồn kho lên Haravan.
a. Tự động quét để lấy dữ liệu từ 4 cột với tên gọi sau:
- barcode
- model
- stock
- gia online
b. Đối chiếu với mã product ID của Haravan để lấy dữ liệu từ gsheet ghi đè lên Haravan, matching như sau:
GSHEET => HARAVAN:
- stock => số lượng tồn kho
- gia online => price
Cần có bước khởi tạo thư viện dữ liệu: từ dữ liệu cột model qua product ID, bằng cách Get product id về, rồi matching mã sản phẩm với model, để xác định được mối liên kết giữa model (từ gsheet) với product ID (từ Haravan). Lý do Haravan quản lý theo Product ID, còn gheet quản lý theo Model, và 2 dữ liệu này khác nhau.
Ngoài ra, cần matching dữ liệu barcode (từ gheet) với dữ liệu mã sản phẩm SKU (từ Haravan).
Lưu ý: mỗi sản phẩm (product ID) quần áo giày dép đều có nhều size, mỗi size tương ứng với 1 SKU (gọi là barcode trên gsheet, hay gọi là SKU trên Harvan).
c. Tự động set chế độ hiển thị của sản phẩm trên web là: No, khi sản phẩm có tổng số lượng của các variant = 0.
d. Cần có hiển thị report kết quả cập nhập với từng barcode (thành công/thất bại)
Hiện tại khi bấm vào các nút "Sản phẩm", "Thương hiệu", "Ưu Đãi", "Liên hệ & Hỗ trợ" thì vẫn chưa chuyển hết thành opacity = 1 (vẫn còn nhạt màu).
Do vậy, cần chỉnh lại để khi chạm vào các nút này thì các icon và chữ đều có opacity =1 (tức là hiển thị đậm màu đen)
Với các trình duyệt không phải Safari thì cần bổ sung độn cằm để không bị che mất giao diện hiển thị. Ví dụ so sánh bên dưới ở trình duyệt Chrome. Xem link hướng dẫn cách ứng dụng: https://medium.com/butternut-engineering/sticky-bottom-navigation-7b6038bd27b6
Bên trang sephora.com không bị hiêun tượng. này.