crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: sort button visual and filter by variant metafield

Browse Source 
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe
2024-05-07 13:30:26 +07:00
parent 305fe3d458
commit 145eb3eaed
9 changed files with 109 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/layout/search/filters/filters-list.tsx
View File

@@ -8,10 +8,16 @@ const Filters = ({ filters }: { filters: Filter[] }) => {
const router = useRouter();
const pathname = usePathname();
const searchParams = useSearchParams();
const { q, sort, collection } = Object.fromEntries(searchParams);
const initialFilters = {
...(q && { q }),
...(sort && { sort }),
...(collection && { collection })
};
const handleChange = (e: React.FormEvent<HTMLFormElement>) => {
const formData = new FormData(e.currentTarget);
const newSearchParams = new URLSearchParams(searchParams);
const newSearchParams = new URLSearchParams(initialFilters);
Array.from(formData.keys()).forEach((key) => {
const values = formData.getAll(key);

19
components/layout/search/sorting-menu/index.tsx
View File

@@ -2,18 +2,27 @@
import { Menu, Transition } from '@headlessui/react';
import { ChevronDownIcon } from '@heroicons/react/20/solid';
import { sorting } from 'lib/constants';
import { defaultSort, sorting } from 'lib/constants';
import { useSearchParams } from 'next/navigation';
import { Fragment } from 'react';
import SortingItem from './item';
const SortingMenu = () => {
const searchParams = useSearchParams();
const sort = searchParams.get('sort');
return (
<Menu as="div" className="relative inline-block text-left">
<div>
<Menu.Button className="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900">
Sort
<Menu.Button className="group inline-flex justify-center rounded border border-gray-300 px-3 py-1 text-sm text-gray-700 hover:bg-gray-100">
<div className="flex items-center gap-2">
Sort by:{' '}
<span>
{sorting.find((option) => option.slug === sort)?.title || defaultSort.title}
</span>
</div>
<ChevronDownIcon
className="-mr-1 ml-1 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
className="-mr-1 ml-1.5 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
aria-hidden="true"
/>
</Menu.Button>
@@ -28,7 +37,7 @@ const SortingMenu = () => {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute right-0 z-10 mt-2 w-40 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<Menu.Items className="absolute right-0 z-10 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div className="py-1">
{sorting.map((option) => (
<Menu.Item key={option.title}>