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>
{options && options.length > 0 ? (
<div className="">
{options.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>
))}
{/** attempt to sort the options array alphabetically by option name, that way options will always appear in the same order */}
{options
.sort((first: any, second: any) => {
if (first.name && second.name) {
return first.name < second.name
? -1
: first.name > second.name
? 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>
) : null}
<div className="flex items-center mt-3">