Merge 15a10ec into 848c079

CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Fixed
+- `itemPerPage` would not be taken into consideration if its value was greater than 5, as this limit was set in the `ShelfContent` component.
 
 ## [1.28.0] - 2019-08-16
 ### Added

README.md

@@ -134,7 +134,7 @@ For `RelatedProducts`:
 | `summary`         | `Object`  | Product Summary schema properties.                                                                                                                                                                                                                                                   | -             |
 | `gap`             | `Enum`    | Gap between items. Possible values: `ph0`, `ph3`,`ph5`, `ph7`.                                                                                                                                                                                                                       | `ph3`         |
 | `minItemsPerPage` | `Number`  | Minimum amount of slides to be on the screen, can be used to control how many itens will be displayed in the smallest screen size. This value can be a **Float**, which should be a multiple of 0.5 and would indicate that you want to show a "peek" of the next item in the Shelf. | `1`           |
-| `itemsPerPage`    | `Number`  | Maximum amount of slides to be on the screen. Can be used to control how many items will be displayed in the biggest screen size. This value needs to be an **Integer**.                                                                                                             | `5`           |
+| `itemsPerPage`    | `Number`  | Maximum amount of slides to be on the screen. Can be used to control how many items will be displayed in the biggest screen size. This value can be a **Float**, which should be a multiple of 0.5 and would indicate that you want to show a "peek" of the next item in the Shelf.                                                                                                             | `5`           |
 
 For `TabbedShelf`:
 

react/components/ShelfContent.js

@@ -86,6 +86,7 @@ class ShelfContent extends Component {
       gap,
       arrows,
       summary,
+      itemsPerPage,
       minItemsPerPage,
       paginationDotsVisibility,
       isMobile,
@@ -103,13 +104,14 @@ class ShelfContent extends Component {
       !products || !products.length ? Array(maxItems).fill(null) : products
 
     const roundedMinItems = this.roundHalf(minItemsPerPage)
+    const customPerPage = !isMobile && itemsPerPage
 
     return (
       <div className="flex justify-center">
         <SliderContainer className="w-100 mw9">
           <Slider
             minPerPage={roundedMinItems}
-            perPage={this.perPage}
+            perPage={customPerPage || this.perPage}
             onChangeSlide={this.handleChangeSlide}
             currentSlide={Math.ceil(currentSlide)}
             arrowRender={arrows && this.arrowRender}