Merge pull request #770 from hlxsites/763-minor-fix-for-breadcrumb

763 minor fix and refactor for product breadcrumb
hlxsites · Feb 8, 2024 · 96c6ef2 · 96c6ef2
2 parents e7236b9 + 42d147d
commit 96c6ef2
Show file tree

Hide file tree

Showing 11 changed files with 98 additions and 84 deletions.
diff --git a/blocks/header/header.js b/blocks/header/header.js
@@ -2,8 +2,11 @@ import {
   span, div, a, input, button,
 } from '../../scripts/dom-builder.js';
 import { decorateIcons } from '../../scripts/lib-franklin.js';
-import { getAuthorization, getCommerceBase, isLoggedInUser } from '../../scripts/commerce.js';
-import { getCookie, makeCoveoApiRequest } from '../../scripts/scripts.js';
+import {
+  getAuthorization, getCommerceBase, isLoggedInUser,
+  makeCoveoApiRequest,
+} from '../../scripts/commerce.js';
+import { getCookie } from '../../scripts/scripts.js';
 
 const baseURL = getCommerceBase();
 

diff --git a/blocks/page-tabs/page-tabs.js b/blocks/page-tabs/page-tabs.js
@@ -2,7 +2,7 @@ import {
   a, div, li, nav, option, select, span, ul,
 } from '../../scripts/dom-builder.js';
 import { decorateIcons } from '../../scripts/lib-franklin.js';
-import { getProductResponse } from '../../scripts/scripts.js';
+import { getProductResponse } from '../../scripts/commerce.js';
 
 const extractIconName = (path) => path.split('/').pop().split('.')[0];
 

diff --git a/blocks/product-children/product-children.js b/blocks/product-children/product-children.js
@@ -2,8 +2,11 @@
 import ProductTile from './product-tile.js';
 import { loadScript } from '../../scripts/lib-franklin.js';
 import {
-  getCookie, isOTEnabled, getProductResponse, getSKU,
+  getCookie, isOTEnabled,
 } from '../../scripts/scripts.js';
+import {
+  getProductResponse, getSKU,
+} from '../../scripts/commerce.js';
 
 customElements.define('product-tile', ProductTile);
 const childProducts = `

diff --git a/blocks/product-hero/product-hero.js b/blocks/product-hero/product-hero.js
@@ -1,8 +1,11 @@
 import {
   a, div, h1, p, span, hr,
 } from '../../scripts/dom-builder.js';
-import { getAuthorization, getCommerceBase } from '../../scripts/commerce.js';
-import { createOptimizedS7Picture, decorateModals, getProductResponse } from '../../scripts/scripts.js';
+import {
+  getAuthorization, getCommerceBase,
+  getProductResponse,
+} from '../../scripts/commerce.js';
+import { createOptimizedS7Picture, decorateModals } from '../../scripts/scripts.js';
 
 function showImage(e) {
   const selectedImage = document.querySelector('.image-content picture');

diff --git a/blocks/product-overview/product-overview.js b/blocks/product-overview/product-overview.js
@@ -1,4 +1,4 @@
-import { getProductResponse } from '../../scripts/scripts.js';
+import { getProductResponse } from '../../scripts/commerce.js';
 
 export default async function decorate(block) {
   const response = await getProductResponse();

diff --git a/blocks/product-parts/product-parts.js b/blocks/product-parts/product-parts.js
@@ -1,7 +1,7 @@
 import {
   div, img, p,
 } from '../../scripts/dom-builder.js';
-import { getProductResponse } from '../../scripts/scripts.js';
+import { getProductResponse } from '../../scripts/commerce.js';
 
 export default async function decorate(block) {
   const response = await getProductResponse();

diff --git a/blocks/product-resources/product-resources.js b/blocks/product-resources/product-resources.js
@@ -1,8 +1,11 @@
 /* eslint-disable import/no-unresolved */
 import { loadScript } from '../../scripts/lib-franklin.js';
 import {
-  getCookie, isOTEnabled, getProductResponse, getSKU,
+  getCookie, isOTEnabled,
 } from '../../scripts/scripts.js';
+import {
+  getProductResponse, getSKU,
+} from '../../scripts/commerce.js';
 
 const productResources = `
     <atomic-search-interface class="resource-search" 

diff --git a/blocks/product-specifications/product-specifications.js b/blocks/product-specifications/product-specifications.js
@@ -1,5 +1,5 @@
 import { div, h2 } from '../../scripts/dom-builder.js';
