Merge branch 'main' into fix-overviewtab-hide

blocks/card-list/articleCard.js

@@ -2,6 +2,10 @@ import { formatDateUTCSeconds, imageHelper, makePublicUrl } from '../../scripts/
 import {
   li, a, p, div, time, span, h3,
 } from '../../scripts/dom-builder.js';
+import { getMetadata } from '../../scripts/lib-franklin.js';
+
+const template = getMetadata('template');
+const linkText = template === 'wsaw' ? 'Learn More →' : 'Read Article →';
 
 export default function createCard(article, firstCard = false) {
   const cardTitle = article.title.indexOf('| Danaher Life Sciences') > -1
@@ -17,14 +21,7 @@ export default function createCard(article, firstCard = false) {
         { class: 'eyebrow-sm' },
         article.brand || 'Danaher Corporation',
       ),
-      p(
-        { class: 'text-base text-gray-500 font-extralight' },
-        time(
-          { datetime: formatDateUTCSeconds(article.publishDate) },
-          formatDateUTCSeconds(article.publishDate, { month: 'long' }),
-        ),
-        span({ class: 'pl-2' }, `${article.readingTime} min read`),
-      ),
+
       h3(
         {
           class:
@@ -37,10 +34,19 @@ export default function createCard(article, firstCard = false) {
           class:
             'mt-auto inline-flex w-full py-5 text-base text-danaherpurple-500 font-semibold',
         },
-        'Read Article →',
+        linkText,
       ),
     ),
   );
