From 484299014738c29fcf602e7fa424def4958646b5 Mon Sep 17 00:00:00 2001
From: Pedro Soares <pedro.soares@vtex.com>
Date: Thu, 30 Jan 2025 15:00:08 -0300
Subject: [PATCH] feat: add h1 in EmptySearch component
---
.../ProductGallery/section.module.scss | 20 ++++++++++
.../templates/SearchPage/SearchWrapper.tsx | 38 +++++++++++++++++--
2 files changed, 54 insertions(+), 4 deletions(-)
diff --git a/packages/core/src/components/sections/ProductGallery/section.module.scss b/packages/core/src/components/sections/ProductGallery/section.module.scss
index 10300eff45..a2ad7be024 100644
--- 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
index dd2a5cc309..58d67f6c6f 100644
--- a/packages/core/src/components/templates/SearchPage/SearchWrapper.tsx
+++ b/packages/core/src/components/templates/SearchPage/SearchWrapper.tsx
@@ -7,15 +7,29 @@ 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
+}
+
+function EmptySearch({ title }: 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>
+ Resultados para: <strong>{title}</strong>
+ </h1>
+ )}
<EmptyState title="" showLoader />
</section>
</Section>
@@ -52,7 +66,15 @@ export default function SearchWrapper({
)
if (isValidating || !pageProductGalleryData) {
- return <EmptySearch />
+ return (
+ <EmptySearch
+ title={
+ storeConfig.experimental.enableSearchSSR
+ ? serverData.searchTerm
+ : undefined
+ }
+ />
+ )
}
// Redirect when there are registered Intelligent Search redirects on VTEX Admin
@@ -61,7 +83,15 @@ export default function SearchWrapper({
shallow: true,
})
- return <EmptySearch />
+ return (
+ <EmptySearch
+ title={
+ storeConfig.experimental.enableSearchSSR
+ ? serverData.searchTerm
+ : undefined
+ }
+ />
+ )
}
const productGalleryProducts = pageProductGalleryData?.search?.products