Shopify Hydrogen Framework in Action: A Hands - on Review
dadao
2025-02-26 08:02:38
{products.map(product => (
))}
);
};
export default ProductListing;
- This code uses React hooks (useState and useEffect) to manage the state of the component and fetch product data when the component mounts. The data is fetched using the Shopify API client, which is configured in the 'utils/client' file.
2. **Product Details Component**
- The product details component is responsible for displaying detailed information about a single product. This includes a larger product image, a more detailed description, product variants (such as different sizes or colors), and customer reviews if available.
- To create the product details component, developers need to handle the routing to the specific product page. In Hydrogen, this can be done using a routing library such as React Router. Once the correct product ID is retrieved from the URL, the component can fetch the detailed product data from the Shopify API and display it. For example:
javascript
import { useState, useEffect } from 'react';
import { useParams } from 'react-router - dom';
import { client } from '../utils/client';
const ProductDetails = () => {
const { productId } = useParams();
const [product, setProduct] = useState(null);
useEffect(() => {
const fetchProduct = async () => {
const response = await client.query({
query: gql`
query ($productId: ID!) {
product(id: $productId) {
id
title
price
description
images {
src
}
variants {
id
title
price
}
}
}
`,
variables: { productId }
});
setProduct(response.data.product);
};
fetchProduct();
}, [productId]);
if (!product) {
return {product.title}
{product.price}
Loading...
;
}
return (
{product.title}
{product.price}
{product.description}
-
{product.variants.map(variant => (
- {variant.title} {variant.price} ))}