feat: add gallery elementToScrollTo behavior

CHANGELOG.md

@@ -9,6 +9,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [3.127.1] - 2023-10-24
 
+### changed
+- Behavior `scrollToElement` added to Gallery component for PLP.
+- `lazyItemsRemaining` removed in Gallery component and GalleryLayout. `lazyRender` removed in GalleryLayoutRow component.
+
 ### Changed
 - Bump `vtex.store-resources` version.
 

react/Gallery.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import React, { Fragment, useEffect } from 'react'
 import { ProductList as ProductListStructuredData } from 'vtex.structured-data'
 
 import GalleryLayout from './GalleryLayout'
@@ -16,23 +16,56 @@
 const Gallery: React.FC<
   GalleryLegacyProps | GalleryLayoutPropsWithSlots
 > = props => {
-  if ('layouts' in props && props.layouts.length > 0) {
-    const {
-      layouts,
-      lazyItemsRemaining,
-      products,
-      showingFacets,
-      summary,
-      preferredSKU,
-      ...slots
-    } = props as GalleryLayoutPropsWithSlots
+  const { layouts, products, showingFacets, summary, preferredSKU, ...slots } =
+    props as GalleryLayoutPropsWithSlots
+
+  useEffect(() => {
+    const lastClickedProductId = localStorage.getItem('lastClickedProductId')
+    const isMobile = window.innerWidth <= 768
+
+    const delayedExecution = setTimeout(() => {
+      const scrollToElement = (elementId: string, offset: number) => {
+        const elementToScrollTo = document.getElementById(elementId)
+
+        if (elementToScrollTo) {
+          const rect = elementToScrollTo.getBoundingClientRect()
+          const isElementVisible =
+            rect.top >= 0 &&
+            rect.bottom <=
+              (window.innerHeight || document.documentElement.clientHeight)
+
+          if (!isElementVisible) {
+            elementToScrollTo.scrollIntoView({
+              behavior: 'auto',
+              block: 'center',
+              inline: 'nearest',
+            })
 
+            setTimeout(() => {
+              scrollToElement(elementId, offset)
+            }, 500)
+          }
+        }
+      }
+
+      const recursiveScroll = () => {
+        if (lastClickedProductId) {
+          scrollToElement(lastClickedProductId, isMobile ? -200 : -200)
+        }
+      }
+
+      recursiveScroll()
+    }, 1000)
+
+    return () => clearTimeout(delayedExecution)
+  }, [])
+
+  if ('layouts' in props && props.layouts.length > 0) {
     return (
       <Fragment>
         <ProductListStructuredData products={products} />
         <GalleryLayout
           layouts={layouts}
-          lazyItemsRemaining={lazyItemsRemaining}
           products={products}
           showingFacets={showingFacets}
           summary={summary}

react/GalleryLayout.tsx

@@ -2,11 +2,9 @@ import React, { useContext, useEffect, useMemo } from 'react'
 import type { ComponentType } from 'react'
 import classNames from 'classnames'
 import { ProductListContext } from 'vtex.product-list-context'
-import { Spinner } from 'vtex.styleguide'
 import { useCssHandles, applyModifiers } from 'vtex.css-handles'
 import { useResponsiveValue } from 'vtex.responsive-values'
 import type { MaybeResponsiveInput } from 'vtex.responsive-values'
-import { useRuntime } from 'vtex.render-runtime'
 import { SearchPageContext } from 'vtex.search-page-context'
 
 import GalleryLayoutRow from './components/GalleryLayoutRow'
@@ -20,8 +18,6 @@ import {
 import { useBreadcrumb } from './hooks/useBreadcrumb'
 import { useSearchTitle } from './hooks/useSearchTitle'
 
-const LAZY_RENDER_THRESHOLD = 2
-
 const CSS_HANDLES = ['gallery'] as const
 
 const { ProductListProvider } = ProductListContext
@@ -37,7 +33,6 @@ export type Slots = Record<string, ComponentType>
 
 export interface GalleryLayoutProps {
   layouts: LayoutOption[]
-  lazyItemsRemaining: number
   products: Product[]
   showingFacets: boolean
   summary: unknown
@@ -54,7 +49,6 @@ export type PreferredSKU =
 
 const GalleryLayout: React.FC<GalleryLayoutProps> = ({
   layouts,
-  lazyItemsRemaining,
   products,
   showingFacets,
   summary,
@@ -63,7 +57,6 @@ const GalleryLayout: React.FC<GalleryLayoutProps> = ({
 }) => {
   const { trackingId } = useContext(SettingsContext) || {}
   const handles = useCssHandles(CSS_HANDLES)
-  const { getSettings } = useRuntime()
   const { selectedGalleryLayout } = useSearchPageState()
   const searchPageStateDispatch = useSearchPageStateDispatch()
 
@@ -148,17 +141,13 @@ const GalleryLayout: React.FC<GalleryLayoutProps> = ({
     }
   )
 
-  const isLazyRenderEnabled =
-    getSettings('vtex.store')?.enableSearchRenderingOptimization
-
   return (
     <ProductListProvider listName={listName as string}>
       <div id="gallery-layout-container" className={galleryClasses}>
         {galleryRows.map((rowProducts, index) => (
           <GalleryLayoutRow
             key={`${currentLayoutOption.name}-${index}`}
             products={rowProducts}
-            lazyRender={!!isLazyRenderEnabled && index >= LAZY_RENDER_THRESHOLD}
             summary={summary}
             displayMode="normal"
             itemsPerRow={itemsPerRow}
@@ -169,18 +158,6 @@ const GalleryLayout: React.FC<GalleryLayoutProps> = ({
             GalleryItemComponent={slots[currentLayoutOption.component]}
           />
         ))}
-        {typeof lazyItemsRemaining === 'number' && lazyItemsRemaining > 0 && (
-          <div
-            style={{
-              width: '100%',
-              // Approximate number, just to add scroll leeway
-              height: 300 * Math.ceil(lazyItemsRemaining / itemsPerRow),
-            }}
-            className="flex justify-center pt10"
-          >
-            <Spinner />
-          </div>
-        )}
       </div>
       <ProductListEventCaller />
     </ProductListProvider>

react/components/GalleryLayoutItem.tsx

@@ -8,7 +8,7 @@
 import type { PreferredSKU } from '../GalleryLayout'
 
 interface GalleryLayoutItemProps {
   GalleryItemComponent: ComponentType<any>
   item: Product
   displayMode: string
   summary: unknown
@@ -44,6 +44,7 @@
       position,
       list: listName,
     })
+    localStorage.setItem('lastClickedProductId', product.productId)
   }, [
     product,
     push,

react/components/GalleryLayoutRow.tsx

@@ -15,7 +15,6 @@ interface GalleryLayoutRowProps {
   displayMode: string
   GalleryItemComponent: ComponentType
   itemsPerRow: number
-  lazyRender: boolean
   products: Product[]
   summary: unknown
   rowIndex: number
@@ -28,7 +27,6 @@ const GalleryLayoutRow: React.FC<GalleryLayoutRowProps> = ({
   GalleryItemComponent,
   displayMode,
   itemsPerRow,
-  lazyRender,
   products,
   summary,
   currentLayoutName,
@@ -44,7 +42,6 @@ const GalleryLayoutRow: React.FC<GalleryLayoutRowProps> = ({
   }
 
   const { hasBeenViewed, dummyElement } = useRenderOnView({
-    lazyRender,
     offset: 900,
   })
 
@@ -68,6 +65,7 @@ const GalleryLayoutRow: React.FC<GalleryLayoutRowProps> = ({
               ]),
               'pa4'
             )}
+            id={product.productId}
           >
             <GalleryItem
               GalleryItemComponent={GalleryItemComponent}