Merge branch 'main' into plp-query

hlxsites · Jul 16, 2024 · 59da168 · 59da168
2 parents a52b9aa + 263805f
commit 59da168
Show file tree

Hide file tree

Showing 12 changed files with 277 additions and 316 deletions.
diff --git a/404.html b/404.html
@@ -3,6 +3,14 @@
 
 <head>
   <title>Page not found</title>
+  <script type="importmap">
+    {
+        "imports": {
+            "@dropins/tools/": "/scripts/__dropins__/tools/",
+            "@dropins/storefront-pdp/": "/scripts/__dropins__/storefront-pdp/"
+        }
+    }
+  </script>
   <script type="text/javascript">
     window.isErrorPage = true;
     window.errorCode = '404';

diff --git a/blocks/fragment/fragment.js b/blocks/fragment/fragment.js
@@ -9,7 +9,7 @@ import {
 } from '../../scripts/scripts.js';
 
 import {
-  loadBlocks,
+  loadSections,
 } from '../../scripts/aem.js';
 
 /**
@@ -34,7 +34,7 @@ export async function loadFragment(path) {
       resetAttributeBase('source', 'srcset');
 
       decorateMain(main);
-      await loadBlocks(main);
+      await loadSections(main);
       return main;
     }
   }

diff --git a/blocks/product-details-custom/product-details-custom.js b/blocks/product-details-custom/product-details-custom.js
@@ -13,26 +13,12 @@ import {
   performCatalogServiceQuery,
   refineProductQuery,
   setJsonLd,
+  loadErrorPage,
 } from '../../scripts/commerce.js';
 import { readBlockConfig } from '../../scripts/aem.js';
 
 const html = htm.bind(h);
 
-export function errorGettingProduct(code = 404) {
-  fetch(`/${code}.html`).then((response) => {
-    if (response.ok) {
-      return response.text();
-    }
-    throw new Error(`Error getting ${code} page`);
-  }).then((htmlText) => {
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(htmlText, 'text/html');
-    document.body.innerHTML = doc.body.innerHTML;
-    document.head.innerHTML = doc.head.innerHTML;
-  });
-  document.body.innerHTML = '';
-}
-
 async function getVariantDetails(variantIds, sku) {
   const result = await performCatalogServiceQuery(
     refineProductQuery,
@@ -101,15 +87,17 @@ class ProductDetailPage extends Component {
       if (!product) {
         throw new Error("Couldn't get product");
       }
+
+      this.setState({
+        product,
+        loading: false,
+        selection: {},
+      });
     } catch (e) {
-      errorGettingProduct();
+      await loadErrorPage();
+    } finally {
+      this.props.resolve();
     }
-
-    this.setState({
-      product,
-      loading: false,
-      selection: {},
-    });
   }
 
   onAddToCart = async () => {
@@ -200,10 +188,12 @@ export default async function decorate($block) {
 
   const skuFromUrl = getSkuFromUrl() || blockConfig.sku;
   if (!skuFromUrl) {
-    errorGettingProduct();
+    await loadErrorPage();
+    return Promise.reject();
   }
 
-  const app = html`<${ProductDetailPage} sku=${skuFromUrl} />`;
-
-  render(app, $block);
+  return new Promise((resolve) => {
+    const app = html`<${ProductDetailPage} sku=${skuFromUrl} resolve=${resolve} />`;
+    render(app, $block);
+  });
 }
diff --git a/blocks/product-details/product-details.js b/blocks/product-details/product-details.js
@@ -7,24 +7,15 @@ import { render as productRenderer } from '@dropins/storefront-pdp/render.js';
 import ProductDetails from '@dropins/storefront-pdp/containers/ProductDetails.js';
 
 // Libs
-import { getProduct, getSkuFromUrl, setJsonLd } from '../../scripts/commerce.js';
+import {
+  getProduct,
+  getSkuFromUrl,
+  setJsonLd,
+  loadErrorPage,
+} from '../../scripts/commerce.js';
 import { getConfigValue } from '../../scripts/configs.js';
 import { fetchPlaceholders } from '../../scripts/aem.js';
 
-// Error Handling (404)
-async function errorGettingProduct(code = 404) {
-  const htmlText = await fetch(`/${code}.html`).then((response) => {
-    if (response.ok) {
-      return response.text();
-    }
-    throw new Error(`Error getting ${code} page`);
-  });
-  const parser = new DOMParser();
-  const doc = parser.parseFromString(htmlText, 'text/html');
-  document.body.innerHTML = doc.body.innerHTML;
-  document.head.innerHTML = doc.head.innerHTML;
-}
-
 async function addToCart({
   sku, quantity, optionsUIDs, product,
 }) {
@@ -123,7 +114,7 @@ export default async function decorate(block) {
     window.getProductPromise, fetchPlaceholders()]);
 
   if (!product) {
-    await errorGettingProduct();
+    await loadErrorPage();
     return Promise.reject();
   }
 
@@ -209,9 +200,11 @@ export default async function decorate(block) {
         await productRenderer.render(ProductDetails, {
           sku: getSkuFromUrl(),
           carousel: {
-            controls: 'thumbnailsColumn',
+            controls: {
+              desktop: 'thumbnailsColumn',
+              mobile: 'thumbnailsRow',
+            },
             arrowsOnMainImage: true,
-            mobile: true,
             peak: {
               mobile: true,
               desktop: false,
@@ -271,7 +264,7 @@ export default async function decorate(block) {
         })(block);
       } catch (e) {
         console.error(e);
-        await errorGettingProduct();
+        await loadErrorPage();
       } finally {
         resolve();
       }