Các màu đánh giá ngôi sao ứng dụng

ĐÁNH GIÁ SẢN PHẨM (Đánh giá sao – để lại bình luận sản phẩm) là ứng dụng cần thiết cho một website bán hàng. Ứng dụng sẽ giúp:

– Gia tăng sự tương tác với khách hàng từ tính năng tạo kênh đánh giá sản phẩm.

– Với các đánh giá của các khách hàng trước cho sản phẩm cụ thể sẽ kích thích nhu cầu hay quyết định mua hàng của khách hàng sau.

– Cho phép dễ dàng lọc đánh giá, bình luận tốt.

Ứng dụng không có sẵn trên các gói Web30s mà cần được đăng ký để sử dụng. Nhà bán hàng vui lòng đăng ký ứng dụng tại: https://web30s.vn/Danh-gia-san-pham-1715

Chi phí: 50,000 VNĐ / 1 Tháng

Hoặc Nhà bán hàng liên hệ nhân viên kinh doanh để được hỗ trợ tư vấn và đăng ký ứng dụng.

Cách tính sao: Số sao trên sản phẩm được tính theo trung bình sao của các lượt đánh giá trên một sản phẩm.

2. Kích hoạt ứng dụng Đánh giá sản phẩm

Sau khi đăng ký thành công ứng dụng Đánh giá sản phẩm, giao diện website sẽ xuất hiện các thông tin:

  • Biểu tượng các ngôi sao trên danh sách các sản phẩm: đây là số sao thực tế từ người mua hàng/thành viên website đã mua hàng đánh giá cho sản phẩm.
  • Dữ liệu đánh giá, biểu mẫu đánh giá sao/bình luận sản phẩm sẽ xuất hiện trong trang chi tiết của sản phẩm.

* Các giao diện tùy chỉnh / giao diện gốc chưa thể hiện Đánh giá sản phẩm, Nhà bán hàng vui liên hệ kỹ thuật để được hỗ trợ.

Một số hình ảnh ứng dụng Đánh giá sản phẩm:

Dữ liệu đánh giá sao trên các sản phẩm

Biểu mẫu đánh giá sản phẩm

Bình luận và đánh giá sản phẩm

3. Quản lý ứng dụng Đánh giá sản phẩm

Nhà bán hàng có thể quản lý các đánh giá sản phẩm bằng cách truy cập trang quản trị website >> menu Đánh giá sản phẩm. Nhà bán hàng sẽ xem được danh đánh giá từ người vào website/thành viên của website.

Từ danh sách này, ở cột Tác vụ – Nhà bán hàng nhấn chọn vào icon hình con mắt để duyệt đánh giá, nhấn vào nút thùng rác để xóa đánh giá.

Trạng thái duyệt tin có 3 trạng thái:

  • Mới: Trạng thái cho biết đánh giá vừa được gửi và Nhà bán hàng chưa duyệt đánh giá.
  • Đã duyệt: Đánh giá được duyệt và nội dung được thể hiện lên tương ứng sản phẩm được đánh giá.
  • Không duyệt: Đánh giá không phù hợp, không được Nhà bán hàng cho xuất hiện trên sản phẩm.

Tại trang danh sách đánh giá, nhà bán hàng có thể thao tác xóa hàng loạt đánh giá cùng lúc bằng cách chọn nhiều đánh giá hoặc chọn vào cột có ô lựa chọn đánh giá để có thể xóa một lần nhiều đánh giá.

Xóa một đánh giá:

Xóa nhiều đánh giá:

Sau các thao tác trên, dữ liệu đánh giá sản phẩm sẽ hiển thị trên website của Nhà bán hàng như ảnh minh họa:

Đánh giá sao trên danh sách sản phẩm

Đánh giá sao trên chi tiết của một sản phẩm

Danh sách các bình luận và đánh giá của sản phẩm

Như vậy, P.A Việt Nam vừa hướng dẫn Nhà bán hàng thiết lập ứng dụng ĐÁNH GIÁ SẢN PHẨM.

Mọi thắc mắc Nhà bán hàng có thể liên hệ tổng đài hỗ trợ kỹ thuật 1900 9477 – nhánh 2 để được hỗ trợ giải đáp.

Xin chào cộng đồng Anonystick! Đây là bài viết đầu tiên của mình ở anonystick.com, có gì sai sót mong nhận được góp ý từ các bạn.

Hôm nay vô tình có task trong trong dự án liên quan đến đánh giá xếp hạng. Mình tham khảo qua thì thấy star rating (đánh giá dùng biểu tượng ngôi sao) được dùng khá phổ biến. Trước đây chắc chắn quen thuộc nhất là hệ thống đánh giá nhà hàng và khách sạn với năm sao là chất lượng cao nhất.

Khalachackeo là có sẵn nhiều plugin, library hỗ trợ sẵn để các bạn làm việc này, nhưng hôm nay với tiêu chí "HẠN CHẾ TỐI DÙNG THƯ VIỆN NGOÀI" nên trong project và cũng trong tut này mình sẽ hướng dẫn các bạn làm star rating thuần bằng html, css.

Đầu tiên để làm 1 ngôi sao riêng lẽ mình sẽ dùng 2 thẻ:

+ input[type="radio"] để chứa value người dùng chọn. Lưu ý là các ngôi sao phải cùng name mục đích đảm bảo mỗi lần rating chỉ chọn duy nhất.

+ label để làm chỗ cho icon star và làm GUI cho input[type="radio"]

Lưu ý: chúng ta phải viết css theo thứ tự 5-1 thay vì 1-5, mình sẽ làm rõ hơn về chi tiết ở phần sau.

Các bạn có thể xem DEMO tại đây: SEE DEMO

I. HTML

I.a. HTML 5 level

<div id="rating">     <input type="radio" id="star5" name="rating" value="5" />     <label class = "full" for="star5" title="Awesome - 5 stars"></label>     <input type="radio" id="star4" name="rating" value="4" />     <label class = "full" for="star4" title="Pretty good - 4 stars"></label>     <input type="radio" id="star3" name="rating" value="3" />     <label class = "full" for="star3" title="Meh - 3 stars"></label>     <input type="radio" id="star2" name="rating" value="2" />     <label class = "full" for="star2" title="Kinda bad - 2 stars"></label>     <input type="radio" id="star1" name="rating" value="1" />     <label class = "full" for="star1" title="Sucks big time - 1 star"></label> </div>

Bên trên là phần html cho phép đánh giá đơn giản chỉ 5 mức: 1-5, nếu các bạn muốn cho phép rating 10 mức: từ 0.5-5 thì chỉ việc thêm vào các group half xen kẽ với 5 group có sẵn là xong.

<div id="rating">     <input type="radio" id="star5" name="rating" value="5" />     <label class = "full" for="star5" title="Awesome - 5 stars"></label>     <input type="radio" id="star4half" name="rating" value="4 and a half" />     <label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>     <input type="radio" id="star4" name="rating" value="4" />     <label class = "full" for="star4" title="Pretty good - 4 stars"></label>     <input type="radio" id="star3half" name="rating" value="3 and a half" />     <label class="half" for="star3half" title="Meh - 3.5 stars"></label>     <input type="radio" id="star3" name="rating" value="3" />     <label class = "full" for="star3" title="Meh - 3 stars"></label>     <input type="radio" id="star2half" name="rating" value="2 and a half" />     <label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>     <input type="radio" id="star2" name="rating" value="2" />     <label class = "full" for="star2" title="Kinda bad - 2 stars"></label>     <input type="radio" id="star1half" name="rating" value="1 and a half" />     <label class="half" for="star1half" title="Meh - 1.5 stars"></label>     <input type="radio" id="star1" name="rating" value="1" />     <label class = "full" for="star1" title="Sucks big time - 1 star"></label>     <input type="radio" id="starhalf" name="rating" value="half" />     <label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label> </div>

Xong phần `html`, đến phần theo mình là quan trọng nhất trong tut, `CSS` để các bạn dễ dàng bám sát mình sẽ thêm trực tiếp comment vào những đoạn css quan trọng. Trước tiên cho dễ hình dung mình sẽ nói sơ về kỹ thuật css trong tut này, mình có dùng 2 selector css hơi lạ có thể các bạn không thường thấy:

+ Next siblings (dùng dấu +): secletor này sẽ giúp chúng ta lấy 1 thẻ tiếp theo ngay sau thẻ được chọn. Để hiểu rõ về next siblings các bạn có thể tham khảo thêm ở đây

+ All next siblings (dùng dấu ~): selector này có thể xem là mở rộng của next siblings, giúp chúng ta lấy tất cả thẻ cùng cấp được chỉ định tiếp theo thẻ được chọn. Thông tin thêm của All next siblings các bạn tham khảo ở đây

CSS hoàn toàn không có selector cho previous siblings, đây cũng là lý do để chúng ta lật ngược lại html như mình đã đề cập ở trên.