Merge pull request #683 from hlxsites/679-ui-bundle-product-detail-tab

679 UI for bundle product parts tab
hlxsites · Jan 22, 2024 · 6f177da · 6f177da
2 parents fa82602 + 654b39e
commit 6f177da
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 16 deletions.
diff --git a/blocks/product-hero/product-hero.css b/blocks/product-hero/product-hero.css
@@ -19,7 +19,7 @@
 }
 
 .product-hero .hero-default-content > div {
-    @apply w-full h-full text-center md:text-left;
+    @apply w-full h-full text-left;
 }
 
 .product-hero .hero-default-content > div .category-name {

diff --git a/blocks/product-hero/product-hero.js b/blocks/product-hero/product-hero.js
@@ -101,9 +101,9 @@ function addBundleDetails(title, bundleDetails) {
           class: 'flex py-3 px-4 rounded-full bg-white items-center text-gray-700 leading-4 font-medium relative shadow-sm -mt-[21px] text-sm',
           onclick: (e) => {
             e.preventDefault();
-            const productsTab = document.querySelector('[data-tabid="products"]');
+            const productsTab = document.querySelector('[data-tabid="product-details"]');
             if (productsTab) productsTab.scrollIntoView({ behavior: 'smooth' });
-            window.location.hash = 'products';
+            window.location.hash = 'product-details';
           },
         },
         span({ class: 'w-4 h-4 text-gray-400' }, '+'),
@@ -118,6 +118,7 @@ function addBundleDetails(title, bundleDetails) {
 export default async function decorate(block) {
   const response = getProductResponse();
   if (response?.length > 0) {
+    document.title = response[0].Title ? response[0].Title : 'Danaher Product';
     const allImages = response[0]?.raw.images;
     const verticalImageGallery = imageSlider(allImages);
     const defaultContent = div();
@@ -127,7 +128,7 @@ export default async function decorate(block) {
     const rfqEl = block.querySelector('div')?.firstElementChild;
     if (rfqEl && rfqEl.textContent && rfqEl.textContent === 'Request for Quote') {
       rfqEl.classList.add(...'btn-outline-trending-brand text-lg rounded-full px-4 py-2 !no-underline'.split(' '));
-      const rfqParent = p({ class: 'show-modal-btn w-[36%] pt-6 cursor-pointer' }, rfqEl);
+      const rfqParent = p({ class: 'show-modal-btn lg:w-[36%] pt-6 cursor-pointer' }, rfqEl);
       defaultContent.append(rfqParent);
     }
 

diff --git a/blocks/product-parts/product-parts.js b/blocks/product-parts/product-parts.js
@@ -0,0 +1,53 @@
+import {
+  div, img, p,
+} from '../../scripts/dom-builder.js';
+import { getProductResponse } from '../../scripts/scripts.js';
+
+export default async function decorate(block) {
+  const response = getProductResponse();
+  if (response?.length > 0) {
+    try {
+      block.append(div(
+        { class: 'grid grid-cols-12 text-base font-bold text-black gap-y-4 pb-2 border-b' },
+        div(
+          { class: 'col-span-8 lg:col-span-10' },
+          p({ class: 'text-base font-bold leading-6' }, 'Products'),
+        ),
+        div(
+          { class: 'col-span-4 md:col-span-2 lg:col-span-1 flex justify-center' },
+          p({ class: 'text-base font-bold leading-6' }, 'QTY'),
+        ),
+        div(
+          { class: 'hidden md:flex justify-center col-span-2 lg:col-span-1' },
+          p({ class: 'text-base font-bold leading-6' }, 'Details'),
+        ),
+      ));
+      const bundleDetails = JSON.parse(response[0].raw?.bundlepreviewjson);
+      bundleDetails.forEach((product) => {
+        block.append(div(
+          { class: 'grid grid-cols-12 text-sm text-black gap-y-4 border-b' },
+          div(
+            { class: 'flex flex-row col-span-8 lg:col-span-10 pt-4 pb-4' },
+            img({ src: `${product.image}`, alt: `${product.title}`, class: 'w-16 h-16 rounded-md shadow-lg' }),
+            div(
+              { class: 'flex flex-col items-start pl-4' },
+              p(`${product.title}`),
+              p({ class: 'text-xs' }, `${product.sku}`),
+            ),
+          ),
+          div(
+            { class: 'col-span-4 md:col-span-2 lg:col-span-1 flex justify-center pt-4 pb-4' },
+            p({ class: '!content-center' }, `${product.quantity ? product.quantity : 1}`),
+          ),
+          div(
+            { class: 'hidden md:flex justify-center col-span-2 lg:col-span-1 pt-4 pb-4' },
+            p('--'),
+          ),
+        ));
+      });
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e);
+    }
+  }
+}
diff --git a/styles/styles.css b/styles/styles.css
@@ -1355,7 +1355,7 @@ button.suggestion.selected {
 .product-hero .hero-default-content > div {
     height: 100%;
     width: 100%;
-    text-align: center;
+    text-align: left;
 }
 
 .productdetail main .columns.columns-2-cols .product-hero .hero-default-content > div {
@@ -1377,13 +1377,6 @@ button.suggestion.selected {
     padding-right: 0.75rem;
 }
 
-@media (min-width: 768px) {
-
-    .product-hero .hero-default-content > div {
-        text-align: left;
-    }
-}
-
 .product-hero .hero-default-content > div .category-name {
     font-size: 0.875rem;
     font-weight: 400;
@@ -3368,6 +3361,14 @@ main .section.product-hero-container {
     grid-column: span 2 / span 2;
 }
 
+.col-span-4 {
+    grid-column: span 4 / span 4;
+}
+
+.col-span-8 {
+    grid-column: span 8 / span 8;
+}
+
 .float-none {
     float: none;
 }
@@ -3845,10 +3846,6 @@ main .section.product-hero-container {
     width: 2.25rem;
 }
 
-.w-\[36\%\] {
-    width: 36%;
-}
-
 .w-\[98\%\] {
     width: 98%;
 }
@@ -4019,6 +4016,10 @@ main .section.product-hero-container {
     grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
+.grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+
 .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -4039,6 +4040,10 @@ main .section.product-hero-container {
     flex-wrap: wrap;
 }
 
+.\!content-center {
+    align-content: center !important;
+}
+
 .items-start {
     align-items: flex-start;
 }
@@ -4137,6 +4142,10 @@ main .section.product-hero-container {
     row-gap: 3rem;
 }
 
+.gap-y-4 {
+    row-gap: 1rem;
+}
+
 .gap-y-8 {
     row-gap: 2rem;
 }
@@ -4734,6 +4743,10 @@ main .section.product-hero-container {
     padding-left: 0.5rem;
 }
 
+.pl-4 {
+    padding-left: 1rem;
+}
+
 .pl-5 {
     padding-left: 1.25rem;
 }
@@ -5525,6 +5538,10 @@ main .section.top-border {
         order: 0;
     }
 
+    .md\:col-span-2 {
+        grid-column: span 2 / span 2;
+    }
+
     .md\:mx-5 {
         margin-left: 1.25rem;
         margin-right: 1.25rem;
@@ -5736,6 +5753,14 @@ main .section.top-border {
         top: 50%;
     }
 
+    .lg\:col-span-1 {
+        grid-column: span 1 / span 1;
+    }
+
+    .lg\:col-span-10 {
+        grid-column: span 10 / span 10;
+    }
+
     .lg\:col-span-3 {
         grid-column: span 3 / span 3;
     }
@@ -5813,6 +5838,10 @@ main .section.top-border {
         width: 11rem;
     }
 
+    .lg\:w-\[36\%\] {
+        width: 36%;
+    }
+
     .lg\:w-recent-articles {
         width: 23rem;
     }