feat: add h1 in EmptySearch component

vtex · Jan 31, 2025 · 0f54346 · 0f54346
1 parent 5372532
commit 0f54346
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 4 deletions.
diff --git a/packages/core/discovery.config.default.js b/packages/core/discovery.config.default.js
@@ -12,6 +12,7 @@ module.exports = {
       titleTemplate: '%s: Search results title',
       descriptionTemplate: '%s: Search results description',
       noIndex: true,
+      bodyH1: 'Showing results for:',
     },
   },
 

diff --git a/packages/core/src/components/sections/ProductGallery/section.module.scss b/packages/core/src/components/sections/ProductGallery/section.module.scss
@@ -1,4 +1,5 @@
 @layer components {
+
   .section {
     @include media("<notebook") {
       margin-top: 0;
@@ -13,6 +14,25 @@
       }
     }
 
+    [data-fs-search-loading] {
+
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      h1 {
+        font-size: var(--fs-text-size-4);
+
+        @include media(">=tablet") { font-size: var(--fs-text-size-5); padding-top: var(--fs-spacing-4); }
+
+        span {
+          font-weight: var(--fs-text-weight-bold);
+        }
+      }
+    }
+
+
     @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
     @import "@faststore/ui/src/components/atoms/Button/styles.scss";
     @import "@faststore/ui/src/components/atoms/Checkbox/styles.scss";

diff --git a/packages/core/src/components/templates/SearchPage/SearchWrapper.tsx b/packages/core/src/components/templates/SearchPage/SearchWrapper.tsx
@@ -7,15 +7,30 @@ import Section from 'src/components/sections/Section'
 import type { SearchPageContextType } from 'src/pages/s'
 import { useProductGalleryQuery } from 'src/sdk/product/useProductGalleryQuery'
 import type { SearchContentType } from 'src/server/cms'
+import storeConfig from 'discovery.config'
 
 import SearchPage from './SearchPage'
 
-function EmptySearch() {
+type EmptySearchProps = {
+  title?: string
+  term?: string
+}
+
+function EmptySearch({ title, term }: EmptySearchProps) {
   return (
     <Section
       className={`${ProductGalleryStyles.section} section-product-gallery`}
     >
-      <section data-testid="product-gallery" data-fs-product-listing>
+      <section
+        data-testid="product-gallery"
+        data-fs-product-listing
+        data-fs-search-loading
+      >
+        {title && (
+          <h1 data-fs-empty-search-title>
+            {title}: <strong>{term}</strong>
+          </h1>
+        )}
         <EmptyState title="" showLoader />
       </section>
     </Section>
@@ -51,8 +66,15 @@ export default function SearchWrapper({
     }
   )
 
+  const emptySearchProps = storeConfig.experimental.enableSearchSSR
+    ? {
+        title: storeConfig.seo.search.bodyH1 ?? 'Showing results for:',
+        term: serverData.searchTerm,
+      }
+    : {}
+
   if (isValidating || !pageProductGalleryData) {
-    return <EmptySearch />
+    return <EmptySearch {...emptySearchProps} />
   }
 
   // Redirect when there are registered Intelligent Search redirects on VTEX Admin
@@ -61,7 +83,7 @@ export default function SearchWrapper({
       shallow: true,
     })
 
-    return <EmptySearch />
+    return <EmptySearch {...emptySearchProps} />
   }
 
   const productGalleryProducts = pageProductGalleryData?.search?.products