crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-06-14 19:41:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

reslove github comments

Browse Source
This commit is contained in:
StephDietz 2023-07-12 14:57:16 -05:00
parent 1bec104544
commit 59054f160c
3 changed files with 21 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -74,14 +74,15 @@ export default async function ProductPage({ params }: { params: { handle: string
}; };
return ( return (
<div className="px-4"> <>
<script <script
type="application/ld+json" type="application/ld+json"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: JSON.stringify(productJsonLd) __html: JSON.stringify(productJsonLd)
}} }}
/> />
<div className="rounded-lg border border-gray-200 bg-white p-8 dark:border-gray-700 dark:bg-black md:p-12 lg:grid lg:grid-cols-6"> <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"> <div className="lg:col-span-4">
<Gallery <Gallery
images={product.images.map((image: Image) => ({ images={product.images.map((image: Image) => ({
@ -95,13 +96,14 @@ export default async function ProductPage({ params }: { params: { handle: string
<ProductDescription product={product} /> <ProductDescription product={product} />
</div> </div>
</div> </div>
</div>
<Suspense> <Suspense>
<RelatedProducts id={product.id} /> <RelatedProducts id={product.id} />
<Suspense> <Suspense>
<Footer /> <Footer />
</Suspense> </Suspense>
</Suspense> </Suspense>
</div> </>
); );
} }

5
components/cart/add-to-cart.tsx
View File

@ -57,9 +57,10 @@ export function AddToCart({
} }
)} )}
> >
<div className="absolute left-0 ml-4">{!isPending ? <PlusIcon className="h-5" /> : null}</div> <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> <span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span>
{isPending ? <LoadingDots className="bg-white" /> : null}
</button> </button>
); );
} }

6
components/product/gallery.tsx
View File

@ -21,7 +21,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
'h-full px-6 transition-all ease-in-out hover:scale-110 hover:text-black dark:hover:text-white'; 'h-full px-6 transition-all ease-in-out hover:scale-110 hover:text-black dark:hover:text-white';
return ( return (
<div className="h-full"> <div className="mr-8 h-full">
<div className="relative mb-12 h-full max-h-[550px] overflow-hidden"> <div className="relative mb-12 h-full max-h-[550px] overflow-hidden">
{images[currentImage] && ( {images[currentImage] && (
<Image <Image
@ -57,14 +57,14 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
</div> </div>
{images.length > 1 ? ( {images.length > 1 ? (
<div className="flex space-x-2"> <div className="flex space-x-2 overflow-auto">
{images.map((image, index) => { {images.map((image, index) => {
const isActive = index === currentImage; const isActive = index === currentImage;
return ( return (
<button <button
aria-label="Enlarge product image" aria-label="Enlarge product image"
key={image.src} key={image.src}
className={clsx('h-auto w-1/6')} className={clsx('h-auto w-20')}
onClick={() => setCurrentImage(index)} onClick={() => setCurrentImage(index)}
> >
<GridTileImage <GridTileImage