Adding overview text from placeholder

adobecom · Nov 19, 2024 · a31bfee · a31bfee
1 parent 6b5b174
commit a31bfee
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/libs/blocks/global-navigation/global-navigation.css b/libs/blocks/global-navigation/global-navigation.css
@@ -991,6 +991,10 @@ header + .feds-localnav {
   z-index: 2;
 }
 
+.feds-localnav a {
+  text-decoration: unset;
+}
+
 .feds-localnav-title {
   width: 100%;
   height: 53px;
@@ -1051,7 +1055,6 @@ header + .feds-localnav {
   font-size: 14px;
   padding: 12px 20px;
   background: #F3F3F3;
-  text-decoration: none;
 }
 
 .feds-localnav .feds-localnav-items .feds-menu-headline {

diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js
@@ -370,7 +370,7 @@ class Gnav {
     `;
   };
 
-  decorateLocalNav = () => {
+  decorateLocalNav = async () => {
     const localNavItems = this.elements.navWrapper.querySelector('.feds-nav').querySelectorAll('.feds-navItem:not(.feds-navItem--section)');
     const [title, navTitle = ''] = this.getOriginalTitle(localNavItems);
 
@@ -381,13 +381,15 @@ class Gnav {
       localNav.append(toFragment`<button class="feds-navLink--hoverCaret feds-localnav-title"></button>`, toFragment` <div class="feds-localnav-items"></div>`);
 
       const itemWrapper = localNav.querySelector('.feds-localnav-items');
+      const titleLabel = await replaceKey('overview', getFedsPlaceholderConfig())
+
       localNavItems.forEach((elem, idx) => {
         const clonedItem = elem.cloneNode(true);
         const link = clonedItem.querySelector('a');
 
         if (idx === 0) {
           localNav.querySelector('.feds-localnav-title').innerText = title.trim();
-          link.textContent = navTitle.trim() || title.trim();
+          link.textContent = navTitle.trim() || titleLabel;
         }
 
         itemWrapper.appendChild(clonedItem);

diff --git a/libs/blocks/global-navigation/utilities/utilities.js b/libs/blocks/global-navigation/utilities/utilities.js
@@ -3,7 +3,7 @@ import {
 } from '../../../utils/utils.js';
 import { getFederatedContentRoot, getFederatedUrl } from '../../../utils/federated.js';
 import { processTrackingLabels } from '../../../martech/attributes.js';
-import { replaceText } from '../../../features/placeholders.js';
+import { replaceKey, replaceText } from '../../../features/placeholders.js';
 
 loadLana();
 
@@ -434,14 +434,14 @@ export const transformTemplateToMobile = async (popup, item, localnav = false) =
   const mainMenu = `
       <span class="main-menu">
         <svg xmlns="http://www.w3.org/2000/svg" style="translate:0 3px" width="7" height="12" viewBox="0 0 7 12" fill="none"><path d="M5.55579 1L1.09618 5.45961C1.05728 5.4985 1.0571 5.56151 1.09577 5.60062L5.51027 10.0661" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>
-        {{main-menu}}
+        ${await replaceKey('main-menu', getFedsPlaceholderConfig())}
       </span>
   `;
   const brand = document.querySelector('.feds-brand').outerHTML;
   const breadCrumbs = document.querySelector('.feds-breadcrumbs')?.outerHTML;
   popup.innerHTML = `
     <div class="top-bar">
-      ${localnav ? brand : await replaceText(mainMenu, getFedsPlaceholderConfig())}
+      ${localnav ? brand : mainMenu}
       <span class="close-icon" style="width:11.5px;height:11.5px;padding:12px;cursor:pointer">
         <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
           <path d="M1.5 1L13 12.5" stroke="black" stroke-width="1.7037" stroke-linecap="round"/>