Chương 2. NỘI DUNG THỰC TẬP
2.2. Các dự án đã triển khai
2.2.1. Dự án Quảng Cáo In Ấn Gia Đạt
2.2.1.5. Đặc tả lập trình website Gia Đạt
Dưới đây là bảng đặc tả của dự án Quảng Cáo In Ấn Gia Đạt:
STT DANH MỤC CHỨC NĂNG CHI TIẾT GHI CHÚ
1 Responsive Cho phép co dãn trên các thiết bị.
2 Nút điều
hướng Luôn hiển thị trên màn hình.
TRANG CHỦ 1 Banner
quảng cáo trên header
Cho phép cập nhật 1 ảnh ở đầu trang + gắn link cho ảnh.
2 Logo
1. Cho phép cập nhật Logo ở trang admin - hiển thị vị trí như design - di chuyển trang chủ xuống dưới logo nhỏ lại vẫn hiển thị theo thanh menu trên desktop.
2. Khi click vào logo sẽ quay về Trang chủ.
3 Header 1. Như design - chứa thông tin bao
Liên hệ.
2. Header dính lại khi scroll xuống.
3. Menu giống design dạng xổ danh mục sản phẩm.
4. Khi chuyển trang sẽ có dấu gạch chân hiển thị bên dưới tên trang đó.
5. Search bar cho phép tìm kiếm từ khóa theo sản phẩm.
4 Banner
1. Cho phép cập nhật nhiều hình ảnh + gắn link cho ảnh.
2. Tự động chuyển banner mỗi 5s.
3. Có nút CTA "ĐẶT NGAY" trên banner.
4. Click vào CTA "ĐẶT NGAY" thì chatbox sẽ tự động hiện lên.
5. Kích thước Banner full màn hình (trên mọi thết bị).
Nếu cập nhập 1 hình ảnh thì không có nút roll ngang, nếu nhiều hình ảnh thì hiện nút roll ngang. (ẩn hoặc hiện nút roll dựa vào số lượng hình ảnh)
5 Hotline, Email, Zalo
Cho phép cập nhật chỉnh sửa nội dung text.
6 2 banner quảng cáo
Cho phép cập nhật chỉnh sửa hình ảnh, được roll ngang, tự động roll ngang sau 5s.
7 Mục
"Flashsale"
1. Cho phép ẩn mục flash sale nếu chưa có chương trình khuyến mãi.
2. Cho phép cập nhật chỉnh sửa Title
"FLASH SALE " tại admin.
3. Cho phép tick chọn sản phẩm có khuyến mãi, set được giá gốc, giá khuyến mãi.
4. Cho phép srcoll trái phải các sản phẩm flash sale.
5. Khi hover vào mỗi sản phẩm flash sale thì sẽ có hiệu ứng làm nổi bật sản phẩm đó.
6. Nút "Xem thêm" dẫn đến danh mục
"FLASH SALE " ở trang Danh mục sản phẩm.
7. Khi click vào sản phẩm sẽ hiển thị như phần flashsale trang
8. Khi click vào nút liên hệ ngay sẽ dẫn đến phần chatbox.
8
Mục "Ấn phẩm nổi bật"
1. Cho phép cập nhật chỉnh sửa hình ảnh, nội dung , giá.
2. Khi hover vào mỗi ấn phẩm thì sẽ có hiệu ứng làm nổi bật ấn phẩm đó.
3. Khi click vào ấn phẩm sẽ hiển thị như phần ấn phẩm nổi bật trang https://
thegioiinan.com/#
4. Nút "Xem tất cả sản phẩm" dẫn đến trang Danh mục sản phẩm.
9 Mục "Vì sao chọn Gia Đạt"
1. Cho phép thay đổi, cập nhật icon, tiêu đề và mô tả.
2. Cho phép roll ngang khi có nhiều mục hơn.
3. Khi hover vào mục nào, mục đó sẽ đổi màu như design.
10 Mục "Kiến Thức"
1. Khi click vào "Xem thêm" sẽ hiển thị nội dung chi tiết bài viết đó ở trang kiến thức in ấn.
2.Khi nhấn vào "Xem tất cả" sẽ nhảy đến trang kiến thức in ấn.
3. Khi hover vào sẽ có hiệu ứng làm nổi bật kiến thức đó.
4.Hiển thị các bài viết được tích nổi bật.
11
Mục "Đối tác tin cậy của các thương hiệu hàng đầu "
1. Cho phép cập nhật các đối tác chính.
2. Khi hover vào thì sẽ zoom nhẹ làm nổi bậc đối tác được hover đó.
2. Vị trí hiển thị nổi bật nhiều hơn 6 thì sẽ tự roll ngang sau 3s.
12 Mục "Form liên hệ"
1. Hiển thị như design.
2. Hiển thị form gửi yêu cầu tư vấn:
Tên, số điện thoại, email, nội dung tư vấn.
3. CTA "Gửi yêu cầu"- Khách hàng click vào CTA sẽ gửi thông tin về admin có thông báo mail cho admin.
2. Các mục có thể thay đổi text title và có phần quản lý riêng tại admin:
+ Thông tin liên hệ : Liên kết các mạng xã hội của công ty lên website như: Facebook, Youtube,Zalo…
+ Chính sách khách hàng + Phương thức thanh toán + Phương thức vận chuyển
14 Mạng xã hội Cho phép gắn link các mạng xã hội của công ty lên website như:
Facebook, Youtube, Zalo…
15 Nút liên hệ Có chỗ gắn code chat facebook plugin chat hiển thị góc phải bên dưới màn hình trên desktop.
CÁC TRANG CON
1 Danh mục sản phẩm
1. Khi hover vào mục " Danh Mục Sản Phẩm" sẽ xổ xuống các danh mục bậc 1, 2, 3,…Nếu ấn vào "danh mục sản phẩm" sẽ hiện ra các danh mục bậc 1,2,3.. , còn ấn vào danh mục bậc 1, 2, 3 bất kỳ sẽ dẫn đến trang danh mục bậc đó.
2.Cho phép Show tất cả sản phẩm và show theo danh mục.
2
Danh mục sản phẩm
=>> Bậc 1,2, 3..
1.Khi click vào danh mục bậc 1,2,3 thì sẽ dẫn tới trang chi tiết sản phẩm.
2.Khi click vào nút liên hệ ngay sẽ dẫn đến phần chat box.
3 Giới thiệu Cho phép cập nhật hình ảnh, tiêu đề và bài viết chi tiết.
4 Kiến thức in
ấn Cập nhật kiến thức in ấn dưới dạng bài viết, hình ảnh.
5 Liên hệ Hiển thị thông tin của công ty và form để khách hàng liên hệ.
Bảng 2.3: Đặc tả lập trình website Gia Đạt