Merge pull request #656 from hlxsites/641-product-citations-embeds

641 product citations embeds

blocks/product-citations/product-citations.js

@@ -0,0 +1,25 @@
+import {
+  a, div, img, object,
+} from '../../scripts/dom-builder.js';
+import { loadScript } from '../../scripts/lib-franklin.js';
+
+export default async function decorate(block) {
+  const citationsLinkEl = block.querySelector('a');
+  if (citationsLinkEl) {
+    const id = citationsLinkEl.getAttribute('title');
+    const data = citationsLinkEl.getAttribute('href');
+    block.innerHTML = '';
+    block.append(object({
+      id, type: 'text/html', data, class: 'w-full h-48',
+    }));
+    block.append(div(
+      { id, class: 'text-xs text-danaherblue-900' },
+      img({ src: '/icons/bioz-favicon.png', class: 'w-3 h-3 align-top pb-0 ml-0 mb-0 float-none', alt: `${id}` }),
+      a({ href: 'https://www.bioz.com/', target: '_blank', title: 'link' }, 'Powered by Bioz See more details on Bioz © 2024'),
+    ));
+
+    const attrs = { defer: true };
+    loadScript('https://cdn.bioz.com/assets/jquery-2.2.4.js', attrs);
+    loadScript('https://cdn.bioz.com/assets/bioz-w-api-6.0.min.js', attrs);
+  }
+}

scripts/dom-builder.js

@@ -97,3 +97,4 @@ export function dl(...items) { return domEl('dl', ...items); }
 export function dt(...items) { return domEl('dt', ...items); }
 export function dd(...items) { return domEl('dd', ...items); }
 export function hr(...items) { return domEl('hr', ...items); }
+export function object(...items) { return domEl('object', ...items); }

styles/styles.css

@@ -1483,25 +1483,6 @@ button.suggestion.selected {
     transition-duration: 700ms;
 }
 
-.productdetail main .columns.columns-2-cols .product-hero .vertical-gallery-container > div div:nth-child(1) img {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    font-size: 1rem;
-    line-height: 1.5rem;
-    --tw-text-opacity: 1;
-    color: rgb(55 65 81 / var(--tw-text-opacity));
-}
-
-.columns.features-card-left > div > div.product-hero .vertical-gallery-container > div div:nth-child(1) img > .card {
-    display: flex;
-    flex-direction: row;
-    padding-bottom: 1.5rem;
-}
-
-.columns.features-card-left > div > div.product-hero .vertical-gallery-container > div div:nth-child(1) img > div.card > .left-content {
-    padding-right: 0.75rem;
-}
-
 .product-hero .vertical-gallery-container > div > div:not(:nth-child(1)) {
     grid-column: span 1 / span 1;
     display: flex;
@@ -3211,6 +3192,10 @@ main .default-content-wrapper ul {
     grid-column: span 2 / span 2;
 }
 
+.float-none {
+    float: none;
+}
+
 .m-0 {
     margin: 0px;
 }
@@ -4778,6 +4763,11 @@ main .default-content-wrapper ul {
     color: rgb(13 49 114 / var(--tw-text-opacity));
 }
 
+.text-danaherblue-900 {
+    --tw-text-opacity: 1;
+    color: rgb(6 28 68 / var(--tw-text-opacity));
+}
+
 .text-danahergray-500 {
     --tw-text-opacity: 1;
     color: rgb(107 114 128 / var(--tw-text-opacity));