feat(core): enable product image pagination#2863
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 0c468a1 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
jorgemoya
force-pushed
the
catalyst-1572-paginate-product-gallery
branch
from
2d943d7 to
cfe7338
Compare
.changeset/mighty-zebras-turn.md
Outdated
| @@ -0,0 +1,39 @@ | |||
| --- | |||
| "@bigcommerce/catalyst-core": patch | |||
There was a problem hiding this comment.
Should this be a minor?
There was a problem hiding this comment.
I think so, looks like it's changing the functionality a bit and is more of a feature.
|
Converting to draft to complete some UI changes. |
jorgemoya
force-pushed
the
catalyst-1572-paginate-product-gallery
branch
from
ebc3784 to
62f1093
Compare
| "embla-carousel-autoplay": "8.5.2", | ||
| "embla-carousel-fade": "8.5.2", | ||
| "embla-carousel-react": "8.5.2", | ||
| "embla-carousel": "9.0.0-rc01", |
There was a problem hiding this comment.
Any concerns over this using an rc version?
There was a problem hiding this comment.
I think it's a better idea to migrate to this new version which enables the new functionality over staying with the released version. I have also found 0 issues so far with it!
There was a problem hiding this comment.
RCs I think we are fine with, as long as we are not using canary/alphas/betas. RC's usually indicate that it's pretty stable and the API won't change usually.
|
Tested this locally and confirmed that it is calling getMoreImages when scrolling through the thumbnails! |
.changeset/mighty-zebras-turn.md
Outdated
| @@ -0,0 +1,39 @@ | |||
| --- | |||
| "@bigcommerce/catalyst-core": patch | |||
There was a problem hiding this comment.
I think so, looks like it's changing the functionality a bit and is more of a feature.
There was a problem hiding this comment.
Any way you can remove the @ts-expect-error's + // eslint-disable-next-line's?
| "embla-carousel-autoplay": "8.5.2", | ||
| "embla-carousel-fade": "8.5.2", | ||
| "embla-carousel-react": "8.5.2", | ||
| "embla-carousel": "9.0.0-rc01", |
There was a problem hiding this comment.
RCs I think we are fine with, as long as we are not using canary/alphas/betas. RC's usually indicate that it's pretty stable and the API won't change usually.
jorgemoya
force-pushed
the
catalyst-1572-paginate-product-gallery
branch
from
62f1093 to
2be6caa
Compare
|
@jorgemoya the lint command is failing. |
* feat(core): enable product image pagination * feat: infinite gallery, no thumbnail * fix: infinite scroll in thumbnail scroll * fix: retains scroll position * fix: infinite scroll fix * fix: change product image to 12 per page * fix: remove label prop * fix: update loading animation * fix: add accessbility * chore: update changeset * fix: merge steamable functions * fix: update changeset * fix: remove @ts-expect-errors * fix: non-nullable assertion
3 participants
What/Why?
Add pagination support for the product gallery. When a product has more images than the initial page load, new images will load as batches once the user reaches the end of the existing thumbnails. Thumbnail images now will display in horizontal direction in all viewport sizes.
Testing
Kapture.2026-02-04.at.13.43.01.mp4
Migration steps
Create the new server action file
core/app/[locale]/(default)/product/[slug]/_actions/get-more-images.tswith a GraphQL query to fetch additional product images with pagination.Update the product page data fetching in
core/app/[locale]/(default)/product/[slug]/page-data.tsto includepageInfo(withhasNextPageandendCursor) from the images query.Update
core/app/[locale]/(default)/product/[slug]/page.tsxto pass the new pagination props (pageInfo,productId,loadMoreAction) to theProductDetailcomponent.The
ProductGallerycomponent now accepts optional props for pagination:pageInfo?: { hasNextPage: boolean; endCursor: string | null }productId?: numberloadMoreAction?: ProductGalleryLoadMoreActionDue to the number of changes, it is recommended to use the PR as a reference for migration.