@faststore/core 3.77.2 → 3.78.0

package/src/components/ui/ProductGallery/ProductGallery.tsx

@@ -1,6 +1,6 @@
 import { NextSeo } from 'next-seo'
 import dynamic from 'next/dynamic'
-import { Suspense, lazy, type MouseEvent } from 'react'
+import { Suspense, lazy, useState, type MouseEvent } from 'react'
 
 import { useSearch } from '@faststore/sdk'
 import { useUI } from '@faststore/ui'
@@ -22,6 +22,9 @@ import { useDelayedPagination } from 'src/sdk/search/useDelayedPagination'
 import { useFilter } from 'src/sdk/search/useFilter'
 import useScreenResize from 'src/sdk/ui/useScreenResize'
 
+import styles from '../../sections/ProductGallery/section.module.scss'
+import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
+
 const ProductGalleryPage = lazy(() => import('./ProductGalleryPage'))
 const FilterSkeleton = dynamic(
   () =>
@@ -60,6 +63,29 @@ export interface ProductGalleryProps {
       alt: string
     }
   }
+  productComparison?: {
+    enabled?: boolean
+    labels?: {
+      compareButton: string
+      clearSelectionButton: string
+      selectionWarning: string
+      sidebarComponent?: {
+        title: string
+        sortLabel: string
+        filterLabel: string
+        productNameFilterLabel: string
+        preferencesLabel: string
+        toggleFieldLabel: string
+        cartButtonLabel: string
+        priceLabel: string
+        priceWithTaxLabel: string
+      }
+      technicalInformation?: {
+        title: string
+        description: string
+      }
+    }
+  }
   itemsPerPage?: number
   loadMorePageButton?: {
     label?: string
@@ -82,6 +108,7 @@ function ProductGallery({
   loadMorePageButton,
   sortBySelector,
   productCard,
+  productComparison,
 }: ProductGalleryProps) {
   const {
     FilterButtonSkeleton,
@@ -92,8 +119,12 @@ function ProductGallery({
     PrevIcon,
     ResultsCountSkeleton,
     SortSkeleton,
+    ToggleField,
+    ProductComparison,
+    ProductComparisonToolbar,
     __experimentalFilterDesktop: FilterDesktop,
     __experimentalFilterSlider: FilterSlider,
+    __experimentalProductComparisonSidebar: ProductComparisonSidebar,
   } = useOverrideComponents<'ProductGallery'>()
 
   const { openFilter, filter: displayFilter } = useUI()
@@ -102,11 +133,15 @@ function ProductGallery({
   const data = context?.data
   const facets = useDelayedFacets(data) ?? []
   const { next, prev } = useDelayedPagination(totalCount)
-  const { isDesktop } = useScreenResize()
+
+  const [showComparisonProducts, setShowComparisonProducts] =
+    useState<boolean>(false)
 
   useProductsPrefetch(prev ? prev.cursor : null)
   useProductsPrefetch(next ? next.cursor : null)
 
+  const { isDesktop } = useScreenResize()
+
   const hasFacetsLoaded = Boolean(data?.search?.facets)
   const hasProductsLoaded = Boolean(data?.search?.products)
   const initialSelectedFacets =
@@ -125,184 +160,227 @@ function ProductGallery({
           </h1>
         </header>
       )}
-      <div
-        data-fs-product-listing-content-grid
-        data-fs-content="product-gallery"
-      >
-        {isDesktop && (
-          <div data-fs-product-listing-filters>
-            <FilterSkeleton loading={!hasFacetsLoaded}>
+      <ProductComparison.Component>
+        <div
+          data-fs-product-listing-content-grid
+          data-fs-content="product-gallery"
+        >
+          {isDesktop && (
+            <div data-fs-product-listing-filters>
+              <FilterSkeleton loading={!hasFacetsLoaded}>
+                {hasFacetsLoaded && facets?.length > 0 && (
+                  <div className="hidden-mobile">
+                    <FilterDesktop.Component
+                      {...FilterDesktop.props}
+                      {...filter}
+                      title={filterCmsData?.title}
+                    />
+                  </div>
+                )}
+              </FilterSkeleton>
+            </div>
+          )}
+          {!isDesktop && displayFilter && (
+            <div data-fs-product-listing-filters>
+              <FilterSlider.Component
+                {...FilterSlider.props}
+                {...filter}
+                title={filterCmsData?.title}
+                clearButtonLabel={filterCmsData?.mobileOnly?.clearButtonLabel}
+                applyButtonLabel={filterCmsData?.mobileOnly?.applyButtonLabel}
+              />
+            </div>
+          )}
+          <div data-fs-product-listing-results-count data-count={totalCount}>
+            <ResultsCountSkeleton.Component
+              data-fs-product-listing-results-count-skeleton
+              size={{ width: '100%', height: '1.5rem' }}
+              {...ResultsCountSkeleton.props}
+              // Dynamic props shouldn't be overridable
+              // This decision can be reviewed later if needed
+              loading={!hasProductsLoaded}
+            >
+              <h2 data-testid="total-product-count">
+                {totalCount} {totalCountLabel}
+              </h2>
+            </ResultsCountSkeleton.Component>
+            {productComparison?.enabled && (
+              <ToggleField.Component
+                id="toggle-field-comparison"
+                label={productComparison?.labels?.compareButton}
+                checked={showComparisonProducts}
+                onChange={() =>
+                  setShowComparisonProducts(!showComparisonProducts)
+                }
+                {...ToggleField.props}
+              />
+            )}
+          </div>
+
+          <div data-fs-product-listing-sort>
+            <SortSkeleton.Component
+              data-fs-product-listing-sort-skeleton
+              size={{ width: 'auto', height: '1.5rem' }}
+              {...SortSkeleton.props}
+              // Dynamic props shouldn't be overridable
+              // This decision can be reviewed later if needed
+              loading={!hasProductsLoaded}
+            >
+              <Sort
+                label={sortBySelector?.label}
+                options={sortBySelector?.options}
+              />
+            </SortSkeleton.Component>
+            <FilterButtonSkeleton.Component
+              data-fs-product-listing-filter-button-skeleton
+              size={{ width: '6rem', height: '1.5rem' }}
+              {...FilterButtonSkeleton.props}
+              // Dynamic props shouldn't be overridable
+              // This decision can be reviewed later if needed
+              loading={!hasFacetsLoaded}
+            >
               {hasFacetsLoaded && facets?.length > 0 && (
-                <div className="hidden-mobile">
-                  <FilterDesktop.Component
-                    {...FilterDesktop.props}
-                    {...filter}
-                    title={filterCmsData?.title}
-                  />
-                </div>
+                <MobileFilterButton.Component
+                  variant="tertiary"
+                  data-testid="open-filter-button"
+                  icon={
+                    <FilterIcon.Component
+                      width={16}
+                      height={16}
+                      {...FilterIcon.props}
+                      name={
+                        filterCmsData?.mobileOnly?.filterButton?.icon?.icon ??
+                        FilterIcon.props.name
+                      }
+                      aria-label={
+                        filterCmsData?.mobileOnly?.filterButton?.icon?.alt ??
+                        FilterIcon.props['aria-label']
+                      }
+                    />
+                  }
+                  iconPosition="left"
+                  {...MobileFilterButton.props}
+                  // Dynamic props shouldn't be overridable
+                  // This decision can be reviewed later if needed
+                  onClick={openFilter}
+                >
+                  {filterCmsData?.mobileOnly?.filterButton?.label}
+                </MobileFilterButton.Component>
               )}
-            </FilterSkeleton>
+            </FilterButtonSkeleton.Component>
           </div>
-        )}
-        {!isDesktop && displayFilter && (
-          <div data-fs-product-listing-filters>
-            <FilterSlider.Component
-              {...FilterSlider.props}
-              {...filter}
-              title={filterCmsData?.title}
-              clearButtonLabel={filterCmsData?.mobileOnly?.clearButtonLabel}
-              applyButtonLabel={filterCmsData?.mobileOnly?.applyButtonLabel}
-            />
-          </div>
-        )}
-        <div data-fs-product-listing-results-count data-count={totalCount}>
-          <ResultsCountSkeleton.Component
-            data-fs-product-listing-results-count-skeleton
-            size={{ width: '100%', height: '1.5rem' }}
-            {...ResultsCountSkeleton.props}
-            // Dynamic props shouldn't be overridable
-            // This decision can be reviewed later if needed
-            loading={!hasProductsLoaded}
-          >
-            <h2 data-testid="total-product-count">
-              {totalCount} {totalCountLabel}
-            </h2>
-          </ResultsCountSkeleton.Component>
-        </div>
-        <div data-fs-product-listing-sort>
-          <SortSkeleton.Component
-            data-fs-product-listing-sort-skeleton
-            size={{ width: 'auto', height: '1.5rem' }}
-            {...SortSkeleton.props}
-            // Dynamic props shouldn't be overridable
-            // This decision can be reviewed later if needed
-            loading={!hasProductsLoaded}
-          >
-            <Sort
-              label={sortBySelector?.label}
-              options={sortBySelector?.options}
-            />
-          </SortSkeleton.Component>
-          <FilterButtonSkeleton.Component
-            data-fs-product-listing-filter-button-skeleton
-            size={{ width: '6rem', height: '1.5rem' }}
-            {...FilterButtonSkeleton.props}
-            // Dynamic props shouldn't be overridable
-            // This decision can be reviewed later if needed
-            loading={!hasFacetsLoaded}
-          >
-            {hasFacetsLoaded && facets?.length > 0 && (
-              <MobileFilterButton.Component
-                variant="tertiary"
-                data-testid="open-filter-button"
-                icon={
-                  <FilterIcon.Component
-                    width={16}
-                    height={16}
-                    {...FilterIcon.props}
-                    name={
-                      filterCmsData?.mobileOnly?.filterButton?.icon?.icon ??
-                      FilterIcon.props.name
-                    }
-                    aria-label={
-                      filterCmsData?.mobileOnly?.filterButton?.icon?.alt ??
-                      FilterIcon.props['aria-label']
-                    }
-                  />
-                }
-                iconPosition="left"
-                {...MobileFilterButton.props}
-                // Dynamic props shouldn't be overridable
-                // This decision can be reviewed later if needed
-                onClick={openFilter}
-              >
-                {filterCmsData?.mobileOnly?.filterButton?.label}
-              </MobileFilterButton.Component>
+          <div data-fs-product-listing-results>
+            {/* Add link to previous page. This helps on SEO */}
+            {!!prev && (
+              <div data-fs-product-listing-pagination="top">
+                <NextSeo
+                  additionalLinkTags={[{ rel: 'prev', href: prev.link }]}
+                />
+                <LinkButtonPrev.Component
+                  rel="prev"
+                  variant="secondary"
+                  iconPosition="left"
+                  icon={
+                    <PrevIcon.Component
+                      width={16}
+                      height={16}
+                      weight="bold"
+                      {...PrevIcon.props}
+                      name={
+                        previousPageButton?.icon?.icon ?? PrevIcon.props.name
+                      }
+                      aria-label={
+                        previousPageButton?.icon?.alt ??
+                        previousPageButton?.label ??
+                        PrevIcon.props['aria-label']
+                      }
+                    />
+                  }
+                  {...LinkButtonPrev.props}
+                  // Dynamic props shouldn't be overridable
+                  // This decision can be reviewed later if needed
+                  onClick={(e: MouseEvent<HTMLElement>) => {
+                    e.currentTarget.blur()
+                    e.preventDefault()
+                    addPrevPage()
+                  }}
+                  href={prev.link}
+                >
+                  {previousPageButton?.label}
+                </LinkButtonPrev.Component>
+              </div>
             )}
-          </FilterButtonSkeleton.Component>
-        </div>
-        <div data-fs-product-listing-results>
-          {/* Add link to previous page. This helps on SEO */}
-          {prev !== false && (
-            <div data-fs-product-listing-pagination="top">
-              <NextSeo
-                additionalLinkTags={[{ rel: 'prev', href: prev.link }]}
-              />
-              <LinkButtonPrev.Component
-                rel="prev"
-                variant="secondary"
-                iconPosition="left"
-                icon={
-                  <PrevIcon.Component
-                    width={16}
-                    height={16}
-                    weight="bold"
-                    {...PrevIcon.props}
-                    name={previousPageButton?.icon?.icon ?? PrevIcon.props.name}
-                    aria-label={
-                      previousPageButton?.icon?.alt ??
-                      previousPageButton?.label ??
-                      PrevIcon.props['aria-label']
-                    }
+            {/* Render ALL products */}
+            {hasProductsLoaded ? (
+              <Suspense fallback={GalleryPageSkeleton}>
+                {pages.map((page) => (
+                  <ProductGalleryPage
+                    key={`gallery-page-${page}`}
+                    page={page}
+                    title={title}
+                    productCard={productCard}
+                    itemsPerPage={itemsPerPage}
+                    firstPage={pages[0]}
+                    shouldShowComparison={showComparisonProducts}
+                    compareLabel={productComparison?.labels?.compareButton}
                   />
-                }
-                {...LinkButtonPrev.props}
-                // Dynamic props shouldn't be overridable
-                // This decision can be reviewed later if needed
-                onClick={(e: MouseEvent<HTMLElement>) => {
-                  e.currentTarget.blur()
-                  e.preventDefault()
-                  addPrevPage()
-                }}
-                href={prev.link}
-              >
-                {previousPageButton?.label}
-              </LinkButtonPrev.Component>
-            </div>
-          )}
-          {/* Render ALL products */}
-          {hasProductsLoaded ? (
-            <Suspense fallback={GalleryPageSkeleton}>
-              {pages.map((page) => (
-                <ProductGalleryPage
-                  key={`gallery-page-${page}`}
-                  page={page}
-                  title={title}
-                  productCard={productCard}
-                  itemsPerPage={itemsPerPage}
-                  firstPage={pages[0]}
+                ))}
+              </Suspense>
+            ) : (
+              GalleryPageSkeleton
+            )}
+            {/* Add link to next page. This helps on SEO */}
+            {next !== false && (
+              <div data-fs-product-listing-pagination="bottom">
+                <NextSeo
+                  additionalLinkTags={[{ rel: 'next', href: next.link }]}
                 />
-              ))}
-            </Suspense>
-          ) : (
-            GalleryPageSkeleton
-          )}
-          {/* Add link to next page. This helps on SEO */}
-          {next !== false && (
-            <div data-fs-product-listing-pagination="bottom">
-              <NextSeo
-                additionalLinkTags={[{ rel: 'next', href: next.link }]}
-              />
-              <LinkButtonNext.Component
-                testId="show-more"
-                rel="next"
-                variant="secondary"
-                {...LinkButtonNext.props}
-                // Dynamic props shouldn't be overridable
-                // This decision can be reviewed later if needed
-                onClick={(e: MouseEvent<HTMLElement>) => {
-                  e.currentTarget.blur()
-                  e.preventDefault()
-                  addNextPage()
-                }}
-                href={next.link}
-              >
-                {loadMorePageButton?.label}
-              </LinkButtonNext.Component>
-            </div>
-          )}
+                <LinkButtonNext.Component
+                  testId="show-more"
+                  rel="next"
+                  variant="secondary"
+                  {...LinkButtonNext.props}
+                  // Dynamic props shouldn't be overridable
+                  // This decision can be reviewed later if needed
+                  onClick={(e: MouseEvent<HTMLElement>) => {
+                    e.currentTarget.blur()
+                    e.preventDefault()
+                    addNextPage()
+                  }}
+                  href={next.link}
+                >
+                  {loadMorePageButton?.label}
+                </LinkButtonNext.Component>
+              </div>
+            )}
+          </div>
         </div>
-      </div>
+        {showComparisonProducts && (
+          <>
+            <ProductComparisonSidebar.Component
+              direction="rightSide"
+              size="partial"
+              priceFormatter={useFormattedPrice}
+              technicalInformation={{
+                title: productComparison?.labels?.technicalInformation?.title,
+                description:
+                  productComparison?.labels?.technicalInformation?.description,
+              }}
+              overlayProps={{ className: styles.section }}
+              {...productComparison.labels.sidebarComponent}
+            />
+            <ProductComparisonToolbar.Component
+              selectionWarningLabel={
+                productComparison?.labels?.selectionWarning
+              }
+              clearSelectionButtonLabel={
+                productComparison?.labels?.clearSelectionButton
+              }
+              compareButtonLabel={productComparison?.labels?.compareButton}
+            />
+          </>
+        )}
+      </ProductComparison.Component>
     </section>
   )
 }

package/src/components/ui/ProductGallery/ProductGalleryPage.tsx

@@ -14,6 +14,8 @@ interface Props {
   >
   itemsPerPage: number
   firstPage: number
+  shouldShowComparison?: boolean
+  compareLabel?: string
 }
 
 function ProductGalleryPage({
@@ -22,6 +24,8 @@ function ProductGalleryPage({
   productCard,
   itemsPerPage,
   firstPage,
+  shouldShowComparison,
+  compareLabel,
 }: Props) {
   const { data } = useGalleryPage(page)
 
@@ -35,6 +39,8 @@ function ProductGalleryPage({
       title={title}
     >
       <ProductGrid
+        shouldShowComparison={shouldShowComparison}
+        compareLabel={compareLabel}
         products={products}
         page={page}
         pageSize={itemsPerPage}

package/src/pages/s.tsx

@@ -98,8 +98,9 @@ function generateSEOData(storeConfig: StoreConfig, searchTerm?: string) {
 function Page({
   page: searchContentType,
   globalSections: globalSectionsProp,
-  searchTerm,
+  searchTerm: serverSearchTerm,
 }: SearchPageProps) {
+  const router = useRouter()
   const { sections: globalSections, settings: globalSettings } =
     globalSectionsProp ?? {}
   const { settings } = searchContentType
@@ -109,6 +110,11 @@ function Page({
   })
 
   const itemsPerPage = settings?.productGallery?.itemsPerPage ?? ITEMS_PER_PAGE
+  const searchTerm =
+    serverSearchTerm ??
+    (router.query?.q as string) ??
+    searchParams.term ??
+    undefined
 
   if (!searchParams) {
     return null
@@ -144,10 +150,7 @@ function Page({
       <SearchWrapper
         itemsPerPage={itemsPerPage}
         searchContentType={searchContentType}
-        serverData={{
-          title: seoData.title,
-          searchTerm: searchTerm ?? searchParams.term ?? undefined,
-        }}
+        serverData={{ title: seoData.title, searchTerm }}
         globalSections={globalSections}
         globalSettings={globalSettings}
       />