feat(core): add more context when no result in search page

bigcommerce · Jul 31, 2024 · 47f568b · 47f568b
1 parent c00b6fb
commit 47f568b
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 14 deletions.
diff --git a/.changeset/friendly-seas-wash.md b/.changeset/friendly-seas-wash.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Add more context when no result is found in search page.
diff --git a/core/app/[locale]/(default)/(faceted)/search/page.tsx b/core/app/[locale]/(default)/(faceted)/search/page.tsx
@@ -46,13 +46,9 @@ export default async function Search({ params: { locale }, searchParams }: Props
   if (products.length === 0) {
     return (
       <div>
-        <h1 className="mb-3 text-4xl font-black lg:text-5xl">{t('heading')}</h1>
         <NextIntlClientProvider locale={locale} messages={{ NotFound: messages.NotFound ?? {} }}>
           <SearchForm initialTerm={searchTerm} />
         </NextIntlClientProvider>
-        <p className="pv-6">
-          <em>{t('noResults')}</em>
-        </p>
       </div>
     );
   }

diff --git a/core/components/search-form/index.tsx b/core/components/search-form/index.tsx
@@ -16,17 +16,19 @@ export const SearchForm = ({ initialTerm = '' }: Props) => {
   const t = useTranslations('NotFound');
 
   return (
-    <div className="flex flex-col gap-8">
-      <h3 className="text-3xl font-black lg:text-4xl">{t('searchProducts')}</h3>
+    <div className="flex flex-col gap-8 py-16">
+      {initialTerm ? (
+        <h3 className="text-3xl font-black lg:text-4xl">
+          {t('noSearchResults', { term: `"${initialTerm}"` })}
+        </h3>
+      ) : (
+        <h3 className="text-3xl font-black lg:text-4xl">{t('searchProducts')}</h3>
+      )}
+      <p>{t('checkSpelling')}</p>
       <Form action="/search" className="flex" method="get">
         <Field className="me-4 w-full" name="search">
           <FieldControl asChild>
-            <Input
-              className="grey-200 border-2 px-8 py-3 font-semibold"
-              defaultValue={initialTerm}
-              name="term"
-              placeholder={t('searchPlaceholder')}
-            />
+            <Input defaultValue={initialTerm} name="term" placeholder={t('searchPlaceholder')} />
           </FieldControl>
         </Field>
         <FormSubmit asChild>

diff --git a/core/messages/en.json b/core/messages/en.json
@@ -160,7 +160,6 @@
   "Search": {
     "heading": "Search",
     "products": "Products",
-    "noResults": "No Results",
     "sortBy": "{items, plural, =0 {no items} =1 {1 item} other {# items}}",
     "searchResults": "Search results for"
   },
@@ -313,7 +312,9 @@
     "searchProducts": "Search for products",
     "searchPlaceholder": "Placeholder...",
     "searching": "Searching...",
-    "search": "Search"
+    "search": "Search",
+    "noSearchResults": "Sorry, no results for {term}.",
+    "checkSpelling": "Please check the spelling or try another search."
   },
   "ServerError": {
     "heading": "There was a server error!",