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

Disables link scroll on variant selection

Browse Source
This commit is contained in:
Michael Novotny 2023-07-25 10:32:14 -05:00
parent 326f516138
commit ed2b46d96b
No known key found for this signature in database
2 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/grid/three-items.tsx
View File

@ -38,7 +38,7 @@ export async function ThreeItemGrid() {
const [firstProduct, secondProduct, thirdProduct] = homepageItems; const [firstProduct, secondProduct, thirdProduct] = homepageItems;
return ( return (
<section className="mx-auto max-w-screen-2xl gap-4 pb-4 lg:grid lg:grid-cols-6 lg:grid-rows-2"> <section className="mx-auto grid max-w-screen-2xl gap-4 pb-4 lg:grid-cols-6 lg:grid-rows-2">
<ThreeItemGridItem size="full" item={firstProduct} /> <ThreeItemGridItem size="full" item={firstProduct} />
<ThreeItemGridItem size="half" item={secondProduct} /> <ThreeItemGridItem size="half" item={secondProduct} />
<ThreeItemGridItem size="half" item={thirdProduct} /> <ThreeItemGridItem size="half" item={thirdProduct} />

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

@ -107,11 +107,14 @@ export function VariantSelector({
)?.availableForSale; )?.availableForSale;
const DynamicTag = isAvailableForSale ? Link : 'p'; const DynamicTag = isAvailableForSale ? Link : 'p';
const dynamicProps = {
...(isAvailableForSale && { href: optionUrl, scroll: false })
};
return ( return (
<DynamicTag <DynamicTag
key={value} key={value}
href={optionUrl} aria-disabled={!isAvailableForSale}
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-900 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-900 dark:bg-neutral-900',
@ -123,6 +126,7 @@ export function VariantSelector({
!isAvailableForSale !isAvailableForSale
} }
)} )}
{...dynamicProps}
> >
{value} {value}
</DynamicTag> </DynamicTag>