Fix agent testimonials

hlxsites · May 27, 2024 · 110bebc · 110bebc
1 parent b8783d3
commit 110bebc
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 31 deletions.
diff --git a/blocks/agent-testimonials/agent-testimonials.css b/blocks/agent-testimonials/agent-testimonials.css
@@ -1,22 +1,22 @@
-.testimonials-container {
+.agent-testimonials.block {
     position: relative;
     width: 100%;
     overflow: hidden;
     border-radius: 10px;
 }
 
-.testimonials {
+.agent-testimonials.block .testimonials {
     display: flex;
     transition: transform 0.5s ease;
     width: 100%;
 }
 
-.testimonials-inner {
+.agent-testimonials.block .testimonials-inner {
     display: flex;
     width: 100%;
 }
 
-.testimonials-item {
+.agent-testimonials.block .testimonials-item {
     min-width: 100%;
     box-sizing: border-box;
     padding: 20px;
@@ -27,40 +27,40 @@
     position: relative;
 }
 
-.rating-stars {
+.agent-testimonials.block .rating-stars {
     color: var(--primary-color);
     margin-bottom: 10px;
     font-size: 25px;
     margin-left: 50px;
 }
 
-.review-text.full {
+.agent-testimonials.block .review-text.full {
     max-height: none;
     font-size: 26px;
 }
 
-.review-text {
+.agent-testimonials.block .review-text {
     font-size: 26px;
     margin-bottom: 20px;
     padding-left: 50px;
     padding-right: 50px;
 }
 
-.read-more {
+.agent-testimonials.block .read-more {
     font-size: 14px;
     color: #607C8C;
     cursor: pointer;
     display: inline-block;
 
 }
 
-.reviewer-name {
+.agent-testimonials.block .reviewer-name {
     font-weight: bold;
     margin-bottom: 10px;
     align-self: center;
 }
 
-.testimonials-arrow {
+.agent-testimonials.block .testimonials-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -72,23 +72,23 @@
     cursor: pointer;
 }
 
-.left-arrow {
+.agent-testimonials.block .left-arrow {
     left: 10px;
 }
 
-.right-arrow {
+.agent-testimonials.block .right-arrow {
     right: 10px;
 }
 
-.testimonials-counter {
+.agent-testimonials.block .testimonials-counter {
     position: absolute;
     bottom: 10px;
     right: 10px;
     font-size: 16px;
     color: #333;
 }
 
-.remaining-text {
+.agent-testimonials.block .remaining-text {
     font: inherit;
     font-size: 26px;
 }
diff --git a/blocks/agent-testimonials/agent-testimonials.js b/blocks/agent-testimonials/agent-testimonials.js
@@ -1,24 +1,16 @@
 import { getMetadata } from '../../scripts/aem.js';
+import { button, div } from '../../scripts/dom-helpers.js';
 
 export default function decorate(block) {
-  const div = document.createElement('div');
-  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="testimonials-arrow right-arrow">&gt;</button>
-    <div class="testimonials-counter" id="testimonials-counter"></div>`;
-  block.append(div);
-  const testimonialsInner = document.getElementById('testimonials-inner');
-  const testimonialsCounter = document.getElementById('testimonials-counter');
-  const leftArrow = document.querySelector('.left-arrow');
-  const rightArrow = document.querySelector('.right-arrow');
+  const leftArrow = button({ class: 'testimonials-arrow left-arrow' }, '<');
+  const testimonialsInner = div({ class: 'testimonials-inner' });
+  const testimonialsWrapper = div({ class: 'testimonials' }, testimonialsInner);
+  const rightArrow = button({ class: 'testimonials-arrow right-arrow' }, '>');
+  const testimonialsCounter = div({ class: 'testimonials-counter' });
+  block.append(leftArrow, testimonialsWrapper, rightArrow, testimonialsCounter);
+
   let currentIndex = 0;
   let totalReviews = 0;
-
   const updateCounter = () => {
     testimonialsCounter.textContent = `${currentIndex + 1} of ${totalReviews}`;
   };
@@ -53,7 +45,6 @@ export default function decorate(block) {
   };
 
   const externalID = getMetadata('externalid');
-
   fetch(`https://testimonialtree.com/Widgets/jsonFeed.aspx?widgetid=45133&externalID=${externalID}`)
     .then((response) => response.json())
     .then((data) => {