feat: add gallery elementToScrollTo behavior

CHANGELOG.md

@@ -9,6 +9,9 @@ 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.
+
 ### 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,17 +16,58 @@
 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,
+    lazyItemsRemaining,
+    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} />

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

@@ -68,6 +68,7 @@ const GalleryLayoutRow: React.FC<GalleryLayoutRowProps> = ({
               ]),
               'pa4'
             )}
+            id={product.productId}
           >
             <GalleryItem
               GalleryItemComponent={GalleryItemComponent}