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

feat: add metafields to variant options

Browse Source 
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe 2024-05-03 12:28:37 +07:00
parent 2ad07c3682
commit e0cd6ac2bd
No known key found for this signature in database
GPG Key ID: CFD53CE570D42DF5
4 changed files with 152 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -127,13 +127,12 @@ export function VariantSelector({
<XMarkIcon className="h-6" />
</button>
</div>
<div className="mt-5 flex h-full flex-col justify-between overflow-hidden ">
<div>
<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-1 py-4"
className="flex-grow flex-col space-y-4 overflow-auto px-2 py-4"
>
{option.values.map((value) => {
const optionNameLowerCase = option.name.toLowerCase();
@ -252,6 +251,20 @@ export function VariantSelector({
</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>
<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>
);
@ -260,7 +273,6 @@ export function VariantSelector({
);
})}
</div>
</div>
</Dialog.Panel>
</Transition.Child>
</Dialog>

9
lib/shopify/fragments/product.ts
View File

@ -55,6 +55,15 @@ const productFragment = /* GraphQL */ `
coreVariantId: metafield(namespace: "custom", key: "coreVariant") {
value
}
estimatedDelivery: metafield(namespace: "custom", key: "delivery") {
value
}
mileage: metafield(namespace: "custom", key: "mileage") {
value
}
condition: metafield(namespace: "custom", key: "condition") {
value
}
}
}
}

5
lib/shopify/index.ts
View File

@ -185,7 +185,10 @@ const reshapeVariants = (variants: ShopifyProductVariant[]): ProductVariant[] =>
...variant,
waiverAvailable: parseMetaFieldValue<boolean>(variant.waiverAvailable),
coreVariantId: variant.coreVariantId?.value || null,
coreCharge: parseMetaFieldValue<Money>(variant.coreCharge)
coreCharge: parseMetaFieldValue<Money>(variant.coreCharge),
mileage: variant.mileage?.value ?? null,
estimatedDelivery: variant.estimatedDelivery?.value || null,
condition: variant.condition?.value || null
}));
};

8
lib/shopify/types.ts
View File

@ -87,15 +87,21 @@ export type ProductVariant = {
barcode: string | null;
sku: string | null;
coreVariantId: string | null;
mileage: number | null;
estimatedDelivery: string | null;
condition: string | null;
};
export type ShopifyProductVariant = Omit<
ProductVariant,
'coreCharge' | 'waiverAvailable' | 'coreVariantId'
'coreCharge' | 'waiverAvailable' | 'coreVariantId' | 'mileage' | 'estimatedDelivery' | 'condition'
> & {
waiverAvailable: { value: string };
coreVariantId: { value: string } | null;
coreCharge: { value: string } | null;
mileage: { value: number } | null;
estimatedDelivery: { value: string } | null;
condition: { value: string } | null;
};
export type SEO = {