diff --git a/CHANGELOG.md b/CHANGELOG.md index 81d59ff0..3195e2e8 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/README.md b/README.md index c04318f0..b92d521f 100644 --- a/README.md +++ b/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`: diff --git a/react/components/ShelfContent.js b/react/components/ShelfContent.js index 69ae36c4..a9c2885a 100644 --- a/react/components/ShelfContent.js +++ b/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 (