diff --git a/blocks/product-hero/product-hero.css b/blocks/product-hero/product-hero.css index 5100d5a47..a4922e51a 100644 --- 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 index 873704ffb..b4b438e5d 100644 --- 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 new file mode 100644 index 000000000..f830177dc --- /dev/null +++ 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 index 32e991a5a..8640cb0e0 100644 --- 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; }