Ngay từ đầu khi vào trang web như ta đã nói từ trước thì những sản phẩm nổi bật theo một số tiêu chí đã được thống kê lại và người dùng có thể xem qua menu trên cùng, phần nội dung bên trái, thông qua thanh tab ở giữa, khung tìm kiếm sản phẩm bên phải nữa:
Và việc hiển thị của sản phẩm ta cũng làm như hiển thị tin tức. Ta sẽ chỉ hiển thị một số thông tin cần thiết nhất mà thôi.
Mỗi sản phẩm sẽ hiển thị như hình trên. Với những sản phẩm mới nhất sẽ có một Icon thông báo New ở bên trên trái, với những sản phẩm có khuyến mại thì sẽ hiển thị Icon hình giỏ quà ở bên trên phải. Để việc xem thông tin sản phẩm tiện lợi hơn khi người dùng xem nhanh một sản phẩm ta sẽ cung cấp thêm tính năng Auto ToolTip tức là khi người dùng di chuyển chuột vào phạm vi hiển thị một sản phẩm nào thì một cửa sổ nhỏ sẽ tự động hiện lên để xem nhanh một số tính năng cần thiết hơn.
Để xem giữ nguyên trạng thái xem thông số của sản phẩm này ta bấm phím “S” để có thể xem, di chuyển chuột trên tooltip, copy thông mà không bị mất cửa sổ. Nếu muốn thoát trạng thái giữ nguyên xem nhanh này ta chỉ cần di chuột ra khỏi tooltip và nháy chuột trái một lần nữa là được.
Ngoài Xem nhanh ta cũng có thể xem chi tiết nhất như xem tin tức bằng cách vô cùng đơn giản là khi bấm chuột vào sản phẩm muốn xem là được.
Điều đặc biệt với mỗi sản phẩm là chúng cũng được bổ xung thanh Tab để xem một số tính năng khác so với thông tin chi tiết như thông số kỹ thuật, so sánh sản phẩm, thông tin khuyến mại:
Thông số kỹ thuật:
Là một điều không thể thiếu với mỗi sản phẩm hiện đại. Việc lưu trữ sẽ tốn rất nhiều nếu ta không có thuật toán xử lý tối ưu nhất. Và có 2 phương án được đề ra là:
+ Phương án 1: Xây dựng một bảng thông số kỹ thuật rồi với mỗi sản phẩm khi ta thêm vào sẽ lưu các thông số.
+ Phương án 2: Xây dựng một trường thông số kỹ thuật để lưu các thông số kỹ thuật vào rồi sử dụng các hàm xử lý xâu ký tự để đọc dữ liệu ra.
Khi so sánh 2 phương án trên ta thấy phương án rất tiện và dễ dàng cho quá trình lưu trữ và xử lý về sau nhưng lại tốn quá nhiều bảng cho nó. Phương án 2 tuy khó xử lý và lưu trữ nhưng lại tỏ ra vượt trội về dung lượng so với phương án 1. Vì thế ta sẽ lựa chọn phương án 1. Vì thế ta sẽ thêm vào bảng SanPham 1 trường mới là trường thông số kỹ thuật:
Tuy nhiên với phương án này ta buộc phải lưu thông số kỹ thuật theo nguyên tắc đặt ra. Visual Studio cung cấp cho ta 2 hàm để phân chia dữ liệu kiểu chuỗi là Regex và Split. 2 hàm này sẽ đọc và tách dữ liệu ra theo một ký tự đặc biệt nào đó hoặc theo một nguyên tắc ta đặt ra ví dụ như ký tự đặc biệt: @,$, %,#,.. hoặc nguyên tắc là một loạt số [0..9], hoặc 1 loạt ký tự [a-..Z] để ngăn cách... Chúng ta cùng xem xét đoạn quy tắc đặt ra dưới đây với trường thông số kỹ thuật: Hệ điều hành:&Windows 8@ Chipset:&G78H1@ CPU:&1.5GHz@ GPU:&Không@ Kích thước :& 118 x 51 x 10.1mm@ Ngôn ngữ :& Tiếng Việt, Tiếng Anh@ Kiểu điện thoại :& Thanh (thẳng)@ ...
Với mỗi một thông số con thuộc chi tiết ta phân cách ra bởi dấu @. ta sẽ lọc ra được các thông số và cả giá trị của thông số đó. Ta cần phải phân thêm một lần nữa để tách được giữa thông số và giá trị của nó. Ta sử dụng dấu & để chia ra một lần nữa giữa thông số và giá trị của thông số đó là được.
Và đây là kết quả sau khi ta tách đoạn thông số kỹ thuật trên:
Tuy có khó khăn về mặt xử lý, lưu trữ nhưng chúng ta đã hoàn thành được chức năng xem thông số kỹ thuật của 1 sản phẩm. Chúng ta sẽ dùng chức năng này cho việc tiếp theo.
So Sánh Sản Phẩm:
Sau khi đã làm được phần thông số sản phẩm ta có thể dựa vào chức năng đó để so sánh thông số giữa các sản phẩm với nhau để người dùng có thể so sánh tính năng giữa mỗi sản phẩm để chọn mua sản phẩm nào ưu việt hơn. Ý tưởng cho chức năng này là truyền vào một trang so sánh các mã sản phẩm, từ mã sản phẩm đó ta đọc các thông số theo thứ tự và sắp xếp ngang hàng với nhau thì ta sẽ dễ dành đối chiếu các thông số giữa các sản phẩm với nhau.
Sau khi bấm thẻ Tab sang tab So Sánh Sản Phẩm ta sẽ liệt kê ra các sản phẩm để so sánh.
Tuy nhiên những sản phẩm này phải cùng loại thì mới so sánh được vì nếu không cùng loại thì thông số kỹ thuật không thể nào giống nhau để so sánh được. Ví dụ như khi ta xem một phụ kiện khác thì khi bấm vào so sánh thì những thứ có thể so sánh được với phụ kiện khác thì cũng phải là phụ kiện khác thì mới hợp lý.
Để so sánh ta chỉ cần chọn một sản phẩm cùng loại trong danh sách đã liệt kê sẵn ở tab So Sánh Sản Phẩm này. chúng ta sẽ được điều hướng sang trang so sánh sản phẩm:
Chức năng Đưa Sản Phẩm Vào Danh Sách (Giỏ Hàng):
Đây là một chức năng vô cùng quan trọng với trang web bán hàng trực tuyến. Và để đưa một sản phẩm vào những mặt hàng bạn chọn để đặt hàng thì
mỗi sản phẩm sẽ có giá tiền và 1 icon giỏ hàng . Ta chỉ cần bấm vào thì một hộp thông báo sẽ hiện lên báo cho ta biết sản phẩm với tên và giá tiền ta vừa chọn đã được thêm vào danh sách những sản phẩm người dùng lựa chọn:
Ta sẽ nói kỹ hơn về chức năng này ở phần sau.