Add "infinite" property to make the related producs shelf able to be …

…not infinite
vtex-apps · Sep 26, 2024 · 1535601 · 1535601
1 parent fe7faeb
commit 1535601
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/react/components/ProductList.js b/react/components/ProductList.js
@@ -38,6 +38,7 @@ const ProductList = ({
   paginationDotsVisibility,
   navigationStep: navigationStepProp,
   trackingId,
+  infinite,
 }) => {
   const handles = useCssHandles(CSS_HANDLES)
   const navigationStep = Number.isNaN(parseInt(navigationStepProp, 10))
@@ -77,6 +78,7 @@ const ProductList = ({
             minItemsPerPage={minItemsPerPage}
             paginationDotsVisibility={paginationDotsVisibility}
             listName={listName}
+            infinite={infinite}
           />
         )}
       </ReactResizeDetector>
@@ -95,6 +97,7 @@ ProductList.defaultProps = {
   showTitle: true,
   titleText: null,
   isMobile: false,
+  infinite: true,
 }
 
 ProductList.propTypes = {
@@ -112,6 +115,7 @@ ProductList.propTypes = {
     'mobileOnly',
   ]),
   trackingId: PropTypes.string,
+  infinite: PropTypes.bool,
   ...productListSchemaPropTypes,
 }
 

diff --git a/react/components/ShelfContent.js b/react/components/ShelfContent.js
@@ -144,6 +144,7 @@ class ShelfContent extends Component {
       minItemsPerPage,
       paginationDotsVisibility,
       listName,
+      infinite,
     } = this.props
 
     const { currentSlide } = this.state
@@ -170,7 +171,7 @@ class ShelfContent extends Component {
           className={`${cssHandles.sliderContainer} w-100 mw9`}
         >
           <Slider
-            loop
+            loop={infinite}
             easing="ease"
             duration={500}
             minPerPage={roundedMinItems}
@@ -257,6 +258,8 @@ ShelfContent.propTypes = {
   gap: shelfContentPropTypes.gap,
   /** Title of the shelf */
   listName: shelfContentPropTypes.listName,
+  /** Is infinite */
+  infinite: shelfContentPropTypes.infinite,
 }
 
 export default withCssHandles(CSS_HANDLES)(ShelfContent)
diff --git a/react/utils/propTypes.js b/react/utils/propTypes.js
@@ -107,4 +107,6 @@ export const shelfContentPropTypes = {
   gap: PropTypes.oneOf(getGapPaddingValues()),
   /** Title of the shelf */
   listName: PropTypes.string.isRequired,
+  /** Is infinite */
+  infinite: PropTypes.bool,
 }