mirror of
https://github.com/vercel/commerce.git
synced 2025-05-15 22:16:58 +00:00
Product page UI refresh (#1070)
This commit is contained in:
Stephanie Dietz
GitHub
parent
65bd26b090
commit
3dd7f11bf0
@ -2,16 +2,14 @@ import type { Metadata } from 'next';
|
||||
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/cart/add-to-cart';
|
||||
import { Gallery } from 'components/product/gallery';
|
||||
import { VariantSelector } from 'components/product/variant-selector';
|
||||
import Prose from 'components/prose';
|
||||
import { ProductDescription } from 'components/product/product-description';
|
||||
import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
|
||||
import { getProduct, getProductRecommendations } from 'lib/shopify';
|
||||
import { Image } from 'lib/shopify/types';
|
||||
import Link from 'next/link';
|
||||
|
||||
export const runtime = 'edge';
|
||||
|
||||
@ -76,34 +74,27 @@ export default async function ProductPage({ params }: { params: { handle: string
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: JSON.stringify(productJsonLd)
|
||||
}}
|
||||
/>
|
||||
<div className="lg:grid lg:grid-cols-6">
|
||||
<div className="lg:col-span-4">
|
||||
<Gallery
|
||||
title={product.title}
|
||||
amount={product.priceRange.maxVariantPrice.amount}
|
||||
currencyCode={product.priceRange.maxVariantPrice.currencyCode}
|
||||
images={product.images.map((image: Image) => ({
|
||||
src: image.url,
|
||||
altText: image.altText
|
||||
}))}
|
||||
/>
|
||||
</div>
|
||||
<div className="px-4">
|
||||
<div className="rounded-lg border border-gray-200 bg-white p-8 px-4 dark:border-gray-700 dark:bg-black md:p-12 lg:grid lg:grid-cols-6">
|
||||
<div className="lg:col-span-4">
|
||||
<Gallery
|
||||
images={product.images.map((image: Image) => ({
|
||||
src: image.url,
|
||||
altText: image.altText
|
||||
}))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="p-6 lg:col-span-2">
|
||||
<VariantSelector options={product.options} variants={product.variants} />
|
||||
|
||||
{product.descriptionHtml ? (
|
||||
<Prose className="mb-6 text-sm leading-tight" html={product.descriptionHtml} />
|
||||
) : null}
|
||||
|
||||
<AddToCart variants={product.variants} availableForSale={product.availableForSale} />
|
||||
<div className="py-6 pr-8 md:pr-12 lg:col-span-2">
|
||||
<ProductDescription product={product} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Suspense>
|
||||
@ -112,7 +103,7 @@ export default async function ProductPage({ params }: { params: { handle: string
|
||||
<Footer />
|
||||
</Suspense>
|
||||
</Suspense>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -124,9 +115,30 @@ async function RelatedProducts({ id }: { id: string }) {
|
||||
return (
|
||||
<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">
|
||||
<ProductGridItems products={relatedProducts} />
|
||||
</Grid>
|
||||
<div className="flex flex-row space-x-4 overflow-auto">
|
||||
{relatedProducts.map((product, i) => {
|
||||
return (
|
||||
<Link
|
||||
key={i}
|
||||
className="h-full w-1/2 flex-none lg:w-1/5"
|
||||
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>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
'use client';
|
||||
|
||||
import { PlusIcon } from '@heroicons/react/24/outline';
|
||||
import clsx from 'clsx';
|
||||
import { addItem } from 'components/cart/actions';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import { useEffect, useState, useTransition } from 'react';
|
||||
|
||||
import LoadingDots from 'components/loading-dots';
|
||||
import { ProductVariant } from 'lib/shopify/types';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import { useEffect, useState, useTransition } from 'react';
|
||||
|
||||
export function AddToCart({
|
||||
variants,
|
||||
@ -50,15 +50,17 @@ export function AddToCart({
|
||||
});
|
||||
}}
|
||||
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',
|
||||
'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90',
|
||||
{
|
||||
'cursor-not-allowed opacity-60': !availableForSale,
|
||||
'cursor-not-allowed': isPending
|
||||
}
|
||||
)}
|
||||
>
|
||||
<div className="absolute left-0 ml-4">
|
||||
{!isPending ? <PlusIcon className="h-5" /> : <LoadingDots className="mb-3 bg-white" />}
|
||||
</div>
|
||||
<span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span>
|
||||
{isPending ? <LoadingDots className="bg-white dark:bg-black" /> : null}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
@ -22,15 +22,15 @@ export function GridTileImage({
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
'relative flex h-full w-full items-center justify-center overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black',
|
||||
'relative flex h-full w-full items-center justify-center overflow-hidden rounded-lg border bg-white dark:bg-black',
|
||||
active !== undefined && active
|
||||
? 'border-2 border-blue-600'
|
||||
: 'border-gray-200 dark:border-gray-800',
|
||||
{
|
||||
relative: labels
|
||||
}
|
||||
)}
|
||||
>
|
||||
{active !== undefined && active ? (
|
||||
<span className="absolute h-full w-full bg-white opacity-25"></span>
|
||||
) : null}
|
||||
{props.src ? (
|
||||
<Image
|
||||
className={clsx('relative h-full w-full object-contain', {
|
||||
@ -45,7 +45,7 @@ export function GridTileImage({
|
||||
title={labels.title}
|
||||
amount={labels.amount}
|
||||
currencyCode={labels.currencyCode}
|
||||
size="large"
|
||||
size={labels.isSmall ? 'small' : 'large'}
|
||||
position={labelPosition}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
@ -17,23 +17,32 @@ const Label = ({
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
'absolute bottom-0 left-0 flex items-center rounded-full border bg-white/80 p-1 text-black backdrop-blur-md dark:border-gray-800 dark:bg-black/80 dark:text-white',
|
||||
size === 'large' ? 'text-sm' : 'text-xs',
|
||||
'absolute bottom-0 left-0 flex w-full',
|
||||
position === 'center'
|
||||
? 'mb-4 ml-4 md:mb-8 md:ml-8 lg:mb-[35%] lg:ml-20'
|
||||
? 'px-4 pb-4 md:px-8 md:pb-8 lg:px-20 lg:pb-[35%]'
|
||||
: size === 'large'
|
||||
? 'mb-4 ml-4 md:mb-8 md:ml-8'
|
||||
: 'mb-4 ml-4'
|
||||
? 'px-4 pb-4 md:px-8 md:pb-8'
|
||||
: 'px-4 pb-4'
|
||||
)}
|
||||
>
|
||||
<h3 data-testid="product-name" className="mr-6 inline pl-2 font-semibold">
|
||||
{title}
|
||||
</h3>
|
||||
<Price
|
||||
className="flex-none rounded-full bg-blue-600 p-2 font-semibold text-white"
|
||||
amount={amount}
|
||||
currencyCode={currencyCode}
|
||||
/>
|
||||
<div
|
||||
className={clsx(
|
||||
'flex items-center rounded-full border bg-white/80 p-1 text-black backdrop-blur-md dark:border-gray-800 dark:bg-black/80 dark:text-white',
|
||||
size === 'large' ? 'text-sm' : 'text-xs'
|
||||
)}
|
||||
>
|
||||
<h3
|
||||
data-testid="product-name"
|
||||
className="mr-6 inline pl-2 font-semibold leading-none tracking-tight"
|
||||
>
|
||||
{title}
|
||||
</h3>
|
||||
<Price
|
||||
className="flex-none rounded-full bg-blue-600 p-2 font-semibold text-white"
|
||||
amount={amount}
|
||||
currencyCode={currencyCode}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,22 +1,12 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
|
||||
import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
|
||||
import clsx from 'clsx';
|
||||
import { GridTileImage } from 'components/grid/tile';
|
||||
import Image from 'next/image';
|
||||
import { useState } from 'react';
|
||||
|
||||
export function Gallery({
|
||||
title,
|
||||
amount,
|
||||
currencyCode,
|
||||
images
|
||||
}: {
|
||||
title: string;
|
||||
amount: string;
|
||||
currencyCode: string;
|
||||
images: { src: string; altText: string }[];
|
||||
}) {
|
||||
export function Gallery({ images }: { images: { src: string; altText: string }[] }) {
|
||||
const [currentImage, setCurrentImage] = useState(0);
|
||||
|
||||
function handleNavigate(direction: 'next' | 'previous') {
|
||||
@ -28,56 +18,53 @@ export function Gallery({
|
||||
}
|
||||
|
||||
const buttonClassName =
|
||||
'px-9 cursor-pointer ease-in-and-out duration-200 transition-bg bg-[#7928ca] hover:bg-violetDark';
|
||||
'h-full px-6 transition-all ease-in-out hover:scale-110 hover:text-black dark:hover:text-white';
|
||||
|
||||
return (
|
||||
<div className="h-full">
|
||||
<div className="relative h-full max-h-[600px] overflow-hidden">
|
||||
<div className="mr-8 h-full">
|
||||
<div className="relative mb-12 h-full max-h-[550px] overflow-hidden">
|
||||
{images[currentImage] && (
|
||||
<GridTileImage
|
||||
src={images[currentImage]?.src as string}
|
||||
alt={images[currentImage]?.altText as string}
|
||||
width={600}
|
||||
<Image
|
||||
className="relative h-full w-full object-contain"
|
||||
height={600}
|
||||
isInteractive={false}
|
||||
priority={true}
|
||||
labels={{
|
||||
title,
|
||||
amount,
|
||||
currencyCode
|
||||
}}
|
||||
width={600}
|
||||
alt={images[currentImage]?.altText as string}
|
||||
src={images[currentImage]?.src as string}
|
||||
/>
|
||||
)}
|
||||
|
||||
{images.length > 1 ? (
|
||||
<div className="absolute bottom-10 right-10 flex h-12 flex-row border border-white text-white shadow-xl dark:border-black dark:text-black">
|
||||
<button
|
||||
aria-label="Previous product image"
|
||||
className={clsx(buttonClassName, 'border-r border-white dark:border-black')}
|
||||
onClick={() => handleNavigate('previous')}
|
||||
>
|
||||
<ChevronLeftIcon className="h-6" />
|
||||
</button>
|
||||
<button
|
||||
aria-label="Next product image"
|
||||
className={clsx(buttonClassName)}
|
||||
onClick={() => handleNavigate('next')}
|
||||
>
|
||||
<ChevronRightIcon className="h-6" />
|
||||
</button>
|
||||
<div className="absolute bottom-[15%] flex w-full justify-center">
|
||||
<div className="mx-auto flex h-11 items-center rounded-full border border-white bg-light/80 text-gray-500 backdrop-blur dark:border-black dark:bg-dark/80">
|
||||
<button
|
||||
aria-label="Previous product image"
|
||||
onClick={() => handleNavigate('previous')}
|
||||
className={buttonClassName}
|
||||
>
|
||||
<ArrowLeftIcon className="h-5" />
|
||||
</button>
|
||||
<div className="mx-1 h-6 w-px bg-gray-500"></div>
|
||||
<button
|
||||
aria-label="Next product image"
|
||||
onClick={() => handleNavigate('next')}
|
||||
className={buttonClassName}
|
||||
>
|
||||
<ArrowRightIcon className="h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{images.length > 1 ? (
|
||||
<div className="flex">
|
||||
<div className="flex items-center justify-center space-x-2 overflow-auto">
|
||||
{images.map((image, index) => {
|
||||
const isActive = index === currentImage;
|
||||
return (
|
||||
<button
|
||||
aria-label="Enlarge product image"
|
||||
key={image.src}
|
||||
className="h-full w-1/4"
|
||||
className={clsx('h-auto w-20')}
|
||||
onClick={() => setCurrentImage(index)}
|
||||
>
|
||||
<GridTileImage
|
||||
|
||||
31
components/product/product-description.tsx
Normal file
31
components/product/product-description.tsx
Normal file
@ -0,0 +1,31 @@
|
||||
import { AddToCart } from 'components/cart/add-to-cart';
|
||||
import Price from 'components/price';
|
||||
import Prose from 'components/prose';
|
||||
import { Product } from 'lib/shopify/types';
|
||||
import { VariantSelector } from './variant-selector';
|
||||
|
||||
export function ProductDescription({ product }: { product: Product }) {
|
||||
return (
|
||||
<>
|
||||
<div className="mb-6 flex flex-col border-b pb-6 dark:border-gray-700">
|
||||
<h1 className="mb-2 text-5xl font-medium">{product.title}</h1>
|
||||
<div className="mr-auto w-auto rounded-full bg-blue-600 p-2 text-sm text-white">
|
||||
<Price
|
||||
amount={product.priceRange.maxVariantPrice.amount}
|
||||
currencyCode={product.priceRange.maxVariantPrice.currencyCode}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<VariantSelector options={product.options} variants={product.variants} />
|
||||
|
||||
{product.descriptionHtml ? (
|
||||
<Prose
|
||||
className="mb-6 text-sm leading-tight dark:text-white/[60%]"
|
||||
html={product.descriptionHtml}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<AddToCart variants={product.variants} availableForSale={product.availableForSale} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -114,10 +114,10 @@ export function VariantSelector({
|
||||
href={optionUrl}
|
||||
title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`}
|
||||
className={clsx(
|
||||
'flex h-12 min-w-[48px] items-center justify-center rounded-full px-2 text-sm',
|
||||
'flex min-w-[48px] items-center justify-center rounded-full border bg-gray-100 px-2 py-1 text-sm dark:border-gray-900 dark:bg-gray-900',
|
||||
{
|
||||
'cursor-default ring-2 ring-black dark:ring-white': isActive,
|
||||
'ring-1 ring-gray-300 transition duration-300 ease-in-out hover:scale-110 hover:bg-gray-100 hover:ring-black dark:ring-gray-700 dark:hover:bg-transparent dark:hover:ring-white':
|
||||
'cursor-default ring-2 ring-blue-600': isActive,
|
||||
'ring-1 ring-transparent transition duration-300 ease-in-out hover:scale-110 hover:ring-blue-600 ':
|
||||
!isActive && isAvailableForSale,
|
||||
'relative z-10 cursor-not-allowed overflow-hidden bg-gray-100 ring-1 ring-gray-300 before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-gray-300 before:transition-transform dark:bg-gray-900 dark:ring-gray-700 before:dark:bg-gray-700':
|
||||
!isAvailableForSale
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user