feat: add h1 in EmptySearch component (#2659)

## What's the purpose of this pull request? Render a `<h1 />` tag in server side. ![Captura de Tela 2025-01-31 às 10 16 39](https://github.com/user-attachments/assets/a67dd030-5d15-455a-82e8-1802a1c2a315) ## How it works? If the flag `enableSearchSSR` is enabled, the server side rendering will return a `<h1 />` tag with the search term.
vtex · Feb 3, 2025 · 76088bb · 76088bb
1 parent c640a78
commit 76088bb
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 4 deletions.
diff --git a/packages/core/discovery.config.default.js b/packages/core/discovery.config.default.js
@@ -13,6 +13,7 @@ module.exports = {
       descriptionTemplate: '%s: Search results description',
       noIndex: true,
       noFollow: 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
@@ -13,6 +13,23 @@
       }
     }
 
+    [data-fs-search-loading] {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      h1 {
+        font-size: var(--fs-text-size-4);
+
+        @include media(">=tablet") { padding-top: var(--fs-spacing-4); font-size: var(--fs-text-size-5); }
+
+        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