crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-25 11:11:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement variant selector panel

Browse Source 
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe
2024-05-02 19:14:30 +07:00
parent d5cdb55845
commit 2ad07c3682
8 changed files with 283 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,7 @@ import { ShoppingCartIcon } from '@heroicons/react/24/outline';
import clsx from 'clsx';
import { addItem } from 'components/cart/actions';
import LoadingDots from 'components/loading-dots';
import { CORE_VARIANT_ID_KEY } from 'lib/constants';
import { CORE_VARIANT_ID_KEY, CORE_WAIVER } from 'lib/constants';
import { ProductVariant } from 'lib/shopify/types';
import { useSearchParams } from 'next/navigation';
import { useFormState, useFormStatus } from 'react-dom';
@@ -69,18 +69,20 @@ export function AddToCart({
}) {
const [message, formAction] = useFormState(addItem, null);
const searchParams = useSearchParams();
const defaultVariantId = variants.length === 1 ? variants[0]?.id : undefined;
const variant = variants.find((variant: ProductVariant) =>
variant.selectedOptions.every(
(option) => option.value === searchParams.get(option.name.toLowerCase())
)
);
const selectedVariantId = variant?.id || defaultVariantId;
const selectedVariantId = variant?.id;
const missingCoreVariantId = variant?.coreVariantId && !searchParams.has(CORE_VARIANT_ID_KEY);
const coreVariantId = searchParams.get(CORE_VARIANT_ID_KEY);
const selectedVariantIds = [coreVariantId, selectedVariantId].filter(Boolean) as string[];
// remove special core-waiver value as it is not a valid variant
const selectedVariantIds = [coreVariantId, selectedVariantId]
.filter(Boolean)
.filter((value) => value !== CORE_WAIVER) as string[];
const actionWithVariant = formAction.bind(null, selectedVariantIds);