More defensive code to make product pages work

concrete-utopia · Jun 11, 2024 · 4e3ca39 · 4e3ca39
1 parent 8329f05
commit 4e3ca39
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 7 deletions.
diff --git a/app/routes/products.$handle/route.jsx b/app/routes/products.$handle/route.jsx
@@ -132,7 +132,7 @@ export default function Product() {
       <Suspense>
         <Await resolve={solution}>
           {(data) => (
-            <HighlightSolution data={data.product.solution.reference} />
+           data.product?.solution != null ? <HighlightSolution data={data.product.solution.reference} /> : null
           )}
         </Await>
       </Suspense>
@@ -142,13 +142,13 @@ export default function Product() {
       <Suspense>
         <Await resolve={relatedProducts}>
           {(data) => (
-            <Recommended data={data.product.relatedProducts.references.nodes} />
+            data.product?.relatedProducts != null ? <Recommended data={data.product.relatedProducts.references.nodes} /> : null
           )}
         </Await>
       </Suspense>
       <Suspense>
         <Await resolve={spotlight}>
-          {(data) => <Spotlight data={data.product.spotlight.reference} />}
+          {(data) => data.product?.spotlight != null ? <Spotlight data={data.product.spotlight.reference} /> : null}
         </Await>
       </Suspense>
     </>

diff --git a/app/routes/products.$handle/sections/hero.jsx b/app/routes/products.$handle/sections/hero.jsx
@@ -65,15 +65,15 @@ function ProductSummary() {
   const accordionData = [
     {
       title: 'Materials',
-      content: product.materials.value,
+      content: product.materials?.value,
     },
     {
       title: 'Care Instructions',
-      content: product.care_guide.value,
+      content: product.care_guide?.value,
     },
     {
       title: 'Fit',
-      content: product.fit.value,
+      content: product.fit?.value,
     },
   ];
 

diff --git a/app/routes/products.$handle/sections/highlight-details.jsx b/app/routes/products.$handle/sections/highlight-details.jsx
@@ -6,7 +6,7 @@ import {Image} from '@shopify/hydrogen';
 export default function HighlightDetails() {
   const {details} = useLoaderData();
 
-  if (!details) return null;
+  if (details?.features == null) return null;
 
   const {highlights} = JSON.parse(details.features.reference.content.value);
 

diff --git a/app/routes/products.$handle/sections/reviews.jsx b/app/routes/products.$handle/sections/reviews.jsx
@@ -6,6 +6,10 @@ import {cva, cx} from '@h2/new/utils';
 export default function Reviews({data}) {
   const {review_count, review_avg, reviews} = data.reviews;
 
+  if (reviews == null) {
+    return null
+  }
+
   const customerReviews = reviews.references.nodes;
 
   return (