Skip to content

feat(shop): product dialog popup instead of page navigation#170

Closed
aris-cub wants to merge 2 commits into
mainfrom
product-dialog
Closed

feat(shop): product dialog popup instead of page navigation#170
aris-cub wants to merge 2 commits into
mainfrom
product-dialog

Conversation

@aris-cub

Copy link
Copy Markdown
Contributor

Summary

  • New ProductDialog component — modal overlay with image gallery (front/back thumbnails), product name, price, description, stock count, and "Add to cart" button. Closes on backdrop click, Escape key, or Close button. Prevents body scroll while open.
  • Home page (/) — ProductTile components now use <button> instead of <Link>, opening the dialog on click. All three tile variants (featured, standard, wide) updated.
  • Products listing (/products) — product cards converted from <Link> to <button> with dialog popup. Same rich product view without leaving the page.
  • Dialog animations added to globals.css — smooth fade-in backdrop and scale-up entrance for the dialog panel.

Test plan

  • Click any product on the home page → dialog opens with correct product details
  • Click any product on /products → dialog opens with correct product details
  • Verify image gallery thumbnails toggle between front/back in the dialog
  • Click "Add to cart" in dialog → navigates to cart with item added
  • Close dialog via: backdrop click, Escape key, Close button
  • Verify body scroll is locked while dialog is open
  • Verify "View all products →" link on home page still navigates to /products
  • Test on mobile viewport — dialog should be scrollable and responsive

https://claude.ai/code/session_011WZQ1sZJvJXDWhiyKmZmzq

Product clicks on home page and products listing now open a modal
dialog instead of navigating to /products/[id]. The dialog includes
image gallery with front/back toggle, product details, and add-to-cart.

https://claude.ai/code/session_011WZQ1sZJvJXDWhiyKmZmzq
@github-actions

Copy link
Copy Markdown
Contributor

mirrord Preview Environment - Metal Mart

Preview environments are running for this PR.

Service Target
metal-mart-frontend deployment/metal-mart-frontend
Preview URL https://playground.metalbear.dev/shop
Header baggage: mirrord=product-dialog

To send traffic to this preview:

  • Use the mirrord Browser Extension and set the header for this URL, or
  • curl -H "baggage: mirrord=product-dialog" https://playground.metalbear.dev/shop

Preview is stopped when the PR is merged or closed.

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.

3 participants