Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix itemsPerPage not being taken into consideration when greater than 5 #176

Merged
merged 3 commits into from
Aug 28, 2019
Merged

Fix itemsPerPage not being taken into consideration when greater than 5 #176

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
56b50e3
Use user-provided `itemsPerPage` on desktop
victorhmp Aug 27, 2019
49985a7
Update README
victorhmp Aug 27, 2019
15a10ec
Update CHANGELOG
victorhmp Aug 27, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`:

Expand Down
4 changes: 3 additions & 1 deletion react/components/ShelfContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ class ShelfContent extends Component {
gap,
arrows,
summary,
itemsPerPage,
minItemsPerPage,
paginationDotsVisibility,
isMobile,
Expand All @@ -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}
Expand Down