mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 20:26:49 +00:00
Tried to optimize product page
This commit is contained in:
Henrik Larsson
@@ -1,82 +0,0 @@
|
||||
// @ts-nocheck
|
||||
|
||||
'use client';
|
||||
|
||||
import clsx from 'clsx';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import { useEffect, useState, useTransition } from 'react';
|
||||
|
||||
import LoadingDots from 'components/loading-dots';
|
||||
import { ProductVariant } from 'lib/shopify/types';
|
||||
|
||||
export function AddToCart({
|
||||
variants,
|
||||
availableForSale
|
||||
}: {
|
||||
variants: ProductVariant[];
|
||||
availableForSale: boolean;
|
||||
}) {
|
||||
const [selectedVariantId, setSelectedVariantId] = useState(variants[0]?.id);
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [adding, setAdding] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const variant = variants.find((variant: ProductVariant) =>
|
||||
variant.selectedOptions.every(
|
||||
(option) => option.value === searchParams.get(option.name.toLowerCase())
|
||||
)
|
||||
);
|
||||
|
||||
if (variant) {
|
||||
setSelectedVariantId(variant.id);
|
||||
}
|
||||
}, [searchParams, variants, setSelectedVariantId]);
|
||||
|
||||
const isMutating = adding || isPending;
|
||||
|
||||
async function handleAdd() {
|
||||
if (!availableForSale) return;
|
||||
|
||||
setAdding(true);
|
||||
|
||||
const response = await fetch(`/api/cart`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
merchandiseId: selectedVariantId
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.error) {
|
||||
alert(data.error);
|
||||
return;
|
||||
}
|
||||
|
||||
setAdding(false);
|
||||
|
||||
startTransition(() => {
|
||||
router.refresh();
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
aria-label="Add item to cart"
|
||||
disabled={isMutating}
|
||||
onClick={handleAdd}
|
||||
className={clsx(
|
||||
'flex w-full items-center justify-center bg-black p-4 text-sm uppercase tracking-wide text-white opacity-90 hover:opacity-100 dark:bg-white dark:text-black',
|
||||
{
|
||||
'cursor-not-allowed opacity-60': !availableForSale,
|
||||
'cursor-not-allowed': isMutating
|
||||
}
|
||||
)}
|
||||
>
|
||||
<span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span>
|
||||
{isMutating ? <LoadingDots className="bg-white dark:bg-black" /> : null}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
67
components/product/gallery.tsx
Normal file
67
components/product/gallery.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
'use client';
|
||||
|
||||
import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
|
||||
import { createUrl } from 'lib/utils';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { usePathname, useSearchParams } from 'next/navigation';
|
||||
|
||||
export function Gallery({ images }: { images: { src: string; alt: string }[] }) {
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
const imageSearchParam = searchParams.get('image');
|
||||
const imageIndex = imageSearchParam ? parseInt(imageSearchParam) : 0;
|
||||
|
||||
const nextSearchParams = new URLSearchParams(searchParams.toString());
|
||||
const nextImageIndex = imageIndex + 1 < images.length ? imageIndex + 1 : 0;
|
||||
nextSearchParams.set('image', nextImageIndex.toString());
|
||||
const nextUrl = createUrl(pathname, nextSearchParams);
|
||||
|
||||
const previousSearchParams = new URLSearchParams(searchParams.toString());
|
||||
const previousImageIndex = imageIndex === 0 ? images.length - 1 : imageIndex - 1;
|
||||
previousSearchParams.set('image', previousImageIndex.toString());
|
||||
const previousUrl = createUrl(pathname, previousSearchParams);
|
||||
|
||||
const buttonClassName =
|
||||
'h-12 w-12 transition-all ease-in-out hover:scale-110 flex items-center justify-center';
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="relative aspect-square h-full w-full overflow-hidden">
|
||||
{images[imageIndex] && (
|
||||
<Image
|
||||
className="h-full w-full object-cover"
|
||||
fill
|
||||
sizes="(min-width: 1024px) 66vw, 100vw"
|
||||
alt={images[imageIndex]?.alt as string}
|
||||
src={images[imageIndex]?.src as string}
|
||||
priority={true}
|
||||
/>
|
||||
)}
|
||||
|
||||
{images.length > 1 ? (
|
||||
<div className="absolute top-1/2 flex w-full px-1">
|
||||
<div className="flex w-full justify-between">
|
||||
<Link
|
||||
aria-label="Previous product image"
|
||||
href={previousUrl}
|
||||
className={buttonClassName}
|
||||
scroll={false}
|
||||
>
|
||||
<ArrowLeftIcon className="h-6" />
|
||||
</Link>
|
||||
<Link
|
||||
aria-label="Next product image"
|
||||
href={nextUrl}
|
||||
className={buttonClassName}
|
||||
scroll={false}
|
||||
>
|
||||
<ArrowRightIcon className="h-6" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
37
components/product/grid.tsx
Normal file
37
components/product/grid.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import Image from 'next/image';
|
||||
|
||||
export function Grid({
|
||||
images
|
||||
}: {
|
||||
images: { src: string; alt: string; width: number | undefined; height: number | undefined }[];
|
||||
}) {
|
||||
return (
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{images.map(
|
||||
(
|
||||
image: {
|
||||
src: string;
|
||||
alt: string;
|
||||
height: number | undefined;
|
||||
width: number | undefined;
|
||||
},
|
||||
index: number
|
||||
) => {
|
||||
return (
|
||||
<Image
|
||||
className="aspect-square h-full w-full object-contain first:col-span-2"
|
||||
src={image.src}
|
||||
height={image.height}
|
||||
width={image.width}
|
||||
sizes={`${
|
||||
index === 0 ? '(min-width: 1024px) 66vw, 100vw' : '(min-width: 1024px) 50vw, 0'
|
||||
}`}
|
||||
alt={image.alt}
|
||||
key={index}
|
||||
/>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,22 +1,23 @@
|
||||
'use client';
|
||||
|
||||
import { Carousel, CarouselItem } from 'components/modules/carousel/carousel';
|
||||
import SanityImage from 'components/ui/sanity-image/sanity-image';
|
||||
import { Product } from '@/lib/storm/product';
|
||||
import { Image } from '@/lib/storm/types';
|
||||
import Text from 'components/ui/text/text';
|
||||
import { Product } from 'lib/storm/types/product';
|
||||
import { cn } from 'lib/utils';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Suspense } from 'react';
|
||||
import ProductCard from '../ui/product-card/product-card';
|
||||
import { Gallery } from './gallery';
|
||||
import { Grid } from './grid';
|
||||
import Price from './price';
|
||||
|
||||
interface ProductViewProps {
|
||||
product: Product;
|
||||
relatedProducts: Product[];
|
||||
}
|
||||
|
||||
export default function ProductView({ product, relatedProducts }: ProductViewProps) {
|
||||
const images = product.images;
|
||||
const t = useTranslations('product');
|
||||
const { name, description, price, images } = product;
|
||||
|
||||
return (
|
||||
<div className="mb-8 flex w-full flex-col lg:my-16">
|
||||
@@ -24,59 +25,50 @@ export default function ProductView({ product, relatedProducts }: ProductViewPro
|
||||
className={cn('relative grid grid-cols-1 items-start lg:grid-cols-12 lg:px-8 2xl:px-16')}
|
||||
>
|
||||
<div className="relative col-span-1 lg:col-span-7">
|
||||
<div className={`pdp aspect-square lg:hidden`}>
|
||||
{images && (
|
||||
<Carousel
|
||||
hasArrows={images.length > 1 ? true : false}
|
||||
hasDots={false}
|
||||
gliderClasses={'lg:px-8 2xl:px-16'}
|
||||
slidesToScroll={1}
|
||||
slidesToShow={images.length > 1 ? 1.0125 : 1}
|
||||
responsive={{
|
||||
breakpoint: 1024,
|
||||
settings: {
|
||||
slidesToShow: 1
|
||||
}
|
||||
}}
|
||||
>
|
||||
{images.map((image: any, index: number) => (
|
||||
<CarouselItem className="ml-1 first:ml-0" key={`${index}`}>
|
||||
<SanityImage
|
||||
image={image}
|
||||
alt={image.alt}
|
||||
priority={true}
|
||||
quality={85}
|
||||
sizes="(max-width: 1024px) 100vw, 70vw"
|
||||
/>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</Carousel>
|
||||
)}
|
||||
<div className="lg:hidden">
|
||||
<Gallery
|
||||
images={images.map((image: Image) => ({
|
||||
src: image.url,
|
||||
alt: image.alt
|
||||
}))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="hidden grid-cols-2 gap-4 lg:grid">
|
||||
{images.map((image: any, index: number) => (
|
||||
<div className="hidden lg:flex">
|
||||
<Grid
|
||||
images={images.map((image: Image) => ({
|
||||
src: image.url,
|
||||
alt: image.alt,
|
||||
height: image.height,
|
||||
width: image.width
|
||||
}))}
|
||||
/>
|
||||
|
||||
{/* {images.map((image: Image, index: number) => (
|
||||
<div key={index} className="first:col-span-2">
|
||||
<SanityImage
|
||||
image={image}
|
||||
alt={image.alt}
|
||||
priority={true}
|
||||
quality={85}
|
||||
priority={index === 0 ? true : false}
|
||||
sizes="(max-width: 1024px) 100vw, 70vw"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
))} */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-span-1 mx-auto flex h-auto w-full flex-col p-4 lg:sticky lg:top-8 lg:col-span-5 lg:px-8 lg:py-0 lg:pr-0 2xl:top-16 2xl:px-16 2xl:pr-0">
|
||||
<Text variant={'productHeading'}>{product.name}</Text>
|
||||
<Text variant={'productHeading'}>{name}</Text>
|
||||
|
||||
<Price
|
||||
className="mt-2 text-sm font-medium leading-tight lg:text-base"
|
||||
amount={`${product.price.value}`}
|
||||
currencyCode={product.price.currencyCode ? product.price.currencyCode : 'SEK'}
|
||||
className="mt-2 text-sm font-bold leading-tight lg:text-base"
|
||||
amount={`${price.value}`}
|
||||
currencyCode={price.currencyCode ? price.currencyCode : 'SEK'}
|
||||
/>
|
||||
|
||||
<Text className="mt-2" variant="paragraph">
|
||||
{description}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -86,26 +78,6 @@ export default function ProductView({ product, relatedProducts }: ProductViewPro
|
||||
<Text className="px-4 lg:px-8 2xl:px-16" variant="sectionHeading">
|
||||
{t('related')}
|
||||
</Text>
|
||||
|
||||
<Carousel
|
||||
gliderClasses={'px-4 lg:px-8 2xl:px-16'}
|
||||
hasArrows={true}
|
||||
hasDots={true}
|
||||
slidesToShow={2.2}
|
||||
slidesToScroll={1}
|
||||
responsive={{
|
||||
breakpoint: 1024,
|
||||
settings: {
|
||||
slidesToShow: 4.5
|
||||
}
|
||||
}}
|
||||
>
|
||||
{relatedProducts.map((p) => (
|
||||
<CarouselItem key={`product-${p.path}`}>
|
||||
<ProductCard product={p} />
|
||||
</CarouselItem>
|
||||
))}
|
||||
</Carousel>
|
||||
</section>
|
||||
</Suspense>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user