feat(shop): collections, search, policies, PDP gallery, qty, cart drawer, discounts

[tannerlinsley]

Summary

Brings the shop to Shopify-theme parity. Everything on the "standard storefront" checklist that was missing after the initial ship is now in.

New routes

• /shop/collections/$handle — collection listings with sort + Load More pagination, SEO meta, breadcrumbs
• /shop/pages/$handle — renders Shopify-admin-managed pages (policies, about, etc.)
• /shop/search — Storefront API search with paginated results

Listings

• Sort dropdown on /shop and each collection (URL-driven; default sort uses a clean URL)
• Load More cursor pagination — SSR'd first page, client-accumulated pages after
• Responsive images via a shared ProductImage primitive (srcset 1x/1.5x/2x/3x via Shopify CDN transforms, correct sizes hint, lazy past the fold)

PDP

• Image gallery with thumbnails + active state; selected variant auto-focuses its own image
• Quantity stepper wired to Add to cart
• Variant availability awareness — unavailable option combos show a line-through + dim treatment
• JSON-LD Product / AggregateOffer schema for rich search results
• Per-product OG image via Shopify CDN (1200×630 jpg, center crop)
• Breadcrumbs

Cart

• Discount code apply/remove with invalid-code detection (Shopify silently drops unknown codes, so the server fn re-checks applicable and surfaces a user-facing error)
• Slide-in cart drawer (Radix Dialog) controlled by a zustand store. "Add to cart" on the PDP opens the drawer instead of redirecting, so the user can keep browsing
• Navbar cart button now opens the drawer instead of navigating — visibility rules unchanged (always on /shop/*, site-wide when cart has items)
• Cart page gains breadcrumbs + discount UI

Sidebar

• Search link, Info section with Shipping / Returns / Privacy / Terms
• Shopify Collections still rendered live from the parent /shop loader

New shared components under src/components/shop/

• ProductCard (handles "from $X" ranges + compare-at strike-through)
• ProductImage (srcset, no hydrogen-react Provider needed)
• Breadcrumbs
• CartDrawer
• cartDrawerStore (zustand)

Queries

• Shared ProductCard GraphQL fragment for products/collection/search
• New: COLLECTION_QUERY, PAGE_QUERY, SEARCH_QUERY, CART_DISCOUNT_CODES_UPDATE_MUTATION
• Cart fragment now includes discountCodes
• Products query gained cursor + sort args

Env / infra

• No new env vars.
• Policy pages will render whatever the Shopify admin has configured under Online Store > Pages. Create pages with handles shipping-policy, refund-policy, privacy-policy, terms-of-service to populate the sidebar Info links — missing pages fall through to the existing 404.

Test plan

• /shop?sort=PRICE orders products ascending by price; default URL stays clean
• "Load more" appends a new page without resetting the first page or page scroll
• /shop/collections/<handle> renders with the collection's products and sort works
• PDP: click a thumbnail and the hero swaps; select a different variant with its own image and the gallery follows
• PDP: select an unavailable variant combination — the offending option value gets a strike-through style, Add to cart flips to Sold out
• PDP: adjust quantity, click Add to cart — drawer slides in, badge updates, subtotal reflects the quantity
• /shop/search?q=... returns results; empty query shows the prompt, no matches shows the "No products match" state
• Apply an invalid discount code — inline error message appears (no silent acceptance)
• Apply a valid discount — code chip shows with an X to remove
• Drawer works on every /shop/* route from the navbar cart button, and from non-shop routes when the cart has items
• View page source on a PDP → <script type="application/ld+json"> present with valid schema.org Product
• Social-share preview on a PDP uses the product's first image (via Shopify CDN transform)
• Shop policies pages (/shop/pages/shipping-policy etc.) 404 gracefully until pages are created in Shopify admin

Summary by CodeRabbit

• New Features
  • Added product search functionality to discover items quickly.
  • Introduced collections browsing with sorting and pagination support.
  • Enabled discount code application and removal in cart.
  • Implemented cart drawer for quick access without page navigation.
  • Enhanced product pages with image galleries, variant selectors, and quantity controls.
  • Added breadcrumb navigation for better orientation.
  • Added policy and info pages accessible from navigation.

[netlify]

✅ Deploy Preview for tanstack ready!

Name	Link
🔨 Latest commit	9642888
🔍 Latest deploy log	https://app.netlify.com/projects/tanstack/deploys/69e001633230cf00081331eb
😎 Deploy Preview	https://deploy-preview-833--tanstack.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 31 (🔴 down 29 from production) Accessibility: 90 (no change from production) Best Practices: 83 (🔴 down 9 from production) SEO: 97 (no change from production) PWA: 70 (no change from production) View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

This PR implements a comprehensive shopping experience overhaul, introducing search and collection browsing routes, a global cart drawer with discount code management, new product display components, API pagination and sorting support, and enhanced product detail pages with image galleries and variant selectors.

Changes

Cohort / File(s)	Summary
Cart Drawer System src/components/shop/cartDrawerStore.ts, src/components/shop/CartDrawer.tsx, src/components/NavbarCartButton.tsx	New Zustand store manages drawer visibility; CartDrawer component renders Radix UI slide-in with line items, quantity controls, and checkout actions; NavbarCartButton now triggers drawer open instead of navigating to cart route.
Product Display Components src/components/shop/Breadcrumbs.tsx, src/components/shop/ProductCard.tsx, src/components/shop/ProductImage.tsx	New components for breadcrumb navigation, product tile cards with price ranges and discounts, and responsive Shopify image rendering with DPR-aware srcsets and WebP optimization.
Shop Layout & Navigation src/components/shop/ShopLayout.tsx, src/routeTree.gen.ts	ShopLayout mounts global CartDrawer and adds sidebar search link plus policy page navigation; routeTree registers new routes for search, collections, and pages.
Product Listing Routes src/routes/shop.index.tsx, src/routes/shop.search.tsx, src/routes/shop.collections.$handle.tsx	Refactored homepage with dynamic sort parameters and stateful pagination; added search route with query validation and load-more; added collection route with sort options and incremental product loading.
Shop Pages & Product Detail src/routes/shop.pages.$handle.tsx, src/routes/shop.products.$handle.tsx	New pages route loads and renders static shop pages; product detail significantly refactored with new ProductGallery, VariantSelector, and QuantityStepper subcomponents, plus JSON-LD schema and OG image metadata.
Cart Discount & Cart Page src/routes/shop.cart.tsx, src/hooks/useCart.ts	Cart page now displays Breadcrumbs and includes new DiscountCodeSection for applying/removing codes; added useApplyDiscountCode and useRemoveDiscountCode hooks with optimistic updates and error handling.
API & GraphQL Layer src/utils/shop.functions.ts, src/utils/shopify-queries.ts	Refactored getProducts for pagination/sorting; added new endpoints (getCollection, getPage, searchProducts, discount mutations); extended GraphQL queries with pagination, sort options, discount codes, and new search/collection/page queries with sorting utilities and type definitions.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

---

🐰 Breadcrumbs laid, carts drawer-bound,
Product galleries spin all around,
Discounts applied with a hop and a click,
Search and variants—oh, so slick!
This shop's transformation—a rabbit's delight,
Ecommerce magic, polished just right! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 7.14% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title comprehensively and accurately summarizes all major changes in the PR: collections, search, policies, PDP gallery, quantity controls, cart drawer, and discounts.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/shop-phase-2

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}