Merge branch 'develop' into cart-event-test

hlxsites · Dec 6, 2024 · f2aa9b0 · f2aa9b0
2 parents ad94984 + 52d459b
commit f2aa9b0
Show file tree

Hide file tree

Showing 13 changed files with 82 additions and 19 deletions.
diff --git a/404.html b/404.html
@@ -11,7 +11,7 @@
             "@dropins/storefront-auth/": "/scripts/__dropins__/storefront-auth/"
         }
     }
-</script>
+  </script>
   <script type="text/javascript">
     window.isErrorPage = true;
     window.errorCode = '404';
@@ -42,9 +42,13 @@
   <link rel="stylesheet" href="/styles/styles.css">
   <style>
     main.error {
-      min-height: calc(100vh - var(--nav-height));
-      display: flex;
       align-items: center;
+      display: flex;
+      margin: 0 auto;
+      max-width: 1264px;
+      min-height: calc(100vh - var(--nav-height));
+      padding: 0 32px;
+      width: 100%;
     }
 
     main.error .error-number {

diff --git a/blocks/commerce-order-returns/commerce-order-returns.js b/blocks/commerce-order-returns/commerce-order-returns.js
@@ -34,6 +34,6 @@ export default async function decorate(block) {
 
       return `${returnDetailsPath}?orderRef=${encodedOrderRef}&returnRef=${returnNumber}`;
     },
-    routeProductDetails: (productData) => (productData ? `/products/${productData.product.urlKey}/${productData.product.sku}` : '#'),
+    routeProductDetails: (productData) => (productData?.product ? `/products/${productData.product.urlKey}/${productData.product.sku}` : '#'),
   })(block);
 }
diff --git a/blocks/commerce-orders-list/commerce-orders-list.js b/blocks/commerce-orders-list/commerce-orders-list.js
@@ -32,7 +32,7 @@ export default async function decorate(block) {
       routeOrdersList: () => CUSTOMER_ORDERS_PATH,
       routeOrderDetails: (orderNumber) => `${CUSTOMER_ORDER_DETAILS_PATH}?orderRef=${orderNumber}`,
       routeReturnDetails: ({ orderNumber, returnNumber }) => `${CUSTOMER_RETURN_DETAILS_PATH}?orderRef=${orderNumber}&returnRef=${returnNumber}`,
-      routeOrderProduct: (productData) => (productData ? `/products/${productData.product.urlKey}/${productData.product.sku}` : '#'),
+      routeOrderProduct: (productData) => (productData?.product ? `/products/${productData.product.urlKey}/${productData.product.sku}` : '#'),
     })(block);
   }
 }
diff --git a/blocks/commerce-returns-list/commerce-returns-list.js b/blocks/commerce-returns-list/commerce-returns-list.js
@@ -34,7 +34,7 @@ export default async function decorate(block) {
       routeReturnDetails: ({ orderNumber, returnNumber }) => `${CUSTOMER_RETURN_DETAILS_PATH}?orderRef=${orderNumber}&returnRef=${returnNumber}`,
       routeOrderDetails: ({ orderNumber }) => `${CUSTOMER_ORDER_DETAILS_PATH}?orderRef=${orderNumber}`,
       routeReturnsList: () => CUSTOMER_RETURNS_PATH,
-      routeProductDetails: (productData) => (productData ? `/products/${productData.product.urlKey}/${productData.product.sku}` : '#'),
+      routeProductDetails: (productData) => (productData?.product ? `/products/${productData.product.urlKey}/${productData.product.sku}` : '#'),
     })(block);
   }
 }
diff --git a/blocks/header/renderAuthDropdown.js b/blocks/header/renderAuthDropdown.js
@@ -27,7 +27,7 @@ function renderSignIn(element) {
 export function renderAuthDropdown(navTools) {
   const dropdownElement = document.createRange().createContextualFragment(`
  <div class="dropdown-wrapper nav-tools-wrapper">
-    <button type="button" class="nav-dropdown-button"></button>
+    <button type="button" class="nav-dropdown-button" aria-haspopup="dialog" aria-expanded="false" aria-controls="login-modal"></button>
     <div class="nav-auth-menu-panel nav-tools-panel">
       <div id="auth-dropin-container"></div>
       <ul class="authenticated-user-menu">
@@ -43,17 +43,26 @@ export function renderAuthDropdown(navTools) {
   navTools.append(dropdownElement);
 
   const authDropDownPanel = navTools.querySelector('.nav-auth-menu-panel');
-  const authDropDownMenuList = navTools.querySelector('.authenticated-user-menu');
+  const authDropDownMenuList = navTools.querySelector(
+    '.authenticated-user-menu',
+  );
   const authDropinContainer = navTools.querySelector('#auth-dropin-container');
   const loginButton = navTools.querySelector('.nav-dropdown-button');
-  const logoutButtonElement = navTools.querySelector('.authenticated-user-menu > li > button');
+  const logoutButtonElement = navTools.querySelector(
+    '.authenticated-user-menu > li > button',
+  );
 
   authDropDownPanel.addEventListener('click', (e) => e.stopPropagation());
 
   async function toggleDropDownAuthMenu(state) {
     const show = state ?? !authDropDownPanel.classList.contains('nav-tools-panel--show');
 
     authDropDownPanel.classList.toggle('nav-tools-panel--show', show);
+    authDropDownPanel.setAttribute('role', 'dialog');
+    authDropDownPanel.setAttribute('aria-hidden', 'false');
+    authDropDownPanel.setAttribute('aria-labelledby', 'modal-title');
+    authDropDownPanel.setAttribute('aria-describedby', 'modal-description');
+    authDropDownPanel.focus();
   }
 
   loginButton.addEventListener('click', () => toggleDropDownAuthMenu());

diff --git a/blocks/product-details/product-details.js b/blocks/product-details/product-details.js
@@ -21,7 +21,7 @@ import ProductAttributes from '@dropins/storefront-pdp/containers/ProductAttribu
 import ProductGallery from '@dropins/storefront-pdp/containers/ProductGallery.js';
 
 // Libs
-import { setJsonLd, loadErrorPage } from '../../scripts/commerce.js';
+import { setJsonLd } from '../../scripts/commerce.js';
 import { fetchPlaceholders } from '../../scripts/aem.js';
 
 // Initializers
@@ -33,11 +33,6 @@ export default async function decorate(block) {
   const product = events._lastEvent?.['pdp/data']?.payload ?? null;
   const labels = await fetchPlaceholders();
 
-  if (!product) {
-    await loadErrorPage();
-    return Promise.reject();
-  }
-
   // Layout
   const fragment = document.createRange().createContextualFragment(`
     <div class="product-details__wrapper">

diff --git a/head.html b/head.html
@@ -1,4 +1,4 @@
-<meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
 <!--
   Domain Verification for Adobe Commerce Security Scan
   https://experienceleague.adobe.com/en/docs/commerce-admin/systems/security/security-scan

diff --git a/helix-query.yaml b/helix-query.yaml
@@ -1,5 +1,36 @@
 version: 1
 indices:
+  sitemap:
+    target: /sitemap.json
+    exclude:
+      - 'drafts/**'
+      - 'enrichment/**'
+      - 'fragments/**'
+      - 'products/**'
+    properties:
+      title:
+        select: head > meta[property="og:title"]
+        value: |
+          attribute(el, 'content')
+      image:
+        select: head > meta[property="og:image"]
+        value: |
+          attribute(el, 'content')
+      description:
+        select: head > meta[name="description"]
+        value: |
+          attribute(el, 'content')
+      template:
+        select: head > meta[name="template"]
+        value: |
+          attribute(el, 'content')
+      robots:
+        select: head > meta[name="robots"]
+        value: |
+          attribute(el, 'content')
+      lastModified:
+        select: none
+        value: parseTimestamp(headers["last-modified"], "ddd, DD MMM YYYY hh:mm:ss GMT")
   enrichment:
     target: /enrichment/enrichment.json
     include:

diff --git a/helix-sitemap.yaml b/helix-sitemap.yaml
@@ -0,0 +1,5 @@
+sitemaps:
+  default:
+    source: /sitemap.json
+    destination: /sitemap-content.xml
+    lastmod: YYYY-MM-DD
diff --git a/draft.robots.txt → robots.txt b/draft.robots.txt → robots.txt
@@ -5,4 +5,4 @@ Disallow: /enrichment/
 Disallow: /tools/
 Disallow: /plugins/experimentation/
 
-Sitemap: https://www.aemshop.net/sitemap.xml
+Sitemap: https://www.aemshop.net/sitemap-index.xml
diff --git a/scripts/commerce.js b/scripts/commerce.js
@@ -212,6 +212,10 @@ export async function loadErrorPage(code = 404) {
   const parser = new DOMParser();
   const doc = parser.parseFromString(htmlText, 'text/html');
   document.body.innerHTML = doc.body.innerHTML;
+  // get dropin styles
+  document.head.querySelectorAll('style[data-dropin]').forEach((style) => {
+    doc.head.appendChild(style);
+  });
   document.head.innerHTML = doc.head.innerHTML;
 
   // https://developers.google.com/search/docs/crawling-indexing/javascript/fix-search-javascript

diff --git a/scripts/initializers/pdp.js b/scripts/initializers/pdp.js
@@ -10,7 +10,12 @@ import {
   fetchProductData,
 } from '@dropins/storefront-pdp/api.js';
 import { initializeDropin } from './index.js';
-import { commerceEndpointWithQueryParams, getOptionsUIDsFromUrl, getSkuFromUrl } from '../commerce.js';
+import {
+  commerceEndpointWithQueryParams,
+  getOptionsUIDsFromUrl,
+  getSkuFromUrl,
+  loadErrorPage,
+} from '../commerce.js';
 import { getConfigValue } from '../configs.js';
 import { fetchPlaceholders } from '../aem.js';
 
@@ -37,6 +42,10 @@ await initializeDropin(async () => {
     fetchPlaceholders(),
   ]);
 
+  if (!product?.sku) {
+    return loadErrorPage();
+  }
+
   const langDefinitions = {
     default: {
       ...labels,
@@ -50,7 +59,7 @@ await initializeDropin(async () => {
   };
 
   // Initialize Dropins
-  await initializers.mountImmediately(initialize, {
+  return initializers.mountImmediately(initialize, {
     sku,
     optionsUIDs,
     langDefinitions,

diff --git a/sitemap-index.xml b/sitemap-index.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+    <sitemap>
+        <loc>https://www.aemshop.net/sitemap-content.xml</loc>
+    </sitemap>
+</sitemapindex>