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.

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

Merged
merged 1 commit into from
Feb 8, 2024
Merged

Add infinite scroll example #1697

merged 1 commit into from
Feb 8, 2024

Conversation

blittle
Copy link
Contributor

@blittle blittle commented Jan 26, 2024

HOW to test your changes?

  1. Make sure to npm install && npm run build at the root.
  2. Start the app: cd examples/infinite-scroll && npm run dev
  3. Navigate to a collection: http://localhost:3000/collections/men
  4. Scroll down the page, and make sure that new products automatically load.

Post-merge steps

Checklist

  • I've read the Contributing Guidelines
  • I've considered possible cross-platform impacts (Mac, Linux, Windows)
  • I've added a changeset if this PR contains user-facing or noteworthy changes
  • I've added tests to cover my changes
  • I've added or updated the documentation

package-lock.json Outdated Show resolved Hide resolved
Comment on lines 23 to 64
## 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,
});
```
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
## 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,
});

Copy link
Contributor Author

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 🤔

Copy link
Contributor

@michenly michenly left a 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 :)

Copy link
Member

@benjaminsehl benjaminsehl left a 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

examples/README.md Outdated Show resolved Hide resolved
examples/infinite-scroll/README.md Outdated Show resolved Hide resolved

### 1. Link your store to inject the required environment variables

```bash
Copy link
Member

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)

@michenly
Copy link
Contributor

@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 🙏


| File | Description |
| -------------------------------------------------------------------------- | --------------------------- |
| [`app/routes/collections.$handle.tsx`](app/routes/collections.$handle.tsx) | The product collection page |
Copy link
Contributor

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

Copy link
Contributor Author

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 🤔

@blittle blittle force-pushed the bl-inf-scroll-example branch from e163165 to ed5ee35 Compare February 8, 2024 21:42
@blittle blittle merged commit 931a040 into main Feb 8, 2024
9 checks passed
@blittle blittle deleted the bl-inf-scroll-example branch February 8, 2024 21:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants