USF-1918: Sharepoint documents have a two-tier structure with English…

… as the default - localize links for header block - localize links for product links
hlxsites · Feb 3, 2025 · 7c6a4f2 · 7c6a4f2
1 parent a2e1271
commit 7c6a4f2
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 7 deletions.
diff --git a/blocks/header/renderAuthCombine.js b/blocks/header/renderAuthCombine.js
@@ -217,7 +217,7 @@ const renderAuthCombine = (navSections, toggleMenu) => {
           'afterend',
           `<ul class="popupMenuUrlList">
               <li><a href={CUSTOMER_ACCOUNT_PATH}>My Account</a></li>
-              <li><a href="/products/hollister-backyard-sweatshirt/MH05">Product page</a></li>
+              <li><a href="${localizeLink('/products/hollister-backyard-sweatshirt/MH05')}">Product page</a></li>
               <li><button class="logoutButton">Logout</button></li>
             </ul>`,
         );

diff --git a/blocks/product-list-page-custom/ProductList.js b/blocks/product-list-page-custom/ProductList.js
@@ -6,6 +6,7 @@ import htm from '../../scripts/htm.js';
 import {
   renderPrice,
 } from '../../scripts/commerce.js';
+import { localizeLink } from '../../scripts/scripts.js';
 
 const html = htm.bind(h);
 const searchUnitId = 'livesearch-plp';
@@ -79,12 +80,12 @@ class ProductCard extends Component {
     return html`
       <li index=${index} ref=${secondLastProduct}>
         <div class="picture">
-          <a onClick=${() => this.onProductClick(product)} href="/products/${product.urlKey}/${product.sku}">
+          <a onClick=${() => this.onProductClick(product)} href="${localizeLink(`/products/${product.urlKey}/${product.sku}`)}">
             ${this.renderImage(index < numberOfEagerImages ? 'eager' : 'lazy')}
           </a>
         </div>
         <div class="name">
-          <a onClick=${() => this.onProductClick(product)} href="/products/${product.urlKey}/${product.sku}" dangerouslySetInnerHTML=${{__html: product.name}} />
+          <a onClick=${() => this.onProductClick(product)} href="${localizeLink(`/products/${product.urlKey}/${product.sku}`)}" dangerouslySetInnerHTML=${{__html: product.name}} />
         </div>
         <div class="price">${renderPrice(product, this.formatter.format, html, Fragment)}</div>
       </li>`;

diff --git a/blocks/product-recommendations/product-recommendations.js b/blocks/product-recommendations/product-recommendations.js
@@ -7,6 +7,7 @@ import { getConfigValue } from '../../scripts/configs.js';
 
 // initialize dropins
 import '../../scripts/initializers/cart.js';
+import { localizeLink } from '../../scripts/scripts.js';
 
 const isMobile = window.matchMedia('only screen and (max-width: 900px)').matches;
 
@@ -93,13 +94,13 @@ function renderItem(unitId, product) {
       }
     } else {
       // Navigate to page for non-simple products
-      window.location.href = `/products/${product.urlKey}/${product.sku}`;
+      window.location.href = localizeLink(`/products/${product.urlKey}/${product.sku}`);
     }
   };
 
   const ctaText = product.__typename === 'SimpleProductView' ? 'Add to Cart' : 'Select Options';
   const item = document.createRange().createContextualFragment(`<div class="product-grid-item">
-    <a href="/products/${product.urlKey}/${product.sku}">
+    <a href="${localizeLink(`/products/${product.urlKey}/${product.sku}`)}">
       <picture>
         <source type="image/webp" srcset="${image}?width=300&format=webply&optimize=medium" />
         <img loading="lazy" alt="Image of ${product.name}" width="300" height="375" src="${image}?width=300&format=jpg&optimize=medium" />
@@ -164,7 +165,7 @@ const mapProduct = (product, index) => ({
   categories: [],
   weight: 0,
   image: product.images.length > 0 ? product.images[0].url : undefined,
-  url: new URL(`/products/${product.urlKey}/${product.sku}`, window.location.origin).toString(),
+  url: new URL(localizeLink(`/products/${product.urlKey}/${product.sku}`), window.location.origin).toString(),
   queryType: 'primary',
 });
 

diff --git a/blocks/product-teaser/product-teaser.js b/blocks/product-teaser/product-teaser.js
@@ -1,5 +1,6 @@
 import { readBlockConfig } from '../../scripts/aem.js';
 import { performCatalogServiceQuery, renderPrice, mapProductAcdl } from '../../scripts/commerce.js';
+import { localizeLink } from '../../scripts/scripts.js';
 
 const productTeaserQuery = `query productTeaser($sku: String!) {
   products(skus: [$sku]) {
@@ -111,7 +112,7 @@ function renderProduct(product, config, block) {
       <h1>${name}</h1>
       <div class="price">${renderPrice(product, priceFormatter.format)}</div>
       <div class="actions">
-        ${config['details-button'] ? `<a href="/products/${urlKey}/${sku}" class="button primary">Details</a>` : ''}
+        ${config['details-button'] ? `<a href="${localizeLink(`/products/${urlKey}/${sku}`)}" class="button primary">Details</a>` : ''}
         ${config['cart-button'] && addToCartAllowed && __typename === 'SimpleProductView' ? '<button class="add-to-cart secondary">Add to Cart</button>' : ''}
       </div>
     </div>