let reviews = []; const url = window.location.href; const productId = getProductId(url); createReviewForm(); function getData() { fetch( `https://agencyapi.alltheapps.io/api/agency_app/reviews?product_id=${productId}` ) .then((response) => response.json()) .then((data) => { //console.log("Reviews:", data); reviews = data.data.reverse(); }) .catch((error) => console.error(error)); } getData(); // This is for Show Reviews and call in getData function appendReviews() { // Array containing review data // const reviews = [ // { // user_name: "Mary Stemm", // rating: 5, // description: // "Everything 😍😍😍 Very professional and kind!!! Took great care of our house like they were working on their own!!! Fantastic job... couldn't be more ...", // }, // { // user_name: "John Doe", // rating: 4, // description: // "Good service overall, but they could improve on timing. Very friendly staff!", // }, // { // user_name: "Jane Smith", // rating: 5, // description: // "Exceptional work! They went above and beyond to ensure everything was perfect.", // }, // { // user_name: "Alice Johnson", // rating: 3, // description: // "Average experience, some aspects were good, others not so much.", // }, // { // user_name: "Bob Brown", // rating: 2, // description: "Not satisfied with the service. It needs improvement.", // }, // ]; let currentPage = 1; const reviewsPerPage = 5; // Function to create and style review elements function createReview(review) { // Create a container for the review const reviewContainer = document.createElement("div"); reviewContainer.style.display = "flex"; reviewContainer.style.flexDirection = "column"; reviewContainer.style.width = "100%"; reviewContainer.style.border = "1px solid #ddd"; reviewContainer.style.borderRadius = "8px"; reviewContainer.style.padding = "16px"; reviewContainer.style.marginBottom = "16px"; reviewContainer.style.boxShadow = "0 2px 8px rgba(0,0,0,0.1)"; reviewContainer.style.boxSizing = "border-box"; reviewContainer.style.backgroundColor = "#f9f9f9"; // Create a container for the reviewer information const reviewerContainer = document.createElement("div"); reviewerContainer.style.display = "flex"; reviewerContainer.style.alignItems = "center"; reviewerContainer.style.marginBottom = "8px"; // Create the profile picture placeholder // const profilePic = document.createElement("div"); // profilePic.style.width = "40px"; // profilePic.style.height = "40px"; // profilePic.style.borderRadius = "50%"; // profilePic.style.backgroundColor = "#ccc"; // profilePic.style.marginRight = "12px"; // Create the reviewer name const reviewerName = document.createElement("div"); reviewerName.style.fontWeight = "bold"; reviewerName.style.fontSize = "20px"; reviewerName.style.marginRight = "12px"; reviewerName.textContent = review.user_name; reviewerName.style.color = "#333"; // Create the star rating const starRating = document.createElement("div"); for (let i = 0; i < 5; i++) { const star = document.createElement("span"); star.textContent = i < review.rating ? "★" : "☆"; star.style.fontSize = "30px"; star.style.color = "#ffa500"; starRating.appendChild(star); } const createData = document.createElement("div"); createData.style.marginLeft = "auto"; createData.style.fontSize = "13px"; const date = new Date(review.created_date); const day = date.getDate(); const month = date.getMonth() + 1; const year = date.getFullYear(); createData.textContent = `${month}/${day}/${year}`; createData.style.color = "#777"; // Create the review text const reviewText = document.createElement("div"); reviewText.style.marginTop = "8px"; reviewText.style.fontSize = "16px"; reviewText.textContent = review.description; reviewText.style.color = "#555"; // Append the elements to their respective containers // reviewerContainer.appendChild(profilePic); reviewerContainer.appendChild(starRating); // reviewerContainer.appendChild(reviewerName); reviewerContainer.appendChild(createData); reviewContainer.appendChild(reviewerContainer); reviewContainer.appendChild(reviewerName); reviewContainer.appendChild(reviewText); // Append the review container to the main div const mainDiv = document.getElementById("main"); mainDiv.appendChild(reviewContainer); } // Function to display reviews with pagination function displayReviews(page) { const start = (page - 1) * reviewsPerPage; const end = page * reviewsPerPage; const paginatedReviews = reviews.slice(start, end); // Clear existing reviews const mainDiv = document.getElementById("main"); mainDiv.innerHTML = ""; // Display paginated reviews paginatedReviews.forEach(createReview); // Update pagination controls updatePaginationControls(page); } // pagination function updatePaginationControls(page) { const totalPages = Math.ceil(reviews.length / reviewsPerPage); const hasNextPage = page < totalPages; const hasPrevPage = page > 1; // Clear existing pagination controls const paginationControls = document.getElementById("pagination-controls"); paginationControls.innerHTML = ""; // Create Previous button const prevButton = document.createElement("button"); prevButton.style.marginRight = "8px"; prevButton.textContent = "Previous"; prevButton.disabled = !hasPrevPage; prevButton.addEventListener("click", () => displayReviews(page - 1)); prevButton.style.padding = "8px 16px"; prevButton.style.border = "none"; prevButton.style.borderRadius = "4px"; prevButton.style.backgroundColor = "#f2f2f2"; prevButton.style.color = "#333"; prevButton.style.fontWeight = "bold"; prevButton.style.cursor = "pointer"; prevButton.style.opacity = hasPrevPage ? "1" : "0.5"; prevButton.addEventListener("mouseenter", () => { prevButton.style.backgroundColor = "#e6e6e6"; }); prevButton.addEventListener("mouseleave", () => { prevButton.style.backgroundColor = "#f2f2f2"; }); paginationControls.appendChild(prevButton); // Create page numbers for (let i = 1; i <= totalPages; i++) { const pageButton = document.createElement("button"); pageButton.style.marginRight = "8px"; pageButton.textContent = i; pageButton.disabled = page === i; pageButton.addEventListener("click", () => displayReviews(i)); pageButton.style.padding = "8px 16px"; pageButton.style.border = "none"; pageButton.style.borderRadius = "4px"; pageButton.style.backgroundColor = page === i ? "#333" : "#f2f2f2"; pageButton.style.color = page === i ? "#fff" : "#333"; pageButton.style.fontWeight = "bold"; pageButton.style.cursor = "pointer"; pageButton.addEventListener("mouseenter", () => { pageButton.style.backgroundColor = page === i ? "#333" : "#e6e6e6"; pageButton.style.color = page === i ? "#fff" : "#333"; }); pageButton.addEventListener("mouseleave", () => { pageButton.style.backgroundColor = page === i ? "#333" : "#f2f2f2"; pageButton.style.color = page === i ? "#fff" : "#333"; }); paginationControls.appendChild(pageButton); } // Create Next button const nextButton = document.createElement("button"); nextButton.textContent = "Next"; nextButton.disabled = !hasNextPage; nextButton.addEventListener("click", () => displayReviews(page + 1)); nextButton.style.padding = "8px 16px"; nextButton.style.border = "none"; nextButton.style.borderRadius = "4px"; nextButton.style.backgroundColor = "#f2f2f2"; nextButton.style.color = "#333"; nextButton.style.fontWeight = "bold"; nextButton.style.cursor = "pointer"; nextButton.style.opacity = hasNextPage ? "1" : "0.5"; nextButton.addEventListener("mouseenter", () => { nextButton.style.backgroundColor = "#e6e6e6"; }); nextButton.addEventListener("mouseleave", () => { nextButton.style.backgroundColor = "#f2f2f2"; }); paginationControls.appendChild(nextButton); } // Create a container for all the reviews const mainDiv = document.createElement("div"); mainDiv.id = "main"; mainDiv.style.display = "flex"; mainDiv.style.flexDirection = "column"; mainDiv.style.alignItems = "center"; mainDiv.style.padding = "16px"; mainDiv.style.boxSizing = "border-box"; document.getElementById("review").appendChild(mainDiv); // Create pagination controls container const paginationControls = document.createElement("div"); paginationControls.id = "pagination-controls"; paginationControls.style.display = "flex"; paginationControls.style.justifyContent = "center"; paginationControls.style.marginTop = "16px"; document.getElementById("review").appendChild(paginationControls); // Display the first page of reviews displayReviews(currentPage); // Function to create and style review form // Call the function to create the review form } // This is for creating Review Form function createReviewForm() { // Create the review form container const reviewFormContainer = document.createElement("div"); reviewFormContainer.style.display = "none"; reviewFormContainer.style.marginTop = "20px"; reviewFormContainer.style.padding = "20px"; reviewFormContainer.style.border = "1px solid #ddd"; reviewFormContainer.style.borderRadius = "8px"; reviewFormContainer.style.boxShadow = "0 2px 8px rgba(0, 0, 0, 0.1)"; reviewFormContainer.style.width = "100%"; reviewFormContainer.style.boxSizing = "border-box"; // Create the close button const closeReviewForm = document.createElement("span"); closeReviewForm.textContent = "×"; closeReviewForm.style.float = "right"; closeReviewForm.style.fontSize = "20px"; closeReviewForm.style.cursor = "pointer"; reviewFormContainer.appendChild(closeReviewForm); // Create the rating question const ratingQuestion = document.createElement("p"); ratingQuestion.textContent = "How would you rate your experience?"; reviewFormContainer.appendChild(ratingQuestion); // Create the rating emojis container const ratingContainer = document.createElement("div"); ratingContainer.style.display = "flex"; ratingContainer.style.justifyContent = "center"; // const emojis = ["😡", "🙁", "😐", "🙂", "😁"]; // emojis.forEach((emoji) => { // const ratingEmoji = document.createElement("span"); // ratingEmoji.textContent = emoji; // ratingEmoji.style.fontSize = "24px"; // ratingEmoji.style.margin = "0 5px"; // ratingEmoji.style.cursor = "pointer"; // ratingContainer.appendChild(ratingEmoji); // }); // reviewFormContainer.appendChild(ratingContainer); // dd // Create the rating stars container var selectedStars = 0; const ratingStarsContainer = document.createElement("div"); ratingStarsContainer.style.display = "flex"; ratingStarsContainer.style.justifyContent = "left"; ratingStarsContainer.style.marginTop = "10px"; reviewFormContainer.appendChild(ratingStarsContainer); // Create an array to store the star elements const stars = []; // Create 5 empty stars for (let i = 0; i < 5; i++) { const star = document.createElement("span"); star.textContent = "☆"; star.style.color = "#f1c40f"; star.style.fontSize = "30px"; star.style.cursor = "pointer"; star.addEventListener("click", () => { // Set all stars to empty stars.forEach((s) => (s.textContent = "☆")); // Set the clicked star and all stars to its left to yellow for (let j = 0; j <= i; j++) { stars[j].textContent = "★"; stars[j].style.color = "#f1c40f"; } // Save the number of selected stars selectedStars = i + 1; //console.log("Selected stars:", selectedStars); // Use the selectedStars variable as needed }); stars.push(star); ratingStarsContainer.appendChild(star); } var emojiContainer = document.createElement("div"); emojiContainer.className = "emoji-container"; reviewFormContainer.appendChild(emojiContainer); emojiContainer.appendChild(ratingStarsContainer); const reviwerName = document.createElement("input"); reviwerName.placeholder = "Please Enter Your Name"; reviwerName.style.width = "100%"; reviwerName.style.marginTop = "10px"; reviwerName.style.boxSizing = "border-box"; reviwerName.type = "text"; reviwerName.style.padding = "10px"; reviwerName.style.border = "1px solid #ddd"; reviwerName.style.borderRadius = "5px"; reviwerName.style.fontFamily = "Arial, sans-serif"; reviewFormContainer.appendChild(reviwerName); // Create the review text area const reviewText = document.createElement("textarea"); reviewText.placeholder = "Please tell us about your experience:"; reviewText.style.width = "100%"; reviewText.style.marginTop = "10px"; reviewText.style.boxSizing = "border-box"; reviewText.rows = "4"; reviewText.style.padding = "10px"; reviewText.style.border = "1px solid #ddd"; reviewText.style.borderRadius = "5px"; reviewText.style.fontFamily = "Arial, sans-serif"; reviewFormContainer.appendChild(reviewText); // Create the email input field const reviewEmail = document.createElement("input"); reviewEmail.type = "email"; reviewEmail.placeholder = "Your email address (optional):"; reviewEmail.style.width = "100%"; reviewEmail.style.marginTop = "10px"; reviewEmail.style.boxSizing = "border-box"; reviewEmail.style.padding = "10px"; reviewEmail.style.border = "1px solid #ddd"; reviewEmail.style.borderRadius = "5px"; reviewEmail.style.fontFamily = "Arial, sans-serif"; reviewFormContainer.appendChild(reviewEmail); // Create the send button const sendBtn = document.createElement("button"); sendBtn.textContent = "Send"; sendBtn.style.padding = "10px 20px"; sendBtn.style.backgroundColor = "#28a745"; sendBtn.style.color = "white"; sendBtn.style.border = "none"; sendBtn.style.borderRadius = "5px"; sendBtn.style.cursor = "pointer"; sendBtn.style.fontSize = "16px"; sendBtn.style.width = "100%"; sendBtn.style.marginTop = "10px"; reviewFormContainer.appendChild(sendBtn); sendBtn.addEventListener("click", () => { var feedback = document.querySelector("textarea").value; var email = document.querySelector("input[type='email']").value; var name = document.querySelector("input[type='text']").value; // //console.log("Feedback:", feedback); // //console.log("Email:", email); // //console.log("Emoji:", emojiSelected); const payload = { description: feedback, email: email, user_name: name, product_id: productId, websiteId: " ", product_name: document.getElementsByClassName( "hl-product-detail-product-name" )[0].textContent, rating: selectedStars, }; //console.log("Data:", payload); //console.log("Product ID:", productId); document.querySelector("textarea").value = ""; document.querySelector("input[type='email']").value = ""; document.querySelector("input[type='text']").value = ""; emojiSelected = ""; fetch("https://agencyapi.alltheapps.io/api/agency_app/reviews", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(payload), }) .then((response) => response.json()) .then((data) => { //console.log("API response:", data); getData(); // Add your logic to handle the API response here }) .catch((error) => { console.error("API error:", error); // Add your error handling logic here }); // document.querySelector(".selected").style.fontSize = "24px"; // Test APi // $.ajax({ // url: "https://3e47ba7c9ecc4298b74c7bd8de2f7a1c.api.mockbin.io/", // method: "POST", // data: JSON.stringify(data), // contentType: "application/json", // success: function (response) { // //console.log("API response:", response); // // Add your logic to handle the API response here // }, // error: function (error) { // console.error("API error:", error); // // Add your error handling logic here // }, // }); }); // Append the review form container to the specified element const reviewDiv = document.getElementById("review"); reviewDiv.appendChild(reviewFormContainer); // Create the write review button const writeReviewBtn = document.createElement("button"); writeReviewBtn.textContent = "Write Review"; writeReviewBtn.style.padding = "10px 20px"; writeReviewBtn.style.backgroundColor = "#28a745"; writeReviewBtn.style.color = "white"; writeReviewBtn.style.border = "none"; writeReviewBtn.style.borderRadius = "5px"; writeReviewBtn.style.cursor = "pointer"; writeReviewBtn.style.fontSize = "16px"; writeReviewBtn.style.marginTop = "10px"; writeReviewBtn.style.display = "block"; writeReviewBtn.style.marginLeft = "auto"; writeReviewBtn.style.marginRight = "auto"; reviewDiv.appendChild(writeReviewBtn); // Add event listeners writeReviewBtn.addEventListener("click", () => { reviewFormContainer.style.display = "block"; writeReviewBtn.style.display = "none"; }); closeReviewForm.addEventListener("click", () => { reviewFormContainer.style.display = "none"; writeReviewBtn.style.display = "block"; }); } // this will split the product id from the url function getProductId(url) { // Split the URL by '?' to isolate the part before query parameters const [baseUrl] = url.split("?"); // Split the baseUrl by '/' and store the parts in an array const parts = baseUrl.split("/"); // Find the index of 'product' in the array and get the next element, which is the product ID const productIndex = parts.indexOf("product"); if (productIndex !== -1 && productIndex + 1 < parts.length) { return parts[productIndex + 1]; } // Return null if 'product' is not found or there is no product ID after 'product' return null; } // show Average function showAverage() { //console.log("workign:"); const div = document.createElement("div"); div.id = "rating"; const averageRating = calculateAverageRating(reviews); const starRating = document.createElement("div"); starRating.className = "star-rating"; starRating.style.display = "flex"; starRating.style.alignItems = "center"; starRating.style.marginTop = "10px"; div.appendChild(starRating); // Create the filled stars for (let i = 0; i < averageRating; i++) { const filledStar = document.createElement("span"); filledStar.textContent = "★"; filledStar.style.color = "#f1c40f"; filledStar.style.fontSize = "30px"; starRating.appendChild(filledStar); } // Create the empty stars for (let i = averageRating; i < 5; i++) { const emptyStar = document.createElement("span"); emptyStar.textContent = "☆"; emptyStar.style.color = "#f1c40f"; emptyStar.style.fontSize = "30px"; starRating.appendChild(emptyStar); } // Create the "hlo" text const totalReviews = document.createElement("span"); totalReviews.textContent = ` (${reviews.length} + reviews)`; totalReviews.style.marginLeft = "10px"; totalReviews.style.fontSize = "14px"; totalReviews.style.cursor = "pointer"; totalReviews.style.textDecoration = "underline"; starRating.appendChild(totalReviews); totalReviews.addEventListener("mouseover", () => { totalReviews.style.textDecoration = "underline"; }); totalReviews.addEventListener("mouseout", () => { totalReviews.style.textDecoration = "none"; }); // Add click event listener to scroll to review section totalReviews.addEventListener("click", () => { const reviewSection = document.getElementById("review"); reviewSection.scrollIntoView({ behavior: "smooth" }); }); // div.innerText = averageRating; function calculateAverageRating(reviews) { let totalRating = 0; for (let i = 0; i < reviews.length; i++) { // totalRating += reviews[i].rating; totalRating += parseInt(reviews[i].rating); } const averageRating = totalRating / reviews.length; //console.log("Average Rating:", averageRating); return `${Math.ceil(averageRating.toFixed(1))}`; } const findButton = setInterval(function () { if (document.getElementById("add-to-cart-btn")) { const addToCartBtn = document.getElementById("add-to-cart-btn"); if (document.getElementById("rating")) { document.getElementById("rating").remove(); addToCartBtn.parentNode.insertBefore(div, addToCartBtn); } else { addToCartBtn.parentNode.insertBefore(div, addToCartBtn); } clearInterval(findButton); } }, 1000); }