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

Merge branch 'main' into readme-adding-shopware

Browse Source
This commit is contained in:
Michael Novotny 2023-08-08 15:06:55 -05:00 committed by GitHub
commit ea03bce942
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 11 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -82,7 +82,7 @@ export default async function ProductPage({ params }: { params: { handle: string
}} }}
/> />
<div className="mx-auto max-w-screen-2xl px-4"> <div className="mx-auto max-w-screen-2xl px-4">
<div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row"> <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row lg:gap-8">
<div className="h-full w-full basis-full lg:basis-4/6"> <div className="h-full w-full basis-full lg:basis-4/6">
<Gallery <Gallery
images={product.images.map((image: Image) => ({ images={product.images.map((image: Image) => ({

2
components/layout/footer.tsx
View File

@ -39,7 +39,7 @@ export default async function Footer() {
</Suspense> </Suspense>
<div className="md:ml-auto"> <div className="md:ml-auto">
<a <a
className="flex h-8 flex-none items-center justify-center rounded-md border border-neutral-200 bg-white text-xs text-black dark:border-neutral-700 dark:bg-black dark:text-white" className="flex h-8 w-max flex-none items-center justify-center rounded-md border border-neutral-200 bg-white text-xs text-black dark:border-neutral-700 dark:bg-black dark:text-white"
aria-label="Deploy on Vercel" aria-label="Deploy on Vercel"
href="https://vercel.com/templates/next.js/nextjs-commerce" href="https://vercel.com/templates/next.js/nextjs-commerce"
> >

2
components/product/gallery.tsx
View File

@ -74,7 +74,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
imageSearchParams.set('image', index.toString()); imageSearchParams.set('image', index.toString());
return ( return (
<li key={image.src} className="h-auto w-20"> <li key={image.src} className="h-20 w-20">
<Link <Link
aria-label="Enlarge product image" aria-label="Enlarge product image"
href={createUrl(pathname, imageSearchParams)} href={createUrl(pathname, imageSearchParams)}

20
components/product/variant-selector.tsx
View File

@ -3,8 +3,7 @@
import clsx from 'clsx'; import clsx from 'clsx';
import { ProductOption, ProductVariant } from 'lib/shopify/types'; import { ProductOption, ProductVariant } from 'lib/shopify/types';
import { createUrl } from 'lib/utils'; import { createUrl } from 'lib/utils';
import Link from 'next/link'; import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { usePathname, useSearchParams } from 'next/navigation';
type Combination = { type Combination = {
id: string; id: string;
@ -19,6 +18,7 @@ export function VariantSelector({
options: ProductOption[]; options: ProductOption[];
variants: ProductVariant[]; variants: ProductVariant[];
}) { }) {
const router = useRouter();
const pathname = usePathname(); const pathname = usePathname();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const hasNoOptionsOrJustOneOption = const hasNoOptionsOrJustOneOption =
@ -76,17 +76,14 @@ export function VariantSelector({
// The option is active if it's in the url params. // The option is active if it's in the url params.
const isActive = searchParams.get(optionNameLowerCase) === value; const isActive = searchParams.get(optionNameLowerCase) === value;
// You can't disable a link, so we need to render something that isn't clickable.
const DynamicTag = isAvailableForSale ? Link : 'p';
const dynamicProps = {
...(isAvailableForSale && { scroll: false })
};
return ( return (
<DynamicTag <button
key={value} key={value}
aria-disabled={!isAvailableForSale} aria-disabled={!isAvailableForSale}
href={optionUrl} disabled={!isAvailableForSale}
onClick={() => {
router.replace(optionUrl, { scroll: false });
}}
title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`} title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`}
className={clsx( className={clsx(
'flex min-w-[48px] items-center justify-center rounded-full border bg-neutral-100 px-2 py-1 text-sm dark:border-neutral-800 dark:bg-neutral-900', 'flex min-w-[48px] items-center justify-center rounded-full border bg-neutral-100 px-2 py-1 text-sm dark:border-neutral-800 dark:bg-neutral-900',
@ -98,10 +95,9 @@ export function VariantSelector({
!isAvailableForSale !isAvailableForSale
} }
)} )}
{...dynamicProps}
> >
{value} {value}
</DynamicTag> </button>
); );
})} })}
</dd> </dd>