forked from crowetic/commerce
Updates recommended products to use ProductGridItems component (#975)
This commit is contained in:
parent
a677c17f78
commit
acb4ff400b
@ -1,11 +1,10 @@
|
||||
import type { Metadata } from 'next';
|
||||
import Link from 'next/link';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { Suspense } from 'react';
|
||||
|
||||
import Grid from 'components/grid';
|
||||
import { GridTileImage } from 'components/grid/tile';
|
||||
import Footer from 'components/layout/footer';
|
||||
import ProductGridItems from 'components/layout/product-grid-items';
|
||||
import { AddToCart } from 'components/product/add-to-cart';
|
||||
import { Gallery } from 'components/product/gallery';
|
||||
import { VariantSelector } from 'components/product/variant-selector';
|
||||
@ -106,24 +105,8 @@ async function RelatedProducts({ id }: { id: string }) {
|
||||
<div className="px-4 py-8">
|
||||
<div className="mb-4 text-3xl font-bold">Related Products</div>
|
||||
<Grid className="grid-cols-2 lg:grid-cols-5">
|
||||
{relatedProducts.map((product) => {
|
||||
return (
|
||||
<Grid.Item key={product.id} className="animate-fadeIn">
|
||||
<Link
|
||||
aria-label={product.title}
|
||||
className="border-gay-300 group relative block aspect-square overflow-hidden border bg-gray-50"
|
||||
href={`/product/${product.handle}`}
|
||||
>
|
||||
<GridTileImage
|
||||
alt={product.title}
|
||||
src={product.featuredImage.url}
|
||||
width={600}
|
||||
height={600}
|
||||
/>
|
||||
</Link>
|
||||
</Grid.Item>
|
||||
);
|
||||
})}
|
||||
{/* @ts-expect-error Server Component */}
|
||||
<ProductGridItems products={relatedProducts} />
|
||||
</Grid>
|
||||
</div>
|
||||
);
|
||||
|
@ -2,7 +2,8 @@ import { getCollection, getCollectionProducts } from 'lib/shopify';
|
||||
import { Metadata } from 'next';
|
||||
import { notFound } from 'next/navigation';
|
||||
|
||||
import SearchResults from 'components/layout/search/results';
|
||||
import Grid from 'components/grid';
|
||||
import ProductGridItems from 'components/layout/product-grid-items';
|
||||
|
||||
export const runtime = 'edge';
|
||||
|
||||
@ -36,11 +37,14 @@ export default async function CategoryPage({ params }: { params: { collection: s
|
||||
|
||||
return (
|
||||
<section>
|
||||
{/* @ts-expect-error Server Component */}
|
||||
<SearchResults products={products} />
|
||||
{products.length === 0 ? (
|
||||
<p className="py-3 text-lg">{`No products found in this collection`}</p>
|
||||
) : null}
|
||||
) : (
|
||||
<Grid className="grid-cols-2 lg:grid-cols-3">
|
||||
{/* @ts-expect-error Server Component */}
|
||||
<ProductGridItems products={products} />
|
||||
</Grid>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
@ -1,4 +1,5 @@
|
||||
import SearchResults from 'components/layout/search/results';
|
||||
import Grid from 'components/grid';
|
||||
import ProductGridItems from 'components/layout/product-grid-items';
|
||||
import { defaultSort, sorting } from 'lib/constants';
|
||||
import { getProducts } from 'lib/shopify';
|
||||
|
||||
@ -22,20 +23,20 @@ export default async function SearchPage({
|
||||
|
||||
return (
|
||||
<>
|
||||
{searchValue &&
|
||||
(products.length > 0 ? (
|
||||
<p>
|
||||
{`Showing ${products.length} ${resultsText} for `}
|
||||
<span className="font-bold">"{searchValue}"</span>
|
||||
</p>
|
||||
) : (
|
||||
<p>
|
||||
{'There are no products that match '}
|
||||
<span className="font-bold">"{searchValue}"</span>
|
||||
</p>
|
||||
))}
|
||||
{/* @ts-expect-error Server Component */}
|
||||
<SearchResults products={products} />
|
||||
{searchValue ? (
|
||||
<p>
|
||||
{products.length === 0
|
||||
? 'There are no products that match '
|
||||
: `Showing ${products.length} ${resultsText} for `}
|
||||
<span className="font-bold">"{searchValue}"</span>
|
||||
</p>
|
||||
) : null}
|
||||
{products.length > 0 ? (
|
||||
<Grid className="grid-cols-2 lg:grid-cols-3">
|
||||
{/* @ts-expect-error Server Component */}
|
||||
<ProductGridItems products={products} />
|
||||
</Grid>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
29
components/layout/product-grid-items.tsx
Normal file
29
components/layout/product-grid-items.tsx
Normal file
@ -0,0 +1,29 @@
|
||||
import Grid from 'components/grid';
|
||||
import { GridTileImage } from 'components/grid/tile';
|
||||
import { Product } from 'lib/shopify/types';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default async function ProductGridItems({ products }: { products: Product[] }) {
|
||||
return (
|
||||
<>
|
||||
{products.map((product) => (
|
||||
<Grid.Item key={product.handle} className="animate-fadeIn">
|
||||
<Link className="h-full w-full" href={`/product/${product.handle}`}>
|
||||
<GridTileImage
|
||||
alt={product.title}
|
||||
labels={{
|
||||
isSmall: true,
|
||||
title: product.title,
|
||||
amount: product.priceRange.maxVariantPrice.amount,
|
||||
currencyCode: product.priceRange.maxVariantPrice.currencyCode
|
||||
}}
|
||||
src={product.featuredImage.url}
|
||||
width={600}
|
||||
height={600}
|
||||
/>
|
||||
</Link>
|
||||
</Grid.Item>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
@ -1,33 +0,0 @@
|
||||
import Grid from 'components/grid';
|
||||
import { GridTileImage } from 'components/grid/tile';
|
||||
import { Product } from 'lib/shopify/types';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default async function SearchResults({ products }: { products: Product[] }) {
|
||||
return (
|
||||
<>
|
||||
{products.length ? (
|
||||
<Grid className="grid-cols-2 lg:grid-cols-3">
|
||||
{products.map((product) => (
|
||||
<Grid.Item key={product.handle} className="animate-fadeIn">
|
||||
<Link className="h-full w-full" href={`/product/${product.handle}`}>
|
||||
<GridTileImage
|
||||
alt={product.title}
|
||||
labels={{
|
||||
isSmall: true,
|
||||
title: product.title,
|
||||
amount: product.priceRange.maxVariantPrice.amount,
|
||||
currencyCode: product.priceRange.maxVariantPrice.currencyCode
|
||||
}}
|
||||
src={product.featuredImage.url}
|
||||
width={600}
|
||||
height={600}
|
||||
/>
|
||||
</Link>
|
||||
</Grid.Item>
|
||||
))}
|
||||
</Grid>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user