cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Changes variants to use router replace (#1157)

Browse Source
This commit is contained in:
Michael Novotny 2023-08-08 10:00:08 -05:00 committed by GitHub
parent faa7491a55
commit c6eb7a30f9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>