Merge branch 'main' into robots2

.editorconfig

@@ -0,0 +1,5 @@
+[*.js]
+indent_size = 2
+
+[*.css]
+indent_size = 4

.github/pull_request_template.md

@@ -3,5 +3,5 @@ Please always provide the [GitHub issue(s)](../issues) your PR is for, as well a
 Fix #<gh-issue-id>
 
 Test URLs:
-- Before: https://main--{repo}--{owner}.hlx.live/
-- After: https://<branch>--{repo}--{owner}.hlx.live/
+- Before: https://main--{repo}--{owner}.aem.live/
+- After: https://<branch>--{repo}--{owner}.aem.live/

404.html

@@ -51,7 +51,7 @@
     }
 
     main.error .error-number text {
-      font-family: var(--type-fixed-font-family);
+      font-family: monospace;
     }
   </style>
   <link rel="stylesheet" href="/styles/lazy-styles.css">

README.md

@@ -5,8 +5,8 @@ This project boilerplate is for Edge Delivery Services projects that integrate w
 https://experienceleague.adobe.com/developer/commerce/storefront/
 
 ## Environments
-- Preview: https://main--{repo}--{owner}.hlx.page/
-- Live: https://main--{repo}--{owner}.hlx.live/
+- Preview: https://main--{repo}--{owner}.aem.page/
+- Live: https://main--{repo}--{owner}.aem.live/
 
 ## Installation
 

blocks/cards/cards.css

@@ -3,8 +3,8 @@
   margin: 0;
   padding: 0;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(278px, 1fr));
-  grid-gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(257px, 1fr));
+  grid-gap: 24px;
 }
 
 .cards > ul > li {
@@ -20,10 +20,6 @@
   line-height: 0;
 }
 
-.cards .cards-card-body > *:first-child {
-  margin-top: 0;
-}
-
 .cards > ul > li img {
   width: 100%;
   aspect-ratio: 4 / 3;

blocks/cards/cards.js

@@ -12,7 +12,7 @@ export default function decorate(block) {
     });
     ul.append(li);
   });
-  ul.querySelectorAll('img').forEach((img) => img.closest('picture').replaceWith(createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }])));
+  ul.querySelectorAll('picture > img').forEach((img) => img.closest('picture').replaceWith(createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }])));
   block.textContent = '';
   block.append(ul);
 }

blocks/columns/columns.css