-import { getProductResponse } from '../../scripts/scripts.js';
+import { getProductResponse } from '../../scripts/commerce.js';
 
 export default async function decorate(block) {
   const response = await getProductResponse();

diff --git a/scripts/commerce.js b/scripts/commerce.js
@@ -28,3 +28,76 @@ export function getAuthorization() {
 export function isLoggedInUser() {
   return getCookie('rationalized_id');
 }
+
+export async function makeCoveoApiRequest(path, accessParam, payload = {}) {
+  const accessToken = window.DanaherConfig !== undefined
+    ? window.DanaherConfig[accessParam]
+    : 'xx2a2e7271-78c3-4e3b-bac3-2fcbab75323b';
+  const organizationId = window.DanaherConfig !== undefined
+    ? window.DanaherConfig.searchOrg
+    : 'danahernonproduction1892f3fhz';
+  const resp = await fetch(`https://${organizationId}.org.coveo.com${path}?organizationId=${organizationId}`, {
+    method: 'POST',
+    headers: {
+      authorization: `Bearer ${accessToken}`,
+      'content-type': 'application/json',
+    },
+    body: JSON.stringify(payload),
+  });
+  const jsonData = await resp.json();
+  return jsonData;
+}
+
+/**
+ *
+ * @returns Product SKU from requested URL
+ */
+export function getSKU() {
+  const sku = window.location.pathname.replace(/^\/content\/danaher\/ls\/us\/en\/products\//, '').replace(/\.html$/, '').split('/');
+  return sku.pop();
+}
+
+/**
+ *
+ * @param qParam
+ * @returns payload for product API
+ */
+function getProductApiPayload(qParam) {
+  const sku = getSKU();
+  const host = window.DanaherConfig !== undefined ? window.DanaherConfig.host : '';
+  const payload = {
+    context: {
+      host: `${host}`,
+      internal: false,
+    },
+    aq: `@${qParam}==${sku}`,
+    pipeline: 'Product Details',
+  };
+  return payload;
+}
+
+/**
+ *
+ * @returns Product response from local storage
+ */
+/* eslint consistent-return: off */
+export async function getProductResponse() {
+  try {
+    let response = JSON.parse(localStorage.getItem('product-details'));
+    const sku = getSKU();
+    if (response && response.at(0)?.raw.sku === sku) {
+      return response;
+    }
+    const fullResponse = await makeCoveoApiRequest('/rest/search/v2', 'productKey', getProductApiPayload('productid'));
+    if (fullResponse.results.length > 0) {
+      response = fullResponse.results;
+      localStorage.setItem('product-details', JSON.stringify(fullResponse.results));
+      return response;
+    }
+    localStorage.removeItem('product-details');
+    window.location.replace('/us/en/products/product-not-found');
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+  }
+}
diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -96,52 +96,6 @@ export function generateUUID() {
   return Math.floor(1000 + Math.random() * 9000);
 }
 
-export async function makeCoveoApiRequest(path, accessParam, payload = {}) {
-  const accessToken = window.DanaherConfig !== undefined
-    ? window.DanaherConfig[accessParam]
-    : 'xx2a2e7271-78c3-4e3b-bac3-2fcbab75323b';
-  const organizationId = window.DanaherConfig !== undefined
-    ? window.DanaherConfig.searchOrg
-    : 'danahernonproduction1892f3fhz';
-  const resp = await fetch(`https://${organizationId}.org.coveo.com${path}?organizationId=${organizationId}`, {
-    method: 'POST',
-    headers: {
-      authorization: `Bearer ${accessToken}`,
-      'content-type': 'application/json',
-    },
-    body: JSON.stringify(payload),
-  });
-  const jsonData = await resp.json();
-  return jsonData;
-}
-
-/**
- *
- * @returns Product SKU from requested URL
- */
-export function getSKU() {
-  const sku = window.location.pathname.replace(/^\/content\/danaher\/ls\/us\/en\/products\//, '').replace(/\.html$/, '').split('/');
-  return sku.pop();
-}
-
-/**
- *
- * @param qParam
- * @returns payload for product API
- */
-function getProductApiPayload(qParam) {
-  const sku = getSKU();
-  const host = window.DanaherConfig !== undefined ? window.DanaherConfig.host : '';
-  const payload = {
-    context: {
-      host: `${host}`,
-      internal: false,
-    },
-    aq: `@${qParam}==${sku}`,
-    pipeline: 'Product Details',
-  };
-  return payload;
-}
 /**
  * Returns the valid public url with or without .html extension
  * @param {string} url
@@ -242,32 +196,6 @@ export function isOTEnabled() {
   return true;
 }
 
-/**
- *
- * @returns Product response from local storage
- */
-/* eslint consistent-return: off */
-export async function getProductResponse() {
-  try {
-    let response = JSON.parse(localStorage.getItem('product-details'));
-    const sku = getSKU();
-    if (response && response.at(0)?.raw.sku === sku) {
-      return response;
-    }
-    const fullResponse = await makeCoveoApiRequest('/rest/search/v2', 'productKey', getProductApiPayload('productid'));
-    if (fullResponse.results.length > 0) {
-      response = fullResponse.results;
-      localStorage.setItem('product-details', JSON.stringify(fullResponse.results));
-      return response;
-    }
-    localStorage.removeItem('product-details');
-    window.location.replace('/us/en/products/product-not-found');
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error(error);
-  }
-}
-
 /**
 * Set the content of a cookie
 * @param {string} cname The cookie name (or property)
@@ -435,7 +363,8 @@ function lazyLoadHiddenPageNavTabs(sections, nameOfFirstSection) {
     : nameOfFirstSection;
 
   sections.forEach((section) => {
-    if (section.getAttribute('aria-labelledby') !== active) {
+    const hasBreadCrumb = section.className.includes('breadcrumb-container');
+    if (!hasBreadCrumb && section.getAttribute('aria-labelledby') !== active) {
       /*
        It marks all the blocks inside the hidden sections as loaded,
        so Franklin lib will skip them.

diff --git a/templates/productDetail/productDetail.js b/templates/productDetail/productDetail.js
@@ -2,7 +2,7 @@ import {
   div, ul, li, a,
 } from '../../scripts/dom-builder.js';
 import { buildBlock } from '../../scripts/lib-franklin.js';
-import { getProductResponse } from '../../scripts/scripts.js';
+import { getProductResponse } from '../../scripts/commerce.js';
 
 function addProductBreadCrumb(response, breadcrumbEl) {
   const clickUrl = new URL(response.at(0)?.ClickUri);