-
Notifications
You must be signed in to change notification settings - Fork 284
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.
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
Add infinite scroll example #1697
Conversation
a9d408f
to
e4059de
Compare
e4059de
to
cba16fc
Compare
cba16fc
to
1bc6749
Compare
1bc6749
to
e30000a
Compare
e30000a
to
02cc172
Compare
02cc172
to
160eef9
Compare
2091942
to
4492c8d
Compare
examples/infinite-scroll/README.md
Outdated
## Instructions | ||
|
||
### 1. Link your store to inject the required environment variables | ||
|
||
```bash | ||
h2 link | ||
``` | ||
|
||
### 2. Edit the route loader | ||
|
||
In `app/routes/collections.$handle.tsx`, update the `pageBy` parameter passed to the `getPaginationVariables` function call to customize how many products to load at a time. | ||
|
||
```ts | ||
const paginationVariables = getPaginationVariables(request, { | ||
pageBy: 8, | ||
}); | ||
``` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
## Instructions | |
### 1. Link your store to inject the required environment variables | |
```bash | |
h2 link | |
``` | |
### 2. Edit the route loader | |
In `app/routes/collections.$handle.tsx`, update the `pageBy` parameter passed to the `getPaginationVariables` function call to customize how many products to load at a time. | |
```ts | |
const paginationVariables = getPaginationVariables(request, { | |
pageBy: 8, | |
}); | |
``` | |
## Instructions (optional) | |
### 1. Link your store to inject the required environment variables | |
```bash | |
h2 link |
2. Change number of products load at once
In app/routes/collections.$handle.tsx
, update the pageBy
parameter passed to the getPaginationVariables
function call to customize how many products to load at a time.
const paginationVariables = getPaginationVariables(request, {
pageBy: 8,
});
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Honestly, I'm thinking both of the steps are optional 🤔
4492c8d
to
11c81b7
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🎩 and the example looks great :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Couple optional suggestions but this looks awesome
|
||
### 1. Link your store to inject the required environment variables | ||
|
||
```bash |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We could make this an optional step, as Mock Shop only has 23 products (@michenly 's comment on this was deleted when I was writing this reply)
11c81b7
to
041e620
Compare
@blittle I just merged my other example that re-order all example to be alphabetical so there are some conflicts. Hope those wont ever happen again now things are in order thou 🙏 |
041e620
to
e163165
Compare
examples/infinite-scroll/README.md
Outdated
|
||
| File | Description | | ||
| -------------------------------------------------------------------------- | --------------------------- | | ||
| [`app/routes/collections.$handle.tsx`](app/routes/collections.$handle.tsx) | The product collection page | |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: missing the new
emoji
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's not new though, it's just modified 🤔
e163165
to
ed5ee35
Compare
HOW to test your changes?
npm install && npm run build
at the root.cd examples/infinite-scroll && npm run dev
Post-merge steps
Checklist