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 sku to the variant selector page

Browse Source 
Signed-off-by: jrphilo <james.philo@me.com>
This commit is contained in:
jrphilo 2024-07-08 09:18:19 +02:00
parent 910f08ba4f
commit e3148ce02a
No known key found for this signature in database
GPG Key ID: A8BAD7933F97046F
1 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -96,7 +96,7 @@ export function VariantSelector({
leaveFrom="opacity-100 backdrop-blur-[.5px]" leaveFrom="opacity-100 backdrop-blur-[.5px]"
leaveTo="opacity-0 backdrop-blur-none" leaveTo="opacity-0 backdrop-blur-none"
> >
<div className="fixed inset-0 bg-black/30" aria-hidden="true" /> <div className="bg-black/30 fixed inset-0" aria-hidden="true" />
</TransitionChild> </TransitionChild>
<TransitionChild <TransitionChild
as={Fragment} as={Fragment}
@ -107,7 +107,7 @@ export function VariantSelector({
leaveFrom="translate-x-0" leaveFrom="translate-x-0"
leaveTo="translate-x-full" leaveTo="translate-x-full"
> >
<DialogPanel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl md:w-[500px]"> <DialogPanel className="text-black fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 backdrop-blur-xl md:w-[500px]">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<p className="text-lg font-semibold">Manufactured & Used Options</p> <p className="text-lg font-semibold">Manufactured & Used Options</p>
@ -123,6 +123,8 @@ export function VariantSelector({
className="flex-grow flex-col space-y-4 overflow-auto px-2 py-4" className="flex-grow flex-col space-y-4 overflow-auto px-2 py-4"
> >
{option.values.map((value) => { {option.values.map((value) => {
console.log('option', option);
console.log('variants', variants);
const optionNameLowerCase = option.name.toLowerCase(); const optionNameLowerCase = option.name.toLowerCase();
const optionSearchParams = new URLSearchParams(searchParams.toString()); const optionSearchParams = new URLSearchParams(searchParams.toString());
@ -209,10 +211,10 @@ export function VariantSelector({
/> />
) : null} ) : null}
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<span className="text-xs font-medium text-gray-600"> <span className="text-xs font-medium text-gray-600">SKU:</span>
{option.name}: <span className="text-xs text-gray-600">
{variant?.sku || 'N/A'}
</span> </span>
<span className="text-xs text-gray-600">{value}</span>
</div> </div>
</div> </div>
{!isAvailableForSale ? <span>Out of Stock</span> : null} {!isAvailableForSale ? <span>Out of Stock</span> : null}