Update variant swatch and update product media

[dangthang1903]

Summary by CodeRabbit

These updates enhance the overall user experience with more consistent imagery, clearer product options, and improved media navigation.

• Refactor

  • Centralized image handling across storefront sections for cohesive visuals.
  • Streamlined product option and variant selection logic for smoother interactions.
  • Optimized media navigation for more intuitive slide transitions.

• Style

  • Updated button designs and color swatches in product options for a polished, coherent look.

[coderabbitai]

Walkthrough

This pull request primarily updates the source of the Image component by replacing imports from @shopify/hydrogen with a local component at ~/components/image across multiple files. Additionally, it refactors several product form components by streamlining their rendering logic, state management, and component props. The changes focus on updating import paths and improving control flow within the variant options, product media, and variant rendering components without altering the core functionality.

Changes

File(s)	Change Summary
app/components/{FeaturedCollections.tsx, Header/menu/{DrawerMenu.tsx, MegaMenu.tsx}, Logo.tsx, ProductCard.tsx, cart/CartPopularCollections.tsx} app/sections/{atoms/BackgroundImage.tsx, blogs/index.tsx, collection-list/collection-card.tsx, image-hotspots/image-item.tsx}	Updated import statements for the Image component from @shopify/hydrogen to ~/components/image.
app/components/product-form/options.tsx	Removed the config property from VariantOptionProps, introduced new constants for option types (color, button, image, dropdown, default), and restructured the rendering logic for variant options.
app/components/product-form/product-media.tsx	Refactored state management by replacing swiperInstance and activeIndex with swiper, simplified slide update logic, and added the helper function getSelectedVariantMediaIndex.
app/components/product-form/variants.tsx	Reformatted import statements (including adding clsx), updated interface definitions, and restructured the variant option rendering logic to include improved presentation and conditional styling.

Sequence Diagram(s)

sequenceDiagram
  participant U as User
  participant PM as ProductMedia
  participant SW as Swiper

  U->>PM: Selects a variant/media
  PM->>PM: Calls getSelectedVariantMediaIndex()
  PM->>SW: Instructs swiping to computed media index
  SW-->>PM: onSlideChange event (new index)
  PM->>U: Updates current slide display

Loading

sequenceDiagram
  participant U as User
  participant PV as ProductVariants
  participant VO as VariantOption

  U->>PV: Interacts with variant options
  PV->>VO: Renders option components based on type (color, button, image, dropdown, default)
  VO-->>PV: Returns selected option value
  PV->>U: Updates display with chosen variant

Loading

Possibly related PRs

• v2.1.3 #129: Updates the DrawerMenu.tsx import for Image, mirroring the shift from external to local component usage.
• Add single product and update product page, product media #130: Contains modifications in the ProductMedia file that align with the updated media slide handling logic.
• Update and fix bug theme #102: Adjusts the import statement for the Image component in FeaturedCollections.tsx, similar to the changes in this PR.

Suggested reviewers

• hta218

Poem

Oh, I’m a rabbit with code so bright,
Leaping over bugs in pure delight.
Imports moved, logic refined,
A cleaner path for images we find.
Hopping through changes with a happy cheer,
CodeRabbit celebrates a future clear! 🐰

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5e71b6f and 89901e8.

📒 Files selected for processing (13)

• app/components/FeaturedCollections.tsx (1 hunks)
• app/components/Header/menu/DrawerMenu.tsx (1 hunks)
• app/components/Header/menu/MegaMenu.tsx (1 hunks)
• app/components/Logo.tsx (1 hunks)
• app/components/ProductCard.tsx (2 hunks)
• app/components/cart/CartPopularCollections.tsx (1 hunks)
• app/components/product-form/options.tsx (2 hunks)
• app/components/product-form/product-media.tsx (7 hunks)
• app/components/product-form/variants.tsx (4 hunks)
• app/sections/atoms/BackgroundImage.tsx (1 hunks)
• app/sections/blogs/index.tsx (1 hunks)
• app/sections/collection-list/collection-card.tsx (1 hunks)
• app/sections/image-hotspots/image-item.tsx (1 hunks)

✅ Files skipped from review due to trivial changes (10)

• app/sections/atoms/BackgroundImage.tsx
• app/components/Header/menu/MegaMenu.tsx
• app/components/FeaturedCollections.tsx
• app/components/Logo.tsx
• app/sections/blogs/index.tsx
• app/components/ProductCard.tsx
• app/components/Header/menu/DrawerMenu.tsx
• app/sections/collection-list/collection-card.tsx
• app/components/cart/CartPopularCollections.tsx
• app/sections/image-hotspots/image-item.tsx

🔇 Additional comments (21)

app/components/product-form/variants.tsx (5)

1-7: Improved imports for better consistency and functionality

The import statements have been updated to use double quotes consistently and a new clsx utility has been added for conditional class name handling.

---

16-17: Interface prop types updated for consistency

The type definitions for product and options now use double quotes, maintaining consistency with the rest of the codebase.

---

80-81: Simplified render prop function

The function signature has been simplified to destructure only the needed option parameter directly.

---

104-107: Improved config name matching

The comparison logic now trims whitespace and converts to lowercase, making the config matching more robust against formatting variations.

---

114-130: Enhanced variant option display with improved accessibility

This refactoring improves the component by:

1. Adding proper accessibility with a <legend> element
2. Using clsx to handle conditional styling for disabled state
3. Displaying the selected value alongside the option name
4. Simplifying the props passed to VariantOption (removed config prop)

This change aligns with the refactoring in the options.tsx file and improves the component's usability.

app/components/product-form/product-media.tsx (8)

32-38: Improved state management for Swiper

The state management has been streamlined:

• Removed unnecessary state variables
• Added swiper state to manage the Swiper instance directly
• Renamed activeIndex to more descriptive currentIndex

This simplifies the component's internal logic and makes the state management more straightforward.

---

40-47: Simplified useEffect dependency

The useEffect hook has been improved by:

1. Reducing dependencies to only what's necessary (selectedVariant)
2. Using the new helper function to determine the appropriate media index
3. Directly using the swiper instance for navigation

This change makes the component more maintainable and efficient.

---

71-73: Streamlined Swiper component configuration

The Swiper component's props have been simplified, making the code cleaner while maintaining functionality.

---

100-100: Enhanced zoom button hover state

The hover state for the zoom button now includes a color change (#2e6a53) which improves visual feedback.

---

116-116: Updated slide counter to use currentIndex

The slide counter now correctly uses currentIndex instead of activeIndex, ensuring consistent state representation.

---

125-126: Improved thumbnail container dimensions

The container dimensions for thumbnails have been updated to provide better proportions across different screen sizes.

---

150-152: Enhanced thumbnail styling

The thumbnail styling has been improved with:

1. Better border and transition properties
2. Added specific styling for active thumbnails with the swiper-slide-thumb-active class

This provides clearer visual feedback for the selected thumbnail.

---

181-188: Added helper function for variant media selection

The new getSelectedVariantMediaIndex function is a good addition that:

1. Encapsulates the logic for finding the index of media for a selected variant
2. Handles the case when no variant is selected (returns 0)
3. Makes the component code more readable and maintainable

This is a good example of function extraction to improve code organization.

app/components/product-form/options.tsx (8)

2-2: Updated Image import path

The import has been changed to use the local component from ~/components/image instead of the Shopify Hydrogen package, aligning with the changes in other files.

---

5-9: Added clear option type constants

These new constants improve code organization by:

1. Clearly defining the different types of option displays
2. Making the code more maintainable and easier to understand
3. Allowing for consistent handling of similar option types

This approach reduces magic strings in the code and makes the component more robust.

---

28-33: Simplified props destructuring and added clear disabled state class

The component now:

1. Has simpler props (removed config prop)
2. Uses a clearly named disabledClassName constant for styling disabled options

This improves code readability and maintainability.

---

35-66: Improved color options rendering

The color option rendering has been completely refactored to:

1. Use the new OPTIONS_AS_COLOR constant for type checking
2. Have a cleaner JSX structure with proper spacing
3. Apply the swatch color directly as a background color
4. Handle disabled states consistently

This implementation is more maintainable and visually consistent.

---

67-88: Added dedicated button options rendering

A new dedicated section for button-style options improves the component by:

1. Using the OPTIONS_AS_BUTTON constant for type checking
2. Applying appropriate styling for button variants
3. Handling selected and disabled states consistently

This separation of concerns makes the component easier to maintain.

---

89-116: Improved image options rendering

The image option rendering has been enhanced with:

1. Clean structure using the OPTIONS_AS_IMAGE constant
2. Proper handling of cases with and without images
3. Consistent styling with other option types
4. Updated Image component usage

This implementation provides a better user experience for image-based options.

---

117-136: Added dropdown options support

A new dropdown implementation:

1. Uses the OPTIONS_AS_DROPDOWN constant for type checking
2. Provides a clean select element implementation
3. Handles option selection through onChange events

This gives more flexibility in how different option types can be displayed.

---

137-156: Improved default options rendering

The default option rendering has been simplified:

1. Cleaner JSX structure with better spacing
2. Consistent handling of selected and disabled states
3. Improved styling for better visual hierarchy

This provides a better fallback for options that don't match specific types.

✨ Finishing Touches

• 📝 Generate Docstrings

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.