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

Merge branch 'main' of github.com:Car-Part-Planet/storefront

Browse Source
This commit is contained in:
Chloe 2024-07-08 15:01:36 +07:00
commit a7d2816836
No known key found for this signature in database
GPG Key ID: CFD53CE570D42DF5
4 changed files with 45 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
components/filters/filters-list.tsx
View File

@ -6,7 +6,7 @@ import { Menu, Metaobject } from 'lib/shopify/types';
import { createUrl, findParentCollection } from 'lib/utils';
import get from 'lodash.get';
import { useParams, useRouter, useSearchParams } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useEffect, useMemo, useState } from 'react';
import { fetMetaobjects } from './actions';
import FilterField from './field';
@ -136,6 +136,31 @@ const FiltersList = ({ makes, menu, autoFocusField }: FiltersListProps) => {
router.push(createUrl(`/search/${partType?.value}`, newSearchParams), { scroll: false });
};
// Sorting logic
const sortedMakes = useMemo(() => {
return [...makes].sort((a, b) => {
const makeA = get(a, 'display_name').toLowerCase();
const makeB = get(b, 'display_name').toLowerCase();
return makeA.localeCompare(makeB);
});
}, [makes]);
const sortedModelOptions = useMemo(() => {
return [...modelOptions].sort((a, b) => {
const modelA = get(a, 'name').toLowerCase();
const modelB = get(b, 'name').toLowerCase();
return modelA.localeCompare(modelB);
});
}, [modelOptions]);
const sortedYearOptions = useMemo(() => {
return [...yearOptions].sort((a, b) => {
const yearA = parseInt(get(a, 'name'), 10);
const yearB = parseInt(get(b, 'name'), 10);
return yearB - yearA; // Descending order for years
});
}, [yearOptions]);
return (
<>
<FilterField
@ -151,7 +176,7 @@ const FiltersList = ({ makes, menu, autoFocusField }: FiltersListProps) => {
label="Make"
onChange={onChangeMake}
selectedValue={make}
options={makes}
options={sortedMakes}
getId={(option) => option.id}
disabled={!partType}
autoFocus={autoFocusField === 'make'}
@ -161,7 +186,7 @@ const FiltersList = ({ makes, menu, autoFocusField }: FiltersListProps) => {
label="Model"
onChange={onChangeModel}
selectedValue={model}
options={modelOptions}
options={sortedModelOptions}
getId={(option) => option.id}
disabled={!make}
autoFocus={autoFocusField === 'model'}
@ -171,7 +196,7 @@ const FiltersList = ({ makes, menu, autoFocusField }: FiltersListProps) => {
label="Year"
onChange={onChangeYear}
selectedValue={year}
options={yearOptions}
options={sortedYearOptions}
getId={(option) => option.id}
disabled={!model || !make}
autoFocus={autoFocusField === 'year'}

4
components/grid/tile.tsx
View File

@ -72,7 +72,7 @@ export function GridTileImage({
>
{props.src ? (
// eslint-disable-next-line jsx-a11y/alt-text -- `alt` is inherited from `props`, which is being enforced with TypeScript
<Image className={clsx('h-full w-full object-cover object-center')} {...props} />
<Image className={clsx('h-full w-full object-contain object-center')} {...props} />
) : (
<div
className="flex h-full w-full items-center justify-center text-gray-400"
@ -157,7 +157,7 @@ export const TileImage = ({
>
{props.src ? (
// eslint-disable-next-line jsx-a11y/alt-text -- `alt` is inherited from `props`, which is being enforced with TypeScript
<Image className={clsx('h-full w-full object-cover object-center')} {...props} />
<Image className={clsx('h-full w-full object-contain object-center')} {...props} />
) : (
<div
className="flex h-full w-full items-center justify-center text-gray-400"

11
components/product/vairant-details.tsx
View File

@ -30,12 +30,19 @@ const VariantDetails = ({ variants, defaultPrice }: VariantDetailsProps) => {
<div className="mt-2 flex items-center justify-start gap-x-2">
{variant?.availableForSale ? (
<div className="flex items-center gap-1 text-sm text-green-500">
<CheckCircleIcon className="size-5" /> In Stock
<CheckCircleIcon className="size-5" /> <strong>In Stock</strong>
</div>
) : (
<span className="text-sm text-red-600">Out of Stock</span>
)}
<p className="text-sm">Condition: {variant?.condition || 'N/A'}</p>
<span className="text-sm">|</span>
<p className="text-sm">
<strong>SKU:</strong> {variant?.sku || 'N/A'}
</p>
<span className="text-sm">|</span>
<p className="text-sm">
<strong>Condition:</strong> {variant?.condition || 'N/A'}
</p>
</div>
</div>
);

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

@ -96,7 +96,7 @@ export function VariantSelector({
leaveFrom="opacity-100 backdrop-blur-[.5px]"
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
as={Fragment}
@ -107,7 +107,7 @@ export function VariantSelector({
leaveFrom="translate-x-0"
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">
<p className="text-lg font-semibold">Manufactured & Used Options</p>
@ -209,10 +209,10 @@ export function VariantSelector({
/>
) : null}
<div className="flex items-center gap-1">
<span className="text-xs font-medium text-gray-600">
{option.name}:
<span className="text-xs font-medium text-gray-600">SKU:</span>
<span className="text-xs text-gray-600">
{variant?.sku || 'N/A'}
</span>
<span className="text-xs text-gray-600">{value}</span>
</div>
</div>
{!isAvailableForSale ? <span>Out of Stock</span> : null}