Merge pull request #528 from hlxsites/carousel-converter-structure-ch…

…ange Carousel converter structure change
hlxsites · Dec 1, 2023 · e13861f · e13861f
2 parents 50f3677 + 2401213
commit e13861f
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 15 deletions.
diff --git a/tools/actions/convert/test/fixtures/product1-converted.html b/tools/actions/convert/test/fixtures/product1-converted.html
@@ -1,4 +1,3 @@
-
 <html>
 <body>
   <header></header>
@@ -17,28 +16,32 @@
       <div class="carousel">
         <div>
           <div>
-            <img src="https://author-p93411-e849602.adobeaemcloud.com/content/dam/danaher/backgrounds/carousel/closeup-scientist-marking.jpg" alt="closeup">
-          </div>
-          <div>
-            <p>We see a way to save over 14,000 hours.</p>
+            <h2>We see a way to save over 14,000 hours.</h2>
             <p>Manual data handling time per year in a Cell Line Development Department.</p>
             <p><a href="/us/en/expert.html">Talk to an Expert</a></p>
           </div>
           <div>
-            <img src="https://author-p93411-e849602.adobeaemcloud.com/content/dam/danaher/backgrounds/carousel/futuristic-lab-tech-data.jpg" alt="futuristic">
+            <img src="https://author-p93411-e849602.adobeaemcloud.com/content/dam/danaher/backgrounds/carousel/closeup-scientist-marking.jpg" alt="closeup">
           </div>
+        </div>
+        <div>
           <div>
-            <p>We see a way to identify high producing cell lines in 15 minutes</p>
+            <h2>We see a way to identify high producing cell lines in 15 minutes</h2>
             <p><a href="/us/en/about-us.html">Talk to an Expert</a></p>
           </div>
           <div>
-            <img src="https://author-p93411-e849602.adobeaemcloud.com/content/dam/danaher/backgrounds/carousel/group-of-people-problemsolving-together.jpg" alt="group-of-people">
+            <img src="https://author-p93411-e849602.adobeaemcloud.com/content/dam/danaher/backgrounds/carousel/futuristic-lab-tech-data.jpg" alt="futuristic">
           </div>
+        </div>
+        <div>
           <div>
-            <p>We see a way to access multidimensional data in minutes instead of weeks</p>
+            <h2>We see a way to access multidimensional data in minutes instead of weeks</h2>
             <p>The Intabio ZT system couples icIEF separation and UV detection with high resolution mass spectrometry on the ZenoTOF 7600 system.</p>
             <p><a href="#request-quote">Request a Quote</a></p>
           </div>
+          <div>
+            <img src="https://author-p93411-e849602.adobeaemcloud.com/content/dam/danaher/backgrounds/carousel/group-of-people-problemsolving-together.jpg" alt="group-of-people">
+          </div>
         </div>
       </div>
       <div class="product-category-list">

diff --git a/tools/importer/transformers/carousel.js b/tools/importer/transformers/carousel.js
@@ -3,13 +3,12 @@ const createCarousel = (main, document) => {
   const carousel = main.querySelector('home-carousel');
   if (carousel) {
     const cells = [];
-    const carousels = [];
     // eslint-disable-next-line no-undef
     const carouselLists = JSON.parse(decodeHtmlEntities(carousel.getAttribute('slidedata')));
     cells.push(['carousel']);
-    [...carouselLists].forEach((list) => {
+    const carousels = carouselLists.map((list) => {
       const rightDiv = document.createElement('div');
-      const title = document.createElement('p');
+      const title = document.createElement('h2');
       title.innerHTML = list.title;
       if (list.title) rightDiv.append(title);
       const description = document.createElement('p');
@@ -48,10 +47,9 @@ const createCarousel = (main, document) => {
         img.setAttribute('alt', 'Danaher Corporation');
       }
       leftDiv.append(img);
-
-      carousels.push(leftDiv, rightDiv);
+      return [rightDiv, leftDiv];
     });
-    cells.push(carousels);
+    cells.push(...carousels);
     const block = WebImporter.DOMUtils.createTable(cells, document);
     carousel.append(block);
   }