1172 [SEO] Product list schema product family

blocks/category-family/category-family.js → blocks/product-family/product-family.js

@@ -7,6 +7,7 @@ import {
   div, span, button, fieldset, ul, li, input, a, img, p,
 } from '../../scripts/dom-builder.js';
 import { decorateIcons } from '../../scripts/lib-franklin.js';
+import { buildProductCategorySchema } from '../../scripts/schema.js';
 
 const productSkeleton = div(
   { class: 'coveo-skeleton flex flex-col w-full lg:flex-row grid-rows-1 lg:grid-cols-5 gap-x-10 gap-y-4' },
@@ -202,7 +203,7 @@ function clearFilter(e, isWorkflow = true, isOpco = false) {
   const buttonEl = e.target.closest('button');
   // eslint-disable-next-line no-restricted-globals
   history.replaceState({}, '', `#${getQueryString(buttonEl)}`);
-  decorateProductList(document.querySelector('.category-family'));
+  decorateProductList(document.querySelector('.product-family'));
 }
 
 /**
@@ -522,6 +523,7 @@ export async function decorateProductList(block) {
       block.removeChild(productSkeleton);
       return;
     }
+    if (res.totalCount > 0) buildProductCategorySchema(res.results);
     facets(res, facetDiv);
     resultList(res, categoryDiv);
     block.removeChild(productSkeleton);
@@ -616,7 +618,7 @@ function filterButtonClick(e) {
 
   // eslint-disable-next-line no-restricted-globals
   history.replaceState({}, '', `#${getQueryString(buttonEl)}`);
-  decorateProductList(document.querySelector('.category-family'));
+  decorateProductList(document.querySelector('.product-family'));
 }
 
 export default async function decorate(block) {

build-css.js

@@ -57,9 +57,9 @@ const fileMappings = [
     wrapper: 'carousel-wrapper',
   },
   {
-    content: './blocks/category-family/category-family.js',
-    output: './blocks/category-family/category-family.css',
-    wrapper: 'category-family-wrapper',
+    content: './blocks/product-family/product-family.js',
+    output: './blocks/product-family/product-family.css',
+    wrapper: 'product-family-wrapper',
   },
   {
     content: './blocks/columns/columns.js',

scripts/schema.js

@@ -100,18 +100,33 @@ export function buildProductCategorySchema(products) {
   };
 
   products.forEach((product, index) => {
-    data.itemListElement.push({
-      '@type': 'ListItem',
-      position: index + 1,
-      '@id': `https://lifesciences.danaher.com${makePublicUrl(product.path)}`,
-      name: product.title,
-      image: `https://lifesciences.danaher.com${product.image}`,
-      description: product.description,
-      mainEntityOfPage: {
-        '@type': 'WebPage',
+    if (product?.raw) {
+      data.itemListElement.push({
+        '@type': 'ListItem',
+        position: index + 1,
+        '@id': product.clickUri,
+        name: product.title,
+        image: product?.raw?.images?.at(0),
+        description: product.excerpt,
+        mainEntityOfPage: {
+          '@type': 'WebPage',
+          '@id': product.clickUri,
+        },
+      });
+    } else {
+      data.itemListElement.push({
+        '@type': 'ListItem',
+        position: index + 1,
         '@id': `https://lifesciences.danaher.com${makePublicUrl(product.path)}`,
-      },
-    });
+        name: product.title,
+        image: `https://lifesciences.danaher.com${product.image}`,
+        description: product.description,
+        mainEntityOfPage: {
+          '@type': 'WebPage',
+          '@id': `https://lifesciences.danaher.com${makePublicUrl(product.path)}`,
+        },
+      });
+    }
   });
 
   setJsonLd(

styles/styles.css

@@ -2332,6 +2332,18 @@ main .section .product-hero-wrapper .product-hero .product-hero-content .vertica
   border-width: 2px;
 }
 
+.border-b {
+  border-bottom-width: 1px;
+}
+
+.border-t {
+  border-top-width: 1px;
+}
+
+.border-solid {
+  border-style: solid;
+}
+
 .border-danaherpurple-500 {
   --tw-border-opacity: 1;
   border-color: rgb(117 35 255 / var(--tw-border-opacity));
@@ -2347,6 +2359,11 @@ main .section .product-hero-wrapper .product-hero .product-hero-content .vertica
   border-color: rgb(239 68 68 / var(--tw-border-opacity));
 }
 
+.border-black {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
 .bg-danaherlightblue-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(239 251 253 / var(--tw-bg-opacity));
@@ -2478,6 +2495,10 @@ main .section .product-hero-wrapper .product-hero .product-hero-content .vertica
   padding-top: 1.5rem;
 }
 
+.pt-0 {
+  padding-top: 0px;
+}
+
 .text-left {
   text-align: left;
 }

tools/actions/convert/test/fixtures/product-category1-converted.html

@@ -21,7 +21,7 @@
         </div>
       </div>
       <hr>
-      <div class="category-family">
+      <div class="product-family">
         <div>
           <div></div>
         </div>

tools/actions/convert/test/fixtures/product-category2-converted.html

@@ -24,7 +24,7 @@ <h2>Our analytical ultracentrifuge (AUC) allows real-time monitoring of particle
         </div>
       </div>
       <p>Analytical ultracentrifugation stands as a first-principle technique performed in a matrix-free environment. It eliminates the need for calibration standards and is unmatched by other methods in providing a comprehensive range of information with exceptional precision and accuracy. In addition, analytical ultracentrifugation molecular weight determination is considered the definitive approach for determining the molecular weight of proteins in solution, offering researchers valuable insights into molecues' size, shape, and behavior. With sedimentation velocity and sedimentation equilibrium measurements, our AUC offers complementary perspectives on solution properties, including molar masses, stoichiometries, association constants, and nonideality.</p>
-      <div class="category-family">
+      <div class="product-family">
         <div>
           <div></div>
         </div>

tools/importer/transformers/coveoCategory.js

@@ -2,7 +2,7 @@
 const coveoCategory = (main, document) => {
   const category = main.querySelector('div.coveocategory');
   if (category) {
-    const block = [['Category Family'], ['']];
+    const block = [['Product Family'], ['']];
     const table = WebImporter.DOMUtils.createTable(block, document);
     category.append(table, document.createElement('hr'));
   }