Reviews
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://kit.fontawesome.com/ab44e92a09.js" crossorigin="anonymous"></script>
</head>
<style>
#product-reviews-widget {
border: 1px solid #eaeaea;
background-color: #f9f9f9;
padding: 20px;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
}
#review-summary {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
#total-reviews {
font-weight: bold;
font-size: 18px;
}
.star-rating {
display: inline-block;
color: #ffd700;
/* Màu vàng */
font-size: 20px;
}
#star-ratings select {
padding: 5px;
}
#review-filter {
display: flex;
align-items: center;
}
#review-filter label {
margin-right: 5px;
}
#filter-select {
padding: 5px;
}
#review-container {
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.review-item {
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
margin-bottom: 15px;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
}
@media (min-width: 576px) {
.review-item {
width: calc(50% - 10px);
}
}
@media (min-width: 768px) {
.review-item {
width: calc(33.33% - 10px);
}
}
.review-item:hover {
border-color: #888;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.review-item .author {
font-weight: bold;
margin-bottom: 5px;
}
.review-item .rating {
margin-bottom: 5px;
}
.review-item .rating img {
width: 20px;
vertical-align: middle;
}
.review-item .date {
font-style: italic;
font-size: 12px;
color: #888;
margin-bottom: 5px;
}
.review-item .content {
font-size: 14px;
line-height: 1.4;
}
#load-more-button {
display: block;
margin: 0 auto;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s ease;
}
#load-more-button:hover {
background-color: #0056b3;
}
.review-item img {
max-width: 100%;
height: 500px;
}
</style>
<body>
<div id="product-reviews-widget">
<div id="review-summary">
<div id="total-reviews">
<span id="star-rating-total"></span>
<span id="total-reviews-count"></span>
</div>
<div id="star-ratings"></div>
<div id="review-filter">
<label for="filter-select">Filter by:</label>
<select id="filter-select">
<option value="all">All Reviews</option>
<option value="featured">Featured</option>
<option value="newest">Newest</option>
<option value="highest">Highest Ratings</option>
<option value="lowest">Lowest Ratings</option>
</select>
</div>
</div>
<div id="review-container"></div>
<button id="load-more-button">Load More</button>
</div>
</body>
<script>
// Sample data for reviews (you can replace it with your own data)
var reviews = [
{
author: "John",
date: "2023-07-12",
rating: 5,
content: "Great product! I'm very satisfied with my purchase.",
imageUrl: "123.jpg",
productUrl: "https://your-shopify-store.com/products/product-1",
featured: true
},
{
author: "Sarah",
date: "2023-07-10",
rating: 4,
content: "The product quality is excellent. Highly recommended.",
imageUrl: "456.jpg",
productUrl: "https://your-shopify-store.com/products/product-2",
featured: false
},
{
author: "John",
date: "2023-07-12",
rating: 5,
content: "Great product! I'm very satisfied with my purchase.",
imageUrl: "789.jpg",
productUrl: "https://your-shopify-store.com/products/product-1",
featured: true
},
{
author: "Sarah",
date: "2023-07-10",
rating: 4,
content: "The product quality is excellent. Highly recommended.",
imageUrl: "path/to/image2.jpg",
productUrl: "https://your-shopify-store.com/products/product-2",
featured: false
},
{
author: "John",
date: "2023-07-12",
rating: 5,
content: "Great product! I'm very satisfied with my purchase.",
imageUrl: "path/to/image1.jpg",
productUrl: "https://your-shopify-store.com/products/product-1",
featured: true
},
{
author: "Sarah",
date: "2023-07-10",
rating: 4,
content: "The product quality is excellent. Highly recommended.",
imageUrl: "path/to/image2.jpg",
productUrl: "https://your-shopify-store.com/products/product-2",
featured: false
},
{
author: "John",
date: "2023-07-12",
rating: 5,
content: "Great product! I'm very satisfied with my purchase.",
imageUrl: "path/to/image1.jpg",
productUrl: "https://your-shopify-store.com/products/product-1",
featured: true
},
{
author: "Sarah",
date: "2023-07-10",
rating: 4,
content: "The product quality is excellent. Highly recommended.",
imageUrl: "path/to/image2.jpg",
productUrl: "https://your-shopify-store.com/products/product-2",
featured: false
},
{
author: "John",
date: "2023-07-12",
rating: 5,
content: "Great product! I'm very satisfied with my purchase.",
imageUrl: "path/to/image1.jpg",
productUrl: "https://your-shopify-store.com/products/product-1",
featured: true
},
{
author: "Sarah",
date: "2023-07-10",
rating: 4,
content: "The product quality is excellent. Highly recommended.",
imageUrl: "path/to/image2.jpg",
productUrl: "https://your-shopify-store.com/products/product-2",
featured: false
},
{
author: "John",
date: "2023-07-12",
rating: 5,
content: "Great product! I'm very satisfied with my purchase.",
imageUrl: "path/to/image1.jpg",
productUrl: "https://your-shopify-store.com/products/product-1",
featured: true
},
{
author: "Sarah",
date: "2023-07-10",
rating: 4,
content: "The product quality is excellent. Highly recommended.",
imageUrl: "path/to/image2.jpg",
productUrl: "https://your-shopify-store.com/products/product-2",
featured: false
},
{
author: "John",
date: "2023-07-12",
rating: 5,
content: "Great product! I'm very satisfied with my purchase.",
imageUrl: "path/to/image1.jpg",
productUrl: "https://your-shopify-store.com/products/product-1",
featured: true
},
{
author: "Sarah",
date: "2023-07-10",
rating: 4,
content: "The product quality is excellent. Highly recommended.",
imageUrl: "path/to/image2.jpg",
productUrl: "https://your-shopify-store.com/products/product-2",
featured: false
},
{
author: "Sarah",
date: "2023-07-10",
rating: 1,
content: "The product quality is excellent. Highly recommended.",
imageUrl: "path/to/image2.jpg",
productUrl: "https://your-shopify-store.com/products/product-2",
featured: false
},
// ...
];
// Function to render a single review item
function renderReviewItem(review) {
var reviewItem = document.createElement("div");
reviewItem.classList.add("review-item");
var authorElement = document.createElement("div");
authorElement.classList.add("author");
authorElement.textContent = review.author;
var ratingElement = document.createElement("div");
ratingElement.classList.add("rating");
for (var i = 0; i < review.rating; i++) {
var starIcon = document.createElement("span");
starIcon.classList.add("star-rating");
starIcon.innerHTML = "★"; // Golden star icon
ratingElement.appendChild(starIcon);
}
var dateElement = document.createElement("div");
dateElement.classList.add("date");
dateElement.textContent = review.date;
var contentElement = document.createElement("div");
contentElement.classList.add("content");
contentElement.textContent = review.content;
var imageElement = document.createElement("img");
imageElement.src = review.imageUrl;
imageElement.alt = "Review Image";
reviewItem.appendChild(authorElement);
reviewItem.appendChild(ratingElement);
reviewItem.appendChild(dateElement);
reviewItem.appendChild(contentElement);
reviewItem.appendChild(imageElement);
reviewItem.addEventListener("click", function () {
window.location.href = review.productUrl;
});
return reviewItem;
}
// Function to render the reviews
function renderReviews(reviews, startIndex, endIndex) {
var reviewContainer = document.getElementById("review-container");
for (var i = startIndex; i < endIndex; i++) {
if (reviews[i]) {
var reviewItem = renderReviewItem(reviews[i]);
reviewContainer.appendChild(reviewItem);
}
}
if (endIndex >= reviews.length) {
loadMoreButton.style.display = "none";
}
}
// Load more reviews
function loadMoreReviews() {
var visibleReviews = document.getElementsByClassName("review-item");
var lastVisibleReviewIndex = visibleReviews.length - 1;
var nextReviewIndex = lastVisibleReviewIndex + 1;
if (nextReviewIndex < reviews.length) {
var reviewContainer = document.getElementById("review-container");
for (var i = nextReviewIndex; i < nextReviewIndex + reviewsPerPage; i++) {
if (reviews[i]) {
var reviewItem = renderReviewItem(reviews[i]);
reviewContainer.appendChild(reviewItem);
}
}
var newVisibleReviews = document.getElementsByClassName("review-item");
if (newVisibleReviews.length === reviews.length) {
loadMoreButton.style.display = "none";
}
} else {
loadMoreButton.style.display = "none";
}
}
// Update total reviews
function updateTotalReviews() {
var totalReviewsElement = document.getElementById("total-reviews");
var totalReviewsCountElement = document.getElementById("total-reviews-count");
var totalReviews = reviews.length;
var starRatingTotalElement = document.getElementById("star-rating-total");
starRatingTotalElement.innerHTML = "";
for (var i = 0; i < 5; i++) {
var starIcon = document.createElement("span");
starIcon.classList.add("star-rating");
starIcon.innerHTML = "★"; // Golden star icon
starRatingTotalElement.appendChild(starIcon);
}
totalReviewsCountElement.textContent = totalReviews + " Reviews";
totalReviewsElement.textContent = "";
totalReviewsElement.appendChild(starRatingTotalElement);
totalReviewsElement.appendChild(totalReviewsCountElement);
}
// Update star ratings
function updateStarRatings() {
var starRatingsElement = document.getElementById("star-ratings");
var starRatingsHTML = "";
var ratingCounts = {
5: 0,
4: 0,
3: 0,
2: 0,
1: 0
};
for (var i = 0; i < reviews.length; i++) {
var rating = reviews[i].rating;
ratingCounts[rating]++;
}
for (var rating in ratingCounts) {
if (ratingCounts.hasOwnProperty(rating)) {
starRatingsHTML += "<option value='" + rating + "'>" + rating + " Stars (" + ratingCounts[rating] + ")</option>";
}
}
starRatingsElement.innerHTML = "<label for='star-filter-select'>Filter by Rating:</label><select id='star-filter-select'>" + starRatingsHTML + "</select>";
var starFilterSelect = document.getElementById("star-filter-select");
starFilterSelect.addEventListener("change", filterReviews);
}
// Filter reviews
function filterReviews() {
var filterSelect = document.getElementById("filter-select");
var selectedFilter = filterSelect.value;
var filteredReviews = [];
switch (selectedFilter) {
case "all":
filteredReviews = reviews;
break;
case "featured":
filteredReviews = reviews.filter(function (review) {
return review.featured === true;
});
break;
case "newest":
filteredReviews = reviews.slice().reverse();
break;
case "highest":
filteredReviews = reviews.slice().sort(function (a, b) {
return b.rating - a.rating;
});
break;
case "lowest":
filteredReviews = reviews.slice().sort(function (a, b) {
return a.rating - b.rating;
});
break;
default:
filteredReviews = reviews;
break;
}
var reviewContainer = document.getElementById("review-container");
reviewContainer.innerHTML = "";
renderReviews(filteredReviews, 0, reviewsPerPage);
}
// Constants for pagination
var reviewsPerPage = 9;
// Call the renderReviews function with the sample data
renderReviews(reviews, 0, reviewsPerPage);
// Update total reviews
updateTotalReviews();
// Update star ratings
updateStarRatings();
// Load more button event listener
var loadMoreButton = document.getElementById("load-more-button");
loadMoreButton.addEventListener("click", loadMoreReviews);
// Filter select event listener
var filterSelect = document.getElementById("filter-select");
filterSelect.addEventListener("change", filterReviews);
</script>
</html>