99 lines
2.5 KiB
JavaScript
99 lines
2.5 KiB
JavaScript
import {
|
|
MediaFileFragment,
|
|
ProductProviderFragment,
|
|
useShopQuery,
|
|
flattenConnection,
|
|
RawHtml,
|
|
} from '@shopify/hydrogen';
|
|
import {useParams} from 'react-router-dom';
|
|
import gql from 'graphql-tag';
|
|
|
|
import LoadMoreProducts from '../../components/LoadMoreProducts.client';
|
|
import Layout from '../../components/Layout.server';
|
|
import ProductCard from '../../components/ProductCard.server';
|
|
import NotFound from '../../components/NotFound.server';
|
|
|
|
export default function Collection({
|
|
country = {isoCode: 'US'},
|
|
collectionProductCount = 24,
|
|
}) {
|
|
const {handle} = useParams();
|
|
const {data} = useShopQuery({
|
|
query: QUERY,
|
|
variables: {
|
|
handle,
|
|
country: country.isoCode,
|
|
numProducts: collectionProductCount,
|
|
},
|
|
});
|
|
|
|
if (data?.collection == null) {
|
|
return <NotFound />;
|
|
}
|
|
|
|
const collection = data.collection;
|
|
const products = flattenConnection(collection.products);
|
|
const hasNextPage = data.collection.products.pageInfo.hasNextPage;
|
|
|
|
return (
|
|
<Layout>
|
|
<h1 className="font-bold text-4xl md:text-5xl text-gray-900 mb-6 mt-6">
|
|
{collection.title}
|
|
</h1>
|
|
<RawHtml string={collection.descriptionHtml} className="text-2xl" />
|
|
<p className="text-sm text-gray-500 mt-5 mb-5">
|
|
{products.length} {products.length > 1 ? 'products' : 'product'}
|
|
</p>
|
|
|
|
<ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
|
|
{products.map((product) => (
|
|
<li key={product.id}>
|
|
<ProductCard product={product} />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
{hasNextPage && (
|
|
<LoadMoreProducts startingCount={collectionProductCount} />
|
|
)}
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
const QUERY = gql`
|
|
query CollectionDetails(
|
|
$handle: String!
|
|
$country: CountryCode
|
|
$numProducts: Int!
|
|
$includeReferenceMetafieldDetails: Boolean = false
|
|
$numProductMetafields: Int = 0
|
|
$numProductVariants: Int = 250
|
|
$numProductMedia: Int = 6
|
|
$numProductVariantMetafields: Int = 0
|
|
$numProductVariantSellingPlanAllocations: Int = 0
|
|
$numProductSellingPlanGroups: Int = 0
|
|
$numProductSellingPlans: Int = 0
|
|
) @inContext(country: $country) {
|
|
collection(handle: $handle) {
|
|
id
|
|
title
|
|
descriptionHtml
|
|
|
|
products(first: $numProducts) {
|
|
edges {
|
|
node {
|
|
vendor
|
|
...ProductProviderFragment
|
|
}
|
|
}
|
|
pageInfo {
|
|
hasNextPage
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
${MediaFileFragment}
|
|
${ProductProviderFragment}
|
|
`;
|