shop: show twelve cards at a time with a Show more button - #31
Merged
Conversation
Aswincloud-Bot
approved these changes
Sep 3, 2026
Aswincloud-Bot
left a comment
Aswincloud-Bot
left a comment
There was a problem hiding this comment.
Auto-approved: @Aswinmcw is a member of @Aswincloud/admins.
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
3d-printing | b54243f | Commit Preview URL Branch Preview URL |
Sep 03 2026, 09:47 AM |
github-merge-queue
Bot
removed this pull request from the merge queue due to a conflict with the base branch
Sep 3, 2026
The grid rendered every product at once — 80 cards, a ~9,000px stretch of a phone screen — and buried How It Works, the quote form and the footer under the catalogue. Twelve at a time is three desktop rows or six on a phone; the button says how many are left and how many are shown. - renderProducts() slices to shopLimit; a change of filter or search resets to the first page (keyed on the filter state, since renderProducts has a dozen callers). "Show more" focuses the first newly-added card. - openSharedProduct() extends the page to reach a /p/<slug> handoff that sits past the first twelve rather than doing nothing. - The Worker renders the same first page: cards past SHOP_PAGE carry .is-overflow (display: none) so every product link stays in the HTML for crawlers, and #shopMore is pre-filled so the first paint matches what main.js redraws. Co-authored-by: Cursor <cursoragent@cursor.com>
Aswinmcw
force-pushed
the
feat/shop-grid-show-more
branch
from
September 3, 2026 09:47
b6fb895 to
b54243f
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The shop grid rendered all 80 products at once, which on a 390px phone is a ~9,000px block that pushed How It Works, the quote form and the footer far below anything a visitor would scroll to. It now shows 12 (three desktop rows / six phone rows) and a Show N more button with "Showing 12 of 80".
renderProducts()slices toshopLimit. The limit resets to the first page whenever the category, price band or search changes (keyed on the filter state rather than reset by every caller).openSharedProduct()(the/p/<slug>→ homepage handoff) extends the page far enough to reach the requested card instead of silently doing nothing when it is past the first twelve.rewriteHome()renders the identical first page: every card is still in the HTML for crawlers (that is how they reach all product pages), but cards pastSHOP_PAGEcarry.is-overflow(display: none) and#shopMoreis prefilled, so the first paint and the JS redraw agree and nothing shifts.SHOP_PAGElives in bothsrc/seo.jsandmain.jsand must match; the comments say so.Measured locally on a 390px viewport: the shop section went from ~9,000px to 3,207px.
Test plan
npm testgreenwrangler dev: 12 cards after load → 24 after Show more, focus on first new card; selecting a category resets to 12 with "Show 6 more / Showing 12 of 18"; back to All resets; no console errors; no sideways layout on mobile/shows.product-card.is-overflowfrom the 13th card and a prefilled#shopMoreMade with Cursor