Merge pull request #235 from hlxsites/agentreview

Fix agent testimonials
hlxsites · May 22, 2024 · b0c7373 · b0c7373
2 parents a73465a + 384101d
commit b0c7373
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 31 deletions.
diff --git a/blocks/carousel/carousel.css → ...agent-testimonials/agent-testimonials.css b/blocks/carousel/carousel.css → ...agent-testimonials/agent-testimonials.css
@@ -1,22 +1,22 @@
-.carousel-container {
+.testimonials-container {
     position: relative;
     width: 100%;
     overflow: hidden;
     border-radius: 10px;
 }
 
-.carousel {
+.testimonials {
     display: flex;
     transition: transform 0.5s ease;
     width: 100%;
 }
 
-.carousel-inner {
+.testimonials-inner {
     display: flex;
     width: 100%;
 }
 
-.carousel-item {
+.testimonials-item {
     min-width: 100%;
     box-sizing: border-box;
     padding: 20px;
@@ -60,7 +60,7 @@
     align-self: center;
 }
 
-.carousel-arrow {
+.testimonials-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -80,7 +80,7 @@
     right: 10px;
 }
 
-.carousel-counter {
+.testimonials-counter {
     position: absolute;
     bottom: 10px;
     right: 10px;

diff --git a/blocks/carousel/carousel.js → .../agent-testimonials/agent-testimonials.js b/blocks/carousel/carousel.js → .../agent-testimonials/agent-testimonials.js
@@ -1,24 +1,26 @@
+import { getMetadata } from '../../scripts/aem.js';
+
 export default function decorate(block) {
   const div = document.createElement('div');
-  div.classList.add('carousel-container');
-  div.innerHTML = `<button class="carousel-arrow left-arrow">&lt;</button>
-    <div class="carousel">
-       <div class="carousel-inner" id="carousel-inner">
+  div.classList.add('testimonials-container');
+  div.innerHTML = `<button class="testimonials-arrow left-arrow">&lt;</button>
+    <div class="testimonials">
+       <div class="testimonials-inner" id="testimonials-inner">
           <!-- Reviews will be injected here by JavaScript -->
        </div>
     </div>
-    <button class="carousel-arrow right-arrow">&gt;</button>
-    <div class="carousel-counter" id="carousel-counter"></div>`;
+    <button class="testimonials-arrow right-arrow">&gt;</button>
+    <div class="testimonials-counter" id="testimonials-counter"></div>`;
   block.append(div);
-  const carouselInner = document.getElementById('carousel-inner');
-  const carouselCounter = document.getElementById('carousel-counter');
+  const testimonialsInner = document.getElementById('testimonials-inner');
+  const testimonialsCounter = document.getElementById('testimonials-counter');
   const leftArrow = document.querySelector('.left-arrow');
   const rightArrow = document.querySelector('.right-arrow');
   let currentIndex = 0;
   let totalReviews = 0;
 
   const updateCounter = () => {
-    carouselCounter.textContent = `${currentIndex + 1} of ${totalReviews}`;
+    testimonialsCounter.textContent = `${currentIndex + 1} of ${totalReviews}`;
   };
 
   const addReadMoreFunctionality = () => {
@@ -50,41 +52,43 @@ export default function decorate(block) {
     });
   };
 
-  fetch('https://api.bridgedataoutput.com/api/v2/OData/reviews/Reviews?access_token=f1484460e98c42240bade7f853c488ed')
+  const externalID = getMetadata('externalid');
+
+  fetch(`https://testimonialtree.com/Widgets/jsonFeed.aspx?widgetid=45133&externalID=${externalID}`)
     .then((response) => response.json())
     .then((data) => {
-      const reviews = data.value.slice(0, 4);
+      const reviews = data.testimonialtreewidget.testimonials.testimonial.slice(0, 4);
       totalReviews = reviews.length;
       reviews.forEach((review) => {
         const reviewElement = document.createElement('div');
-        reviewElement.classList.add('carousel-item');
+        reviewElement.classList.add('testimonials-item');
         reviewElement.innerHTML = `
-           <div class="rating-stars">${'★'.repeat(review.Rating)}</div>
-           <div class="review-text-container">
-              <div class="review-text">
-                   ${review.Description}
-              </div>
-           </div>
-           <div class="reviewer-name">${review.ReviewerScreenName || 'Anonymous'}</div>
-        `;
-        carouselInner.appendChild(reviewElement);
+          <div class="rating-stars">${'★'.repeat(review.rating)}</div>
+          <div class="review-text-container">
+             <div class="review-text">
+                  ${decodeURIComponent(review.testimonial.replace(/\+/g, ' '))}
+             </div>
+          </div>
+          <div class="reviewer-name">${review.signature.replace('+', ' ') || 'Anonymous'}</div>
+       `;
+        testimonialsInner.appendChild(reviewElement);
       });
       addReadMoreFunctionality();
       updateCounter();
     });
 
-  const updateCarousel = () => {
-    carouselInner.style.transform = `translateX(-${currentIndex * 100}%)`;
+  const updatetestimonials = () => {
+    testimonialsInner.style.transform = `translateX(-${currentIndex * 100}%)`;
     updateCounter();
   };
 
   leftArrow.addEventListener('click', () => {
     currentIndex = (currentIndex > 0) ? currentIndex - 1 : totalReviews - 1;
-    updateCarousel();
+    updatetestimonials();
   });
 
   rightArrow.addEventListener('click', () => {
     currentIndex = (currentIndex < totalReviews - 1) ? currentIndex + 1 : 0;
-    updateCarousel();
+    updatetestimonials();
   });
 }