cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Updates recommended products to use ProductGridItems component (#975)

Browse Source
This commit is contained in:
Stephanie Dietz 2023-04-20 11:27:18 -05:00 committed by GitHub
parent a677c17f78
commit acb4ff400b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 56 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/product/[handle]/page.tsx
View File

@ -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>
);

12
app/search/[collection]/page.tsx
View File

@ -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>
);
}

31
app/search/page.tsx
View File

@ -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">&quot;{searchValue}&quot;</span>
</p>
) : (
<p>
{'There are no products that match '}
<span className="font-bold">&quot;{searchValue}&quot;</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">&quot;{searchValue}&quot;</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
View 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>
))}
</>
);
}

33
components/layout/search/results.tsx
View File

@ -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}
</>
);
}