+  const showDateTime = p(
+    { class: 'text-base text-gray-500 font-extralight' },
+    time(
+      { datetime: formatDateUTCSeconds(article.publishDate) },
+      formatDateUTCSeconds(article.publishDate, { month: 'long' }),
+    ),
+    span({ class: 'pl-2' }, `${article.readingTime} min read`),
+  );
+  if (template !== 'wsaw') cardWrapper.querySelector('.eyebrow-sm')?.after(showDateTime);
 
   return li(
     {

blocks/card-list/card-list.js

@@ -2,22 +2,23 @@ import ffetch from '../../scripts/ffetch.js';
 import {
   ul, a, div, span,
 } from '../../scripts/dom-builder.js';
-
 import { getMetadata, toClassName } from '../../scripts/lib-franklin.js';
 import createArticleCard from './articleCard.js';
 import createLibraryCard from './libraryCard.js';
 import createApplicationCard from './applicationCard.js';
 import { makePublicUrl } from '../../scripts/scripts.js';
 import { buildItemListSchema } from '../../scripts/schema.js';
 
-const getSelectionFromUrl = () => (window.location.pathname.indexOf('topics') > -1 ? toClassName(window.location.pathname.replace('.html', '').split('/').pop()) : '');
+const tagName = getMetadata('template') === 'wsaw' ? 'solutions' : 'topics';
+
+const getSelectionFromUrl = () => (window.location.pathname.indexOf(tagName) > -1 ? toClassName(window.location.pathname.replace('.html', '').split('/').pop()) : '');
 const getPageFromUrl = () => toClassName(new URLSearchParams(window.location.search).get('page')) || '';
 
 const createTopicUrl = (currentUrl, keyword = '') => {
-  if (currentUrl.indexOf('topics') > -1) {
+  if (currentUrl.indexOf(tagName) > -1) {
     return currentUrl.substring(0, currentUrl.lastIndexOf('/') + 1) + toClassName(keyword).toLowerCase();
   }
-  return `${currentUrl.replace('.html', '')}/topics/${toClassName(keyword).toLowerCase()}`;
+  return `${currentUrl.replace('.html', '')}/${tagName}/${toClassName(keyword).toLowerCase()}`;
 };
 
 const patchBannerHeading = () => {
@@ -83,7 +84,7 @@ const createPagination = (entries, page, limit) => {
 
 export function createFilters(articles, viewAll = false) {
   // collect tag filters
-  const allKeywords = articles.map((item) => item.topics.replace(/,\s*/g, ',').split(','));
+  const allKeywords = articles.map((item) => item[tagName].replace(/,\s*/g, ',').split(','));
   const keywords = new Set([].concat(...allKeywords));
   keywords.delete('');
   keywords.delete('Blog'); // filter out generic blog tag
@@ -92,8 +93,8 @@ export function createFilters(articles, viewAll = false) {
   // render tag cloud
   const newUrl = new URL(window.location);
   newUrl.searchParams.delete('page');
-  if (window.location.pathname.indexOf('topics') > -1) {
-    newUrl.pathname = window.location.pathname.substring(0, window.location.pathname.indexOf('/topics/'));
+  if (window.location.pathname.indexOf(tagName) > -1) {
+    newUrl.pathname = window.location.pathname.substring(0, window.location.pathname.indexOf(`/${tagName}/`));
   }
   const tags = viewAll ? div(
     { class: 'flex flex-wrap gap-2 gap-y-0 mb-4' },
@@ -138,20 +139,22 @@ export function createFilters(articles, viewAll = false) {
   });
 
   // patch banner heading with selected tag only on topics pages
-  if (getMetadata('heading') && window.location.pathname.indexOf('topics') > -1) {
+  if (getMetadata('heading') && window.location.pathname.indexOf(tagName) > -1) {
     patchBannerHeading();
   }
 
   return tags;
 }
 
 export default async function decorate(block) {
+  block.setAttribute('id', 'card-list');
   const articleType = block.classList.length > 2 ? block.classList[1] : '';
   if (articleType) block.classList.remove(articleType);
   block.textContent = '';
+  const indexType = getMetadata('template') === 'wsaw' ? 'wsaw' : 'article';
 
   // fetch and sort all articles
-  const articles = await ffetch('/us/en/article-index.json')
+  const articles = await ffetch(`/us/en/${indexType}-index.json`)
     .chunks(500)
     .filter(({ type }) => type.toLowerCase() === articleType)
     .filter((article) => !article.path.includes('/topics-template'))
@@ -160,7 +163,7 @@ export default async function decorate(block) {
   const activeTagFilter = block.classList.contains('url-filtered') ? getSelectionFromUrl() : '';
   if (activeTagFilter) {
     filteredArticles = articles.filter(
-      (item) => toClassName(item.topics).toLowerCase().indexOf(activeTagFilter) > -1,
+      (item) => toClassName(item[tagName]).toLowerCase().indexOf(activeTagFilter) > -1,
     );
   }
   buildItemListSchema(filteredArticles, 'resources');

blocks/product-hero/product-hero.js

@@ -6,6 +6,7 @@ import {
   getProductResponse,
 } from '../../scripts/commerce.js';
 import { createOptimizedS7Picture, decorateModals } from '../../scripts/scripts.js';
+import { getMetadata } from '../../scripts/lib-franklin.js';
 
 function showImage(e) {
   const selectedImage = document.querySelector('.image-content picture');
@@ -164,20 +165,22 @@ async function addToQuote(product) {
 
 export default async function decorate(block) {
   const titleEl = block.querySelector('h1');
+  const h1Value = getMetadata('h1');
   titleEl?.classList.add('title');
   titleEl?.parentElement.parentElement.remove();
   const response = await 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, response[0]?.Title);
     const defaultContent = div();
     defaultContent.innerHTML = response[0]?.raw.richdescription;
     defaultContent.prepend(span({ class: 'sku hidden' }, response[0]?.raw.productid));
-    defaultContent.prepend(titleEl || h1({ class: 'title' }, response[0]?.Title));
+    defaultContent.prepend(h1({ class: 'title' }, h1Value || response[0]?.raw.titlelsig));
     defaultContent.prepend(span({ class: 'categories hidden' }, response[0]?.raw.categories));
     defaultContent.prepend(span({ class: 'category-name' }, response[0]?.raw?.defaultcategoryname ? response[0]?.raw?.defaultcategoryname : ''));
     const rfqEl = block.querySelector(':scope > div:nth-child(1)');
+    const addCartBtnEl = block.querySelector(':scope > div:nth-child(1)');
+    addCartBtnEl.classList.add(...'btn-outline-trending-brand text-lg rounded-full px-4 py-2 !no-underline'.split(' '));
     if (rfqEl && rfqEl.textContent.includes('Request for Quote')) {
       let rfqParent;
       rfqEl.classList.add(...'btn-outline-trending-brand text-lg rounded-full px-4 py-2 !no-underline'.split(' '));

blocks/spline-viewer/spline-viewer.css

@@ -0,0 +1,23 @@
+.spline-viewer-wrapper :is(.block) {
+  display: block
+}
+
+.spline-viewer-wrapper :is(.\!h-\[200px\]) {
+  height: 200px !important
+}
+
+.spline-viewer-wrapper :is(.bg-danaherlightblue-50) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 251 253 / var(--tw-bg-opacity))
+}
+
+.spline-viewer-wrapper :is(.bg-danaherpurple-800) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 0 165 / var(--tw-bg-opacity))
+}
+
+@media (min-width: 768px) {
+  .spline-viewer-wrapper :is(.md\:\!h-\[600px\]) {
+    height: 600px !important
+  }
+}

blocks/spline-viewer/spline-viewer.js

@@ -0,0 +1,27 @@
+import { loadScript } from '../../scripts/lib-franklin.js';
+import { getFragmentFromFile } from '../../scripts/scripts.js';
+
+export default async function decorate(block) {
+  try {
+    // get the content
+    const fragment = await getFragmentFromFile('/fragments/spline.html');
+    block.innerHTML = '';
+    const parser = new DOMParser();
+    const fragmentHtml = parser.parseFromString(fragment, 'text/html');
+    const observer = new IntersectionObserver((entries) => {
+      if (entries.some((e) => e.isIntersecting)) {
+        observer.disconnect();
+        setTimeout(() => {
+          loadScript(fragmentHtml?.head?.firstElementChild?.src, { type: 'module' });
+          block.append(fragmentHtml?.body?.firstElementChild);
+        }, 2000);
+      }
+    });
+    observer.observe(block);
+    block.classList.add('!h-[200px]', 'md:!h-[600px]');
+  } catch (e) {
+    block.textContent = '';
+    // eslint-disable-next-line no-console
+    console.warn(`cannot load snippet at ${e}`);
+  }
+}

build-css.js

@@ -106,6 +106,11 @@ const fileMappings = [
     output: './blocks/mini-teasers/mini-teasers.css',
     wrapper: 'mini-teasers-wrapper',
   },
+  {
+    content: './blocks/spline-viewer/spline-viewer.js',
+    output: './blocks/spline-viewer/spline-viewer.css',
+    wrapper: 'spline-viewer-wrapper',
+  },
   {
     content: ['./blocks/page-jump-menu/page-jump-menu.js', './blocks/page-tabs/page-tabs.js'],
     output: './blocks/page-jump-menu/page-jump-menu.css',

fragments/spline.html

@@ -0,0 +1,2 @@
+<script type="module" src="https://unpkg.com/@splinetool/[email protected]/build/spline-viewer.js"></script>
+<spline-viewer url="https://prod.spline.design/UBAIdqMtOkuDExkL/scene.splinecode"></spline-viewer>

fstab.yaml

@@ -10,4 +10,5 @@ folders:
   /us/en/products/bundles/: /us/en/products/product-coveo
   /us/en/blog/topics/: /us/en/blog/topics-template
   /us/en/news/topics/: /us/en/news/topics-template
-  /us/en/library/topics/: /us/en/library/topics-template
+  /us/en/library/topics/: /us/en/library/topics-template
+  /us/en/we-see-a-way/solutions/: /us/en/we-see-a-way

head.html

@@ -5,4 +5,4 @@
 <link rel="preconnect" href="https://danaherls.scene7.com">
 <link rel="dns-prefetch" href="https://danaherls.scene7.com">
 <link rel="stylesheet" href="/styles/styles.css"/>
-<script type="application/ld+json" data-name="website">{"@context":"https://schema.org","@type":"WebSite","url":" https://lifesciences.danaher.com/","name":"Danaher Life Sciences","alternateName":"DH Life Sciences","description":" Explore our automation solutions, analytical innovations, and digital solutions to accelerate drug development time by up to 50%. We empower the creation of biopharmaceuticals, gene/cell therapies & innovative treatments.","potentialAction":{"@type":"SearchAction","target":"https://lifesciences.danaher.com/us/en/search.html#q={search_term_string}","query-input":"required name=search_term_string"}}</script>
+<script type="application/ld+json" data-name="website">{"@context":"https://schema.org","@type":"WebSite","url":" https://lifesciences.danaher.com/","name":"Danaher Life Sciences","alternateName":"DH Life Sciences","description":" Explore our automation solutions, analytical innovations, and digital solutions to accelerate drug development time by up to 50%. We empower the creation of biopharmaceuticals, gene/cell therapies & innovative treatments.","potentialAction":{"@type":"SearchAction","target":"https://lifesciences.danaher.com/us/en/search.html#q={search_term_string}","query-input":"required name=search_term_string"}}</script>

helix-query.yaml

@@ -27,6 +27,9 @@ indices:
       topics:
         select: head > meta[name="topics"]
         value: attribute(el, "content")
+      solutions:
+        select: head > meta[name="solutions"]
+        value: attribute(el, "content")
       readingTime:
         select: head > meta[name="readingtime"]
         value: attribute(el, "content")
@@ -79,3 +82,39 @@ indices:
       solution:
         select: head > meta[name="solution"]
         value: attribute(el, "content")
+  wsaw:
+    include:
+      - /us/en/we-see-a-way/**
+    exclude:
+      - /us/en/we-see-a-way
+      - /us/en/we-see-a-way/solutions
+      - /us/en/we-see-a-way/solutions/**
+    target: /us/en/wsaw-index.json
+    properties:
+      lastModified:
+        select: none
+        value: parseTimestamp(headers["last-modified"], "ddd, DD MMM YYYY hh:mm:ss GMT")
+      title:
+        select: main h1
+        value: textContent(el)
+      navTitle:
+        select: head > meta[name="navtitle"]
+        value: attribute(el, "content")
+      description:
+        select: head > meta[name="description"]
+        value: attribute(el, "content")
+      image:
+        select: head > meta[property="og:image"]
+        value: match(attribute(el, "content"), "^(https?:\/\/.*?(danaher.com))+(.*)|^(.*)")
+      solutions:
+        select: head > meta[name="solutions"]
+        value: attribute(el, "content")
+      publishDate:
+        select: head > meta[name="publishdate"]
+        value: parseTimestamp(attribute(el, "content"), "ddd, DD MMM YYYY hh:mm:ss GMT")
+      type:
+        select: head > meta[name="template"]
+        value: attribute(el, "content")
+      brand:
+        select: head > meta[name="brand"]
+        value: attribute(el, "content")

scripts/commerce.js

@@ -26,11 +26,15 @@ export function getAuthorization() {
   } else {
     env = 'prod';
   }
+  const tokenInStore = sessionStorage.getItem(`${siteID}_${env}_apiToken`);
+  const parsedToken = JSON.parse(tokenInStore);
   if (localStorage.getItem('authToken')) {
     authHeader.append('Authorization', `Bearer ${localStorage.getItem('authToken')}`);
   } else if (getCookie('ProfileData')) {
     const { customer_token: apiToken } = getCookie('ProfileData');
     authHeader.append('authentication-token', apiToken);
+  } else if (parsedToken && parsedToken?.expiry_time > (new Date().getTime() / 1000)) {
+    authHeader.append('authentication-token', parsedToken.token);
   } else if (getCookie(`${siteID}_${env}_apiToken`)) {
     const apiToken = getCookie(`${siteID}_${env}_apiToken`);
     authHeader.append('authentication-token', apiToken);

scripts/delayed.js

@@ -124,20 +124,19 @@ function sendCoveoEventProduct() {
 async function getAuthToken() {
   if (!refresh) {
     refresh = true;
+    const siteID = window.DanaherConfig?.siteID;
     const formData = 'grant_type=anonymous&scope=openid+profile&client_id=';
-    const authRequest = await fetch(`${baseURL}/token`, {
+    const authRequest = await fetch(`/content/danaher/services/auth/token?id=${siteID}`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
       body: formData,
     });
     if (authRequest.ok) {
-      const siteID = window.DanaherConfig?.siteID;
       const hostName = window.location.hostname;
       const env = hostName.includes('local') ? 'local' : hostName.includes('dev') ? 'dev' : hostName.includes('stage') ? 'stage' : 'prod';
       const data = await authRequest.json();
-      const expiresIn = data.expires_in * 1000;
-      setCookie(`${siteID}_${env}_apiToken`, data.access_token, expiresIn, '/');
-      localStorage.setItem(`${siteID}_${env}_refresh-token`, data.refresh_token);
+      sessionStorage.setItem(`${siteID}_${env}_apiToken`, JSON.stringify(data));
+      sessionStorage.setItem(`${siteID}_${env}_refresh-token`, data.refresh_token);
     }
   }
 }

styles/styles.css

@@ -727,20 +727,20 @@ body.appear {
   width: 100%;
 }
 
-main .section:not(.stretch, .product-hero-container, .workflow-carousel-container, .carousel-container, .product-card-container, .page-jump-menu-container, .page-tabs-container, .stats-container) {
+main .section:not(.stretch, .product-hero-container, .workflow-carousel-container, .carousel-container, .product-card-container, .page-jump-menu-container, .page-tabs-container, .stats-container, .spline-viewer-container) {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
   padding-top: 2rem;
   padding-bottom: 2rem;
 }
 
 @media (min-width: 768px) {
-  main .section:not(.stretch, .product-hero-container, .workflow-carousel-container, .carousel-container, .product-card-container, .page-jump-menu-container, .page-tabs-container, .stats-container) {
+  main .section:not(.stretch, .product-hero-container, .workflow-carousel-container, .carousel-container, .product-card-container, .page-jump-menu-container, .page-tabs-container, .stats-container, .spline-viewer-container) {
     padding-top: 3rem;
     padding-bottom: 3rem;
   }
 
-  main .section > div:not(.carousel-wrapper, .page-jump-menu-wrapper, .page-tabs-wrapper) {
+  main .section > div:not(.carousel-wrapper, .page-jump-menu-wrapper, .page-tabs-wrapper, .spline-viewer-wrapper) {
     margin-left: auto;
     margin-right: auto;
     max-width: 80rem;
@@ -2061,6 +2061,20 @@ main .section .talk-to-an-expert-form-wrapper .talk-to-an-expert-form > div ul {
   overflow-y: scroll;
 }
 
+.carousel-container .btn-primary-purple {
+  border-width: 2px;
+}
+
+@media (min-width: 1024px) {
+  .mini-teasers-container .default-content-wrapper h2 {
+    padding-top: 2rem;
+  }
+
+  .columns-container p.link {
+    padding-top: 2rem;
+  }
+}
+
 .pointer-events-none {
   pointer-events: none;
 }