diff --git a/blocks/agent-testimonials/agent-testimonials.css b/blocks/agent-testimonials/agent-testimonials.css index 781def19..7da5fa4f 100644 --- 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,26 +27,26 @@ 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; @@ -54,13 +54,13 @@ } -.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,15 +72,15 @@ 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; @@ -88,7 +88,7 @@ color: #333; } -.remaining-text { +.agent-testimonials.block .remaining-text { font: inherit; font-size: 26px; } \ No newline at end of file diff --git a/blocks/agent-testimonials/agent-testimonials.js b/blocks/agent-testimonials/agent-testimonials.js index 3f3a11c7..598cb7eb 100644 --- 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 = ` -
-
- -
-
- -
`; - 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) => {