crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-06-18 21:21:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added a sort to the options before displaying

Browse Source
This commit is contained in:
matthew collins 2021-05-06 10:07:40 -04:00
parent c577fd9fbb
commit 4fb9b69c95
1 changed files with 28 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
components/cart/CartItem/CartItem.tsx
View File

@ -116,15 +116,34 @@ const CartItem = ({
</Link> </Link>
{options && options.length > 0 ? ( {options && options.length > 0 ? (
<div className=""> <div className="">
{options.map((option: ItemOption, i: number) => ( {/** attempt to sort the options array alphabetically by option name, that way options will always appear in the same order */}
<span {options
key={`${item.id}-${option.name}`} .sort((first: any, second: any) => {
className="text-sm font-semibold text-accents-7" if (first.name && second.name) {
> return first.name < second.name
{option.value} ? -1
{i === options.length - 1 ? '' : ', '} : first.name > second.name
</span> ? 1
))} : 0
} else {
if (JSON.stringify(first) < JSON.stringify(second)) {
return -1
} else if (JSON.stringify(first) > JSON.stringify(second)) {
return 1
} else {
return 0
}
}
})
.map((option: ItemOption, i: number) => (
<span
key={`${item.id}-${option.name}`}
className="text-sm font-semibold text-accents-7"
>
{option.value}
{i === options.length - 1 ? '' : ', '}
</span>
))}
</div> </div>
) : null} ) : null}
<div className="flex items-center mt-3"> <div className="flex items-center mt-3">