mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 20:26:49 +00:00
feat: add metafields to variant options
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe
@@ -127,139 +127,151 @@ export function VariantSelector({
|
||||
<XMarkIcon className="h-6" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-5 flex h-full flex-col justify-between overflow-hidden ">
|
||||
<div>
|
||||
{options.map((option) => {
|
||||
return (
|
||||
<ul
|
||||
key={option.id}
|
||||
className="flex-grow flex-col space-y-4 overflow-auto px-1 py-4"
|
||||
>
|
||||
{option.values.map((value) => {
|
||||
const optionNameLowerCase = option.name.toLowerCase();
|
||||
const optionSearchParams = new URLSearchParams(searchParams.toString());
|
||||
<div className="mt-5 flex h-full flex-col justify-between overflow-hidden">
|
||||
{options.map((option) => {
|
||||
return (
|
||||
<ul
|
||||
key={option.id}
|
||||
className="flex-grow flex-col space-y-4 overflow-auto px-2 py-4"
|
||||
>
|
||||
{option.values.map((value) => {
|
||||
const optionNameLowerCase = option.name.toLowerCase();
|
||||
const optionSearchParams = new URLSearchParams(searchParams.toString());
|
||||
|
||||
optionSearchParams.set(optionNameLowerCase, value);
|
||||
optionSearchParams.set(optionNameLowerCase, value);
|
||||
|
||||
// In order to determine if an option is available for sale, we need to:
|
||||
//
|
||||
// 1. Filter out all other param state
|
||||
// 2. Filter out invalid options
|
||||
// 3. Check if the option combination is available for sale
|
||||
//
|
||||
// This is the "magic" that will cross check possible variant combinations and preemptively
|
||||
// disable combinations that are not available. For example, if the color gray is only available in size medium,
|
||||
// then all other sizes should be disabled.
|
||||
const filtered = Array.from(optionSearchParams.entries()).filter(
|
||||
([key, value]) =>
|
||||
options.find(
|
||||
(option) =>
|
||||
option.name.toLowerCase() === key && option.values.includes(value)
|
||||
)
|
||||
);
|
||||
|
||||
const isAvailableForSale = combinations.find((combination) =>
|
||||
filtered.every(
|
||||
([key, value]) =>
|
||||
combination[key] === value && combination.availableForSale
|
||||
// In order to determine if an option is available for sale, we need to:
|
||||
//
|
||||
// 1. Filter out all other param state
|
||||
// 2. Filter out invalid options
|
||||
// 3. Check if the option combination is available for sale
|
||||
//
|
||||
// This is the "magic" that will cross check possible variant combinations and preemptively
|
||||
// disable combinations that are not available. For example, if the color gray is only available in size medium,
|
||||
// then all other sizes should be disabled.
|
||||
const filtered = Array.from(optionSearchParams.entries()).filter(
|
||||
([key, value]) =>
|
||||
options.find(
|
||||
(option) =>
|
||||
option.name.toLowerCase() === key && option.values.includes(value)
|
||||
)
|
||||
);
|
||||
);
|
||||
|
||||
const variant = isAvailableForSale
|
||||
? variantsById[isAvailableForSale.id]
|
||||
: undefined;
|
||||
const isAvailableForSale = combinations.find((combination) =>
|
||||
filtered.every(
|
||||
([key, value]) =>
|
||||
combination[key] === value && combination.availableForSale
|
||||
)
|
||||
);
|
||||
|
||||
const coreChargeOptions = [
|
||||
variant?.waiverAvailable && {
|
||||
label: 'Core Waiver',
|
||||
value: CORE_WAIVER,
|
||||
price: { amount: 0, currencyCode: variant?.price.currencyCode }
|
||||
},
|
||||
variant?.coreVariantId &&
|
||||
variant.coreCharge && {
|
||||
label: 'Core Charge',
|
||||
value: variant.coreVariantId,
|
||||
price: variant.coreCharge
|
||||
}
|
||||
].filter(Boolean) as CoreChargeOption[];
|
||||
const variant = isAvailableForSale
|
||||
? variantsById[isAvailableForSale.id]
|
||||
: undefined;
|
||||
|
||||
// preset the first core charge option if not set
|
||||
coreChargeOptions[0] &&
|
||||
optionSearchParams.set(CORE_VARIANT_ID_KEY, coreChargeOptions[0].value);
|
||||
const coreChargeOptions = [
|
||||
variant?.waiverAvailable && {
|
||||
label: 'Core Waiver',
|
||||
value: CORE_WAIVER,
|
||||
price: { amount: 0, currencyCode: variant?.price.currencyCode }
|
||||
},
|
||||
variant?.coreVariantId &&
|
||||
variant.coreCharge && {
|
||||
label: 'Core Charge',
|
||||
value: variant.coreVariantId,
|
||||
price: variant.coreCharge
|
||||
}
|
||||
].filter(Boolean) as CoreChargeOption[];
|
||||
|
||||
const optionUrl = createUrl(pathname, optionSearchParams);
|
||||
// preset the first core charge option if not set
|
||||
coreChargeOptions[0] &&
|
||||
optionSearchParams.set(CORE_VARIANT_ID_KEY, coreChargeOptions[0].value);
|
||||
|
||||
// The option is active if it's in the url params.
|
||||
const isActive = searchParams.get(optionNameLowerCase) === value;
|
||||
const optionUrl = createUrl(pathname, optionSearchParams);
|
||||
|
||||
return (
|
||||
<li
|
||||
key={value}
|
||||
className={clsx('flex w-full rounded border border-neutral-300', {
|
||||
'cursor-default ring-2 ring-secondary': isActive,
|
||||
'ring-2 ring-transparent hover:ring-secondary':
|
||||
!isActive && isAvailableForSale,
|
||||
'cursor-not-allowed opacity-60 ring-1 ring-neutral-300':
|
||||
!isAvailableForSale
|
||||
})}
|
||||
// The option is active if it's in the url params.
|
||||
const isActive = searchParams.get(optionNameLowerCase) === value;
|
||||
|
||||
return (
|
||||
<li
|
||||
key={value}
|
||||
className={clsx('flex w-full rounded border border-neutral-300', {
|
||||
'cursor-default ring-2 ring-secondary': isActive,
|
||||
'ring-2 ring-transparent hover:ring-secondary':
|
||||
!isActive && isAvailableForSale,
|
||||
'cursor-not-allowed opacity-60 ring-1 ring-neutral-300':
|
||||
!isAvailableForSale
|
||||
})}
|
||||
>
|
||||
<button
|
||||
disabled={!isAvailableForSale}
|
||||
aria-disabled={!isAvailableForSale}
|
||||
onClick={() => router.replace(optionUrl, { scroll: false })}
|
||||
className="flex w-full flex-col gap-2 px-4 py-3"
|
||||
>
|
||||
<button
|
||||
disabled={!isAvailableForSale}
|
||||
aria-disabled={!isAvailableForSale}
|
||||
onClick={() => router.replace(optionUrl, { scroll: false })}
|
||||
className="flex w-full flex-col gap-2 px-4 py-3"
|
||||
>
|
||||
<div className="flex w-full flex-row items-center justify-between">
|
||||
<div className="flex flex-col items-start gap-1">
|
||||
{variant ? (
|
||||
<Price
|
||||
amount={variant.price.amount}
|
||||
currencyCode={variant.price.currencyCode}
|
||||
className="text-base font-semibold"
|
||||
/>
|
||||
) : null}
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-xs font-medium text-gray-600">
|
||||
{option.name}:
|
||||
</span>
|
||||
<span className="text-xs text-gray-600">{value}</span>
|
||||
</div>
|
||||
<div className="flex w-full flex-row items-center justify-between">
|
||||
<div className="flex flex-col items-start gap-1">
|
||||
{variant ? (
|
||||
<Price
|
||||
amount={variant.price.amount}
|
||||
currencyCode={variant.price.currencyCode}
|
||||
className="text-base font-semibold"
|
||||
/>
|
||||
) : null}
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-xs font-medium text-gray-600">
|
||||
{option.name}:
|
||||
</span>
|
||||
<span className="text-xs text-gray-600">{value}</span>
|
||||
</div>
|
||||
{!isAvailableForSale ? <span>Out of Stock</span> : null}
|
||||
</div>
|
||||
<div className="mt-1.5 flex flex-row flex-wrap items-center gap-3">
|
||||
{coreChargeOptions.map((option) => (
|
||||
<button
|
||||
key={option.value}
|
||||
disabled={!isActive}
|
||||
className={clsx(
|
||||
'flex flex-row items-center gap-2 rounded-full border border-neutral-300 px-3 py-1 text-xs',
|
||||
{
|
||||
'bg-gray-200':
|
||||
isActive &&
|
||||
searchParams.get(CORE_VARIANT_ID_KEY) === option.value,
|
||||
'bg-transparent':
|
||||
searchParams.get(CORE_VARIANT_ID_KEY) !== option.value,
|
||||
'cursor-not-allowed opacity-50 hover:bg-transparent':
|
||||
!isActive,
|
||||
'hover:bg-gray-200': isActive
|
||||
}
|
||||
)}
|
||||
onClick={(e) => handleCoreChargeClick(e, option.value)}
|
||||
>
|
||||
<span>{option.label}</span>
|
||||
<Price {...option.price} />
|
||||
</button>
|
||||
))}
|
||||
{!isAvailableForSale ? <span>Out of Stock</span> : null}
|
||||
</div>
|
||||
<div className="mt-1.5 flex flex-row flex-wrap items-center gap-3">
|
||||
{coreChargeOptions.map((option) => (
|
||||
<button
|
||||
key={option.value}
|
||||
disabled={!isActive}
|
||||
className={clsx(
|
||||
'flex flex-row items-center gap-2 rounded-full border border-neutral-300 px-3 py-1 text-xs',
|
||||
{
|
||||
'bg-gray-200':
|
||||
isActive &&
|
||||
searchParams.get(CORE_VARIANT_ID_KEY) === option.value,
|
||||
'bg-transparent':
|
||||
searchParams.get(CORE_VARIANT_ID_KEY) !== option.value,
|
||||
'cursor-not-allowed opacity-50 hover:bg-transparent':
|
||||
!isActive,
|
||||
'hover:bg-gray-200': isActive
|
||||
}
|
||||
)}
|
||||
onClick={(e) => handleCoreChargeClick(e, option.value)}
|
||||
>
|
||||
<span>{option.label}</span>
|
||||
<Price {...option.price} />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-2 flex w-full flex-col gap-1 border-t border-gray-300 pl-1 pt-2 text-xs tracking-normal">
|
||||
<div className="flex flex-row items-center gap-2">
|
||||
<span>Condition:</span>
|
||||
<span>{variant?.condition || 'N/A'}</span>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="flex flex-row items-center gap-2">
|
||||
<span>Estimated Delivery:</span>
|
||||
<span>{variant?.estimatedDelivery || 'N/A'}</span>
|
||||
</div>
|
||||
<div className="flex flex-row items-center gap-2">
|
||||
<span>Mileage:</span>
|
||||
<span>{variant?.mileage || 'N/A'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
|
||||
Reference in New Issue
Block a user