Skip to content

Refactor ProductItem and fix fragment collision in Skeleton #2872

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

Merged
merged 7 commits into from
Apr 22, 2025

Conversation

juanpprieto
Copy link
Contributor

@juanpprieto juanpprieto commented Apr 18, 2025

Fix ProductItemFragment collision between /routes/collections.all.tsx and /routes/collections.$handle.tsx

Refactor ProductItem to a component for easier recipes application in CombinedListings and Bundles. (e.g Modify one instead of two duplicated instances on each route)

@juanpprieto juanpprieto requested a review from Copilot April 18, 2025 18:35
Copy link
Contributor

shopify bot commented Apr 18, 2025

Oxygen deployed a preview of your fix-product-fragment branch. Details:

Storefront Status Preview link Deployment details Last update (UTC)
Skeleton (skeleton.hydrogen.shop) ✅ Successful (Logs) Preview deployment Inspect deployment April 22, 2025 6:17 PM
classic-remix ✅ Successful (Logs) Preview deployment Inspect deployment April 22, 2025 6:17 PM
custom-cart-method ✅ Successful (Logs) Preview deployment Inspect deployment April 22, 2025 6:17 PM
third-party-queries-caching ✅ Successful (Logs) Preview deployment Inspect deployment April 22, 2025 6:17 PM
metaobjects ✅ Successful (Logs) Preview deployment Inspect deployment April 22, 2025 6:17 PM

Learn more about Hydrogen's GitHub integration.

Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull Request Overview

This PR refactors the ProductItem component to resolve a fragment collision and improve its reusability for CombinedListings and Bundles.

  • Renames the local component and associated GraphQL fragment in collections.all.tsx from ProductItem to CollectionItem.
  • Removes the redundant inline ProductItem definition from collections.$handle.tsx in favor of the imported version.
  • Extracts the ProductItem component to its own file to enable easier reuse.

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File Description
templates/skeleton/app/routes/collections.all.tsx Renamed the local component and updated its GraphQL fragments to resolve fragment collisions.
templates/skeleton/app/routes/collections.$handle.tsx Removed inline ProductItem definition, now using the external ProductItem component.
templates/skeleton/app/components/ProductItem.tsx Introduced a consolidated reusable ProductItem component supporting both fragment types.
Comments suppressed due to low confidence (1)

templates/skeleton/app/routes/collections.all.tsx:103

  • [nitpick] To maintain consistency with the new naming scheme, consider renaming 'MoneyProductItem' to 'MoneyCollectionItem'.
fragment MoneyProductItem on MoneyV2 {

@juanpprieto juanpprieto changed the title Refactor ProductItem and fix fragment collision Refactor ProductItem and fix fragment collision in Skeleton Apr 18, 2025
@juanpprieto juanpprieto merged commit d1bc804 into main Apr 22, 2025
11 checks passed
@juanpprieto juanpprieto deleted the fix-product-fragment branch April 22, 2025 18:20
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.

4 participants