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 = "&#9733;"; // 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 = "&#9733;"; // 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>