@@ -23,7 +23,7 @@
   .columns > div {
     align-items: center;
     flex-direction: unset;
-    gap: 32px;
+    gap: 24px;
   }
 
   .columns > div > div {

blocks/footer/footer.css

@@ -1,15 +1,21 @@
 footer {
-  padding: 2rem;
   background-color: var(--color-neutral-100);
   font: var(--type-body-2-default-font);
   letter-spacing: var(--type-body-2-default-letter-spacing);
 }
 
-footer .footer {
-  max-width: 1200px;
+footer .footer > div {
   margin: auto;
+  max-width: 1200px;
+  padding: 40px 24px 24px;
 }
 
 footer .footer p {
   margin: 0;
 }
+
+@media (width >= 900px) {
+  footer .footer > div {
+    padding: 40px 32px 24px;
+  }
+}

blocks/fragment/fragment.css

@@ -1,13 +1 @@
-/* suppress nested section padding */
-.fragment-wrapper > .section {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.fragment-wrapper > .section:first-of-type {
-  padding-top: 0;
-}
-
-.fragment-wrapper > .section:last-of-type {
-  padding-bottom: 0;
-}
+/* stylelint-disable no-empty-source */

blocks/header/header.css

@@ -15,11 +15,11 @@ header nav {
     'hamburger brand tools' var(--nav-height)
     'sections sections sections' 1fr / auto 1fr auto;
   align-items: center;
-  gap: 0 32px;
+  gap: 0 24px;
   margin: auto;
-  max-width: 1264px;
+  max-width: 1248px;
   height: var(--nav-height);
-  padding: 0 16px;
+  padding: 0 24px;
   font-family: var(--type-base-font-family);
 }
 
@@ -29,19 +29,16 @@ header nav[aria-expanded='true'] {
     'sections sections' 1fr
     'tools tools' var(--nav-height) / auto 1fr;
   overflow-y: auto;
-  min-height: 100vh;
-}
-
-@media (width >= 600px) {
-  header nav {
-    padding: 0 32px;
-  }
+  min-height: 100dvh;
 }
 
 @media (width >= 900px) {
   header nav {
     display: flex;
     justify-content: space-between;
+    gap: 0 32px;
+    max-width: 1264px;
+    padding: 0 32px;
   }
 
   header nav[aria-expanded='true'] {
@@ -175,15 +172,15 @@ header nav .nav-sections ul {
 }
 
 header nav .nav-sections ul > li {
-  font-weight: 700;
+  font-weight: 500;
 }
 
 header nav .nav-sections ul > li > ul {
   margin-top: 0;
 }
 
 header nav .nav-sections ul > li > ul > li {
-  font-weight: 500;
+  font-weight: 400;
 }
 
 @media (width >= 900px) {
@@ -225,14 +222,13 @@ header nav .nav-sections ul > li > ul > li {
 
   header nav .nav-sections ul {
     display: flex;
-    gap: 2em;
+    gap: 24px;
     margin: 0;
   }
 
   header nav .nav-sections .default-content-wrapper > ul > li {
     flex: 0 1 auto;
     position: relative;
-    font-weight: 500;
   }
 
   header nav .nav-sections .default-content-wrapper > ul > li > ul {
@@ -243,10 +239,10 @@ header nav .nav-sections ul > li > ul > li {
   header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded='true'] > ul {
     display: block;
     position: absolute;
-    left: -1em;
+    left: -24px;
     width: 200px;
-    margin-top: 12px;
-    padding: 1em;
+    top: 150%;
+    padding: 16px;
     background-color: var(--color-neutral-500);
     white-space: initial;
   }
@@ -255,7 +251,7 @@ header nav .nav-sections ul > li > ul > li {
     content: '';
     position: absolute;
     top: -8px;
-    left: 8px;
+    left: 16px;
     width: 0;
     height: 0;
     border-left: 8px solid transparent;

blocks/header/header.js

@@ -22,6 +22,21 @@ function closeOnEscape(e) {
   }
 }
 
+function closeOnFocusLost(e) {
+  const nav = e.currentTarget;
+  if (!nav.contains(e.relatedTarget)) {
+    const navSections = nav.querySelector('.nav-sections');
+    const navSectionExpanded = navSections.querySelector('[aria-expanded="true"]');
+    if (navSectionExpanded && isDesktop.matches) {
+      // eslint-disable-next-line no-use-before-define
+      toggleAllNavSections(navSections, false);
+    } else if (!isDesktop.matches) {
+      // eslint-disable-next-line no-use-before-define
+      toggleMenu(nav, navSections, false);
+    }
+  }
+}
+
 function openOnKeydown(e) {
   const focused = document.activeElement;
   const isNavDrop = focused.className === 'nav-drop';
@@ -66,24 +81,26 @@ function toggleMenu(nav, navSections, forceExpanded = null) {
   if (isDesktop.matches) {
     navDrops.forEach((drop) => {
       if (!drop.hasAttribute('tabindex')) {
-        drop.setAttribute('role', 'button');
         drop.setAttribute('tabindex', 0);
         drop.addEventListener('focus', focusNavSection);
       }
     });
   } else {
     navDrops.forEach((drop) => {
-      drop.removeAttribute('role');
       drop.removeAttribute('tabindex');
       drop.removeEventListener('focus', focusNavSection);
     });
   }
+
   // enable menu collapse on escape keypress
   if (!expanded || isDesktop.matches) {
     // collapse menu on escape press
     window.addEventListener('keydown', closeOnEscape);
+    // collapse menu on focus lost
+    nav.addEventListener('focusout', closeOnFocusLost);
   } else {
     window.removeEventListener('keydown', closeOnEscape);
+    nav.removeEventListener('focusout', closeOnFocusLost);
   }
 }
 

blocks/header/searchbar.js

@@ -2,13 +2,14 @@ import { loadScript } from '../../scripts/aem.js';
 import { getConfigValue } from '../../scripts/configs.js';
 
 (async () => {
-  const widgetProd = '/scripts/widgets/LiveSearchAutocomplete.js';
+  const widgetProd = '/scripts/widgets/SearchAsYouType.js';
   await loadScript(widgetProd);
 
   const storeDetails = {
     environmentId: await getConfigValue('commerce-environment-id'),
     environmentType: (await getConfigValue('commerce-endpoint')).includes('sandbox') ? 'testing' : '',
     apiKey: await getConfigValue('commerce-x-api-key'),
+    apiUrl: await getConfigValue('commerce-endpoint'),
     websiteCode: await getConfigValue('commerce-website-code'),
     storeCode: await getConfigValue('commerce-store-code'),
     storeViewCode: await getConfigValue('commerce-store-view-code'),

blocks/hero/hero.css

@@ -1,22 +1,19 @@
-main .hero-container > div {
+.hero-container .hero-wrapper {
   max-width: unset;
-}
-
-main .hero-container {
   padding: 0;
 }
 
 .hero {
   position: relative;
-  padding: 32px;
+  padding: 40px 24px;
   min-height: 300px;
 }
 
 .hero h1 {
   max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
-  color: white;
+  color: var(--background-color);
 }
 
 .hero picture {
@@ -32,3 +29,9 @@ main .hero-container {
   width: 100%;
   height: 100%;
 }
+
+@media (width >= 900px) {
+  .hero {
+    padding: 40px 32px;
+  }
+}

blocks/product-details-custom/product-details-custom.js

@@ -13,7 +13,7 @@ import {
   performCatalogServiceQuery,
   refineProductQuery,
   setJsonLd,
-  loadErrorPage,
+  loadErrorPage, variantsQuery,
 } from '../../scripts/commerce.js';
 import { readBlockConfig } from '../../scripts/aem.js';
 
@@ -40,18 +40,17 @@ async function setJsonLdProduct(product) {
   const amount = priceRange?.minimum?.final?.amount || price?.final?.amount;
   const brand = attributes.find((attr) => attr.name === 'brand');
 
-  setJsonLd({
+  // get variants
+  const { variants } = (await performCatalogServiceQuery(variantsQuery, { sku }))?.variants
+  || { variants: [] };
+
+  const ldJson = {
     '@context': 'http://schema.org',
     '@type': 'Product',
     name,
     description,
     image: images[0]?.url,
-    offers: [{
-      '@type': 'http://schema.org/Offer',
-      price: amount?.value,
-      priceCurrency: amount?.currency,
-      availability: inStock ? 'http://schema.org/InStock' : 'http://schema.org/OutOfStock',
-    }],
+    offers: [],
     productID: sku,
     brand: {
       '@type': 'Brand',
@@ -60,7 +59,28 @@ async function setJsonLdProduct(product) {
     url: new URL(`/products/${urlKey}/${sku}`, window.location),
     sku,
     '@id': new URL(`/products/${urlKey}/${sku}`, window.location),
-  }, 'product');
+  };
+
+  if (variants.length > 1) {
+    ldJson.offers.push(...variants.map((variant) => ({
+      '@type': 'Offer',
+      name: variant.product.name,
+      image: variant.product.images[0]?.url,
+      price: variant.product.price.final.amount.value,
+      priceCurrency: variant.product.price.final.amount.currency,
+      availability: variant.product.inStock ? 'http://schema.org/InStock' : 'http://schema.org/OutOfStock',
+      sku: variant.product.sku,
+    })));
+  } else {
+    ldJson.offers.push({
+      '@type': 'Offer',
+      price: amount?.value,
+      priceCurrency: amount?.currency,
+      availability: inStock ? 'http://schema.org/InStock' : 'http://schema.org/OutOfStock',
+    });
+  }
+
+  setJsonLd(ldJson, 'product');
 }
 
 class ProductDetailPage extends Component {