crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-19 16:07:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

improved product page layout

Browse Source
This commit is contained in:
Sol Irvine 2023-08-23 22:57:35 -07:00
parent bd1538e88a
commit f43226198d
2 changed files with 28 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app/[locale]/product/[handle]/page.tsx
View File

@ -2,6 +2,7 @@ import type { Metadata } from 'next';
import { notFound } from 'next/navigation'; import { notFound } from 'next/navigation';
import { Suspense } from 'react'; import { Suspense } from 'react';
import clsx from 'clsx';
import { AddToCart } from 'components/cart/add-to-cart'; import { AddToCart } from 'components/cart/add-to-cart';
import { GridTileImage } from 'components/grid/tile'; import { GridTileImage } from 'components/grid/tile';
import Label from 'components/label'; import Label from 'components/label';
@ -64,13 +65,16 @@ export default async function ProductPage({
}: { }: {
params: { handle: string; locale?: SupportedLocale }; params: { handle: string; locale?: SupportedLocale };
}) { }) {
const numberOfOtherImages = 3;
const product = await getProduct({ const product = await getProduct({
handle: params.handle, handle: params.handle,
language: params?.locale?.toUpperCase() language: params?.locale?.toUpperCase()
}); });
let otherImages: MediaImage[] = []; let otherImages: MediaImage[] = [];
if (!!product) { if (!!product) {
otherImages = product.images.filter((image) => image?.url !== product.featuredImage?.url); otherImages = product.images
.slice(0, numberOfOtherImages + 1) // +1 to account for featured image
.filter((image) => image?.url !== product.featuredImage?.url);
} }
if (!product) return notFound(); if (!product) return notFound();
@ -102,7 +106,7 @@ export default async function ProductPage({
/> />
<div className="mx-auto max-w-screen-xl py-24"> <div className="mx-auto max-w-screen-xl py-24">
<div className="flex flex-col space-y-12"> <div className="flex flex-col space-y-12">
<div className="relative aspect-square h-full w-full"> <div className="relative h-full w-full">
<Image <Image
src={product.featuredImage?.url} src={product.featuredImage?.url}
alt={product.featuredImage?.altText} alt={product.featuredImage?.altText}
@ -147,8 +151,18 @@ export default async function ProductPage({
<div className="grid grid-cols-1 gap-4 md:grid-cols-2"> <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
{!!otherImages && {!!otherImages &&
otherImages?.length > 0 && otherImages?.length > 0 &&
otherImages.map((image) => ( otherImages.map((image, index) => {
<div key={image.url} className="relative aspect-square h-full w-full"> const isOdd = otherImages.length % 2 != 0;
const isLast = index === otherImages.length - 1;
const isOddAndLast = isOdd && isLast;
return (
<div
key={image.url}
className={clsx(
isOddAndLast ? 'col-span-2' : 'col-span-1 aspect-square',
'relative h-full w-full bg-gray-900/10'
)}
>
<Image <Image
src={image.url} src={image.url}
alt={image.altText} alt={image.altText}
@ -157,7 +171,8 @@ export default async function ProductPage({
className="h-full w-full object-cover" className="h-full w-full object-cover"
/> />
</div> </div>
))} );
})}
</div> </div>
<Suspense> <Suspense>
<RelatedProducts id={product.id} /> <RelatedProducts id={product.id} />

1
components/grid/product-grid.tsx
View File

@ -41,7 +41,6 @@ export async function ProductGrid({ lang }: { lang?: SupportedLocale }) {
collection: 'hidden-products-page-items', collection: 'hidden-products-page-items',
language: lang?.toUpperCase() language: lang?.toUpperCase()
}); });
console.debug({ productPageItems });
if (!productPageItems?.length) return null; if (!productPageItems?.length) return null;