don't show featured products section if none exist (on not-found temp…

…late) (#852) * don't show featured products section if none exist If featured products do not exist, not-found template still shows the <section> and the h3 headline. this commit fixes that with a length check / fallback of return null. * chore: cleanup eslint and add changeset --------- Co-authored-by: Chancellor Clark <chancellor.clark@bigcommerce.com>
bigcommerce · May 6, 2024 · 3b7ec09 · 3b7ec09
1 parent 00b5281
commit 3b7ec09
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 19 deletions.
diff --git a/.changeset/perfect-seas-breathe.md b/.changeset/perfect-seas-breathe.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Conditionally show featuredProducts on 404 page.
diff --git a/apps/core/app/[locale]/not-found.tsx b/apps/core/app/[locale]/not-found.tsx
@@ -66,25 +66,27 @@ export default async function NotFound() {
         <NextIntlClientProvider locale={locale} messages={{ NotFound: messages.NotFound ?? {} }}>
           <SearchForm />
         </NextIntlClientProvider>
-        <section>
-          <h3 className="mb-8 text-3xl font-black lg:text-4xl">{t('featuredProducts')}</h3>
-          <div className="grid grid-cols-2 gap-x-8 gap-y-8 md:grid-cols-4">
-            {featuredProducts.map((product) => (
-              <NextIntlClientProvider
-                key={product.entityId}
-                locale={locale}
-                messages={{ Product: messages.Product ?? {} }}
-              >
-                <ProductCard
-                  product={product}
-                  showCart={false}
-                  showCompare={false}
-                  showReviews={false}
-                />
-              </NextIntlClientProvider>
-            ))}
-          </div>
-        </section>
+        {featuredProducts.length ? (
+          <section>
+            <h3 className="mb-8 text-3xl font-black lg:text-4xl">{t('featuredProducts')}</h3>
+            <div className="grid grid-cols-2 gap-x-8 gap-y-8 md:grid-cols-4">
+              {featuredProducts.map((product) => (
+                <NextIntlClientProvider
+                  key={product.entityId}
+                  locale={locale}
+                  messages={{ Product: messages.Product ?? {} }}
+                >
+                  <ProductCard
+                    product={product}
+                    showCart={false}
+                    showCompare={false}
+                    showReviews={false}
+                  />
+                </NextIntlClientProvider>
+              ))}
+            </div>
+          </section>
+        ) : null}
       </main>
 
       <Footer data={data.site} />