Cls fix for promo

adobecom · Jan 8, 2025 · 3d4ba56 · 3d4ba56
1 parent d704a97
commit 3d4ba56
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 8 deletions.
diff --git a/libs/blocks/global-navigation/features/aside/aside.js b/libs/blocks/global-navigation/features/aside/aside.js
@@ -2,9 +2,9 @@ import { loadBlock, decorateAutoBlock } from '../../../../utils/utils.js';
 import { toFragment, lanaLog } from '../../utilities/utilities.js';
 import { processTrackingLabels } from '../../../../martech/attributes.js';
 
-export default async function decorateAside({ localNav, promoPath } = {}) {
+export default async function decorateAside({ fedsPromoWrapper, promoPath } = {}) {
   const onError = () => {
-    localNav?.classList.remove('has-promo');
+    fedsPromoWrapper.remove();
     lanaLog({ message: 'Gnav Promo fragment not replaced, potential CLS' });
     return '';
   };

diff --git a/libs/blocks/global-navigation/global-navigation.css b/libs/blocks/global-navigation/global-navigation.css
@@ -1204,6 +1204,7 @@ header.new-nav .feds-breadcrumbs li:first-child:not(:nth-last-child(-n+3)):after
   position: sticky;
   top: 0;
   z-index: 11;
+  height: var(--global-height-navPromo);
 }
 
 @keyframes slideright {

diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js
@@ -444,8 +444,8 @@ class Gnav {
       document.body.classList.remove('disable-scroll');
       enableMobileScroll();
     });
-    const promo = getMetadata('gnav-promo-source');
-    if (promo?.length) localNav.classList.add('has-promo');
+    const promo = document.querySelector('.feds-promo-aside-wrapper');
+    if (promo) localNav.classList.add('has-promo');
     this.elements.localNav = localNav;
     localNavItems[0].querySelector('a').textContent = title.trim();
     const isAtTop = () => {
@@ -937,16 +937,17 @@ class Gnav {
   decorateAside = async () => {
     this.elements.aside = '';
     const promoPath = getMetadata('gnav-promo-source');
-
     if (!promoPath) {
-      this.elements.localNav.classList.remove('has-promo');
+      const fedsPromoWrapper = document.querySelector('.feds-promo-aside-wrapper');
+      fedsPromoWrapper?.remove();
       return this.elements.aside;
     }
 
     const { default: decorate } = await import('./features/aside/aside.js');
     if (!decorate) return this.elements.aside;
-    this.elements.aside = await decorate({ headerElem: this.block, promoPath });
-    this.block.before(toFragment`<div class="feds-promo-aside-wrapper">${this.elements.aside}</div>`)
+    const fedsPromoWrapper = document.querySelector('.feds-promo-aside-wrapper');
+    this.elements.aside = await decorate({ localNavElem: this.elements.localNav, fedsPromoWrapper, promoPath });
+    fedsPromoWrapper.append(this.elements.aside);
   };
 
   decorateBrand = () => this.decorateGenericLogo({

diff --git a/libs/utils/utils.js b/libs/utils/utils.js
@@ -811,6 +811,11 @@ async function decorateHeader() {
     header.after(localNavWrapper);
   }
   if (breadcrumbs) header.append(breadcrumbs);
+  const promo = getMetadata('gnav-promo-source');
+  if (promo?.length) {
+    const fedsPromoWrapper = createTag('div', { class: 'feds-promo-aside-wrapper' });
+    header.before(fedsPromoWrapper);
+  }
 }
 
 async function decorateIcons(area, config) {