+ ([]);
+ const [searching, setSearching] = useState(false);
+ // Guards against a slow early request overwriting a newer one's results.
+ const requestId = useRef(0);
+
+ useEffect(() => {
+ const query = term.trim();
+
+ if (!query) {
+ setResults([]);
+ setSearching(false);
+ return;
+ }
+
+ setSearching(true);
+ const id = ++requestId.current;
+
+ const timer = setTimeout(async () => {
+ try {
+ const { products } = await searchSuggestions(query, SUGGESTION_COUNT);
+ if (id !== requestId.current) return;
+ setResults(products);
+ } catch (err) {
+ console.error('Search failed:', err);
+ if (id === requestId.current) setResults([]);
+ } finally {
+ if (id === requestId.current) setSearching(false);
+ }
+ }, DEBOUNCE_MS);
+
+ return () => clearTimeout(timer);
+ }, [term]);
+
+ const close = () => {
+ setOpen(false);
+ setTerm('');
+ setResults([]);
+ };
+
+ const goToSearchPage = () => {
+ const query = term.trim();
+ close();
+ router.push(query ? `/search?q=${encodeURIComponent(query)}` : '/search');
+ };
+
+ const goToProduct = (handle: string) => {
+ close();
+ router.push(`/products/${handle}`);
+ };
+
+ const hasQuery = Boolean(term.trim());
+
+ return (
+ <>
+
+
+ !next && close()}>
+ setTerm('')}
+ onClose={close}
+ placeholder="Search products"
+ aria-label="Search products"
+ onKeyDown={(event) => {
+ if (event.key === 'Enter') goToSearchPage();
+ }}
+ />
+
+ {hasQuery && (
+ <>
+
+ {searching && results.length === 0 ? (
+ No products found.
+ ) : (
+
+ {results.map((product) => (
+ goToProduct(product.handle)}
+ >
+
+ ))}
+
+ )}
+
+
+ {results.length > 0 && (
+
+
+ );
+};
+
+export default SearchDialog;
diff --git a/components/shopify/search-filters.tsx b/components/shopify/search-filters.tsx
new file mode 100644
index 0000000..4d2ab81
--- /dev/null
+++ b/components/shopify/search-filters.tsx
@@ -0,0 +1,238 @@
+'use client';
+
+import React, { useState } from 'react';
+import {
+ Sheet,
+ SheetContent,
+ SheetHeader,
+ SheetTitle,
+ SheetBody,
+ AnimatePresence,
+} from '@/components/ui/sheet';
+import { Button } from '@/components/ui/button';
+import { RiCloseLine, RiCheckLine } from '@remixicon/react';
+import { swatchColorForName } from '@/config/swatches';
+import type { SearchFilter, SearchFilterValue } from '@/hooks/use-shopify-search';
+
+interface SearchFiltersProps {
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+ filters: SearchFilter[];
+ activeFilters: string[];
+ onActiveFiltersChange: (filters: string[]) => void;
+}
+
+// Colour facets render as swatches; everything else as a labelled list.
+const isColorFilter = (filter: SearchFilter) =>
+ /colou?r/i.test(filter.label) || filter.id.toLowerCase().includes('color');
+
+const SearchFilters: React.FC = ({
+ open,
+ onOpenChange,
+ filters,
+ activeFilters,
+ onActiveFiltersChange,
+}) => {
+ const [priceMin, setPriceMin] = useState('');
+ const [priceMax, setPriceMax] = useState('');
+
+ const listFilters = filters.filter((filter) => filter.type === 'LIST');
+ const priceFilter = filters.find((filter) => filter.type === 'PRICE_RANGE');
+
+ const activeSet = new Set(activeFilters);
+ // Price is rebuilt from the inputs rather than toggled, so track it apart.
+ const activePriceInput = activeFilters.find((input) =>
+ input.includes('"price"')
+ );
+
+ const toggleValue = (value: SearchFilterValue) => {
+ onActiveFiltersChange(
+ activeSet.has(value.input)
+ ? activeFilters.filter((input) => input !== value.input)
+ : [...activeFilters, value.input]
+ );
+ };
+
+ const applyPrice = () => {
+ const min = parseFloat(priceMin);
+ const max = parseFloat(priceMax);
+ const withoutPrice = activeFilters.filter(
+ (input) => !input.includes('"price"')
+ );
+
+ if (Number.isNaN(min) && Number.isNaN(max)) {
+ onActiveFiltersChange(withoutPrice);
+ return;
+ }
+
+ const price: { min?: number; max?: number } = {};
+ if (!Number.isNaN(min)) price.min = min;
+ if (!Number.isNaN(max)) price.max = max;
+
+ onActiveFiltersChange([...withoutPrice, JSON.stringify({ price })]);
+ };
+
+ const clearAll = () => {
+ setPriceMin('');
+ setPriceMax('');
+ onActiveFiltersChange([]);
+ };
+
+ // Labels for the chips at the top of the panel.
+ const activeChips = filters
+ .flatMap((filter) => filter.values)
+ .filter((value) => activeSet.has(value.input));
+
+ return (
+
+
+ {open && (
+
+
+
+
+
+ {/* Active selections */}
+ {(activeChips.length > 0 || activePriceInput) && (
+
+
+ )}
+
+
+ );
+};
+
+export default SearchFilters;
diff --git a/components/shopify/search-results.tsx b/components/shopify/search-results.tsx
new file mode 100644
index 0000000..a26d3c3
--- /dev/null
+++ b/components/shopify/search-results.tsx
@@ -0,0 +1,241 @@
+'use client';
+
+import React, { useEffect, useMemo, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+import ProductCard from './product-card';
+import SearchFilters from './search-filters';
+import { Button } from '@/components/ui/button';
+import { Loader } from '@/app/components/ui/loader';
+import { RiEqualizerLine, RiArrowDownSLine, RiCheckLine } from '@remixicon/react';
+import {
+ searchProducts,
+ type SearchFilter,
+ type SearchSortKey,
+} from '@/hooks/use-shopify-search';
+import type { Product } from '@/hooks/use-shopify-products';
+
+const PAGE_SIZE = 24;
+
+interface SortOption {
+ label: string;
+ sortKey: SearchSortKey;
+ reverse: boolean;
+}
+
+const SORT_OPTIONS: SortOption[] = [
+ { label: 'Best Matches', sortKey: 'RELEVANCE', reverse: false },
+ { label: 'Price: Low to High', sortKey: 'PRICE', reverse: false },
+ { label: 'Price: High to Low', sortKey: 'PRICE', reverse: true },
+];
+
+const SearchResults: React.FC = () => {
+ const searchParams = useSearchParams();
+ const query = searchParams.get('q') ?? '';
+
+ const [products, setProducts] = useState([]);
+ const [filters, setFilters] = useState([]);
+ const [totalCount, setTotalCount] = useState(0);
+ const [loading, setLoading] = useState(true);
+ const [loadingMore, setLoadingMore] = useState(false);
+ const [error, setError] = useState(null);
+ const [cursor, setCursor] = useState(null);
+ const [hasNextPage, setHasNextPage] = useState(false);
+
+ const [sortIndex, setSortIndex] = useState(0);
+ const [sortOpen, setSortOpen] = useState(false);
+ const [filtersOpen, setFiltersOpen] = useState(false);
+ const [activeFilters, setActiveFilters] = useState([]);
+
+ const sort = SORT_OPTIONS[sortIndex];
+ // Serialised so the effect re-runs when the selection changes, not the array.
+ const activeKey = useMemo(() => activeFilters.join('|'), [activeFilters]);
+
+ useEffect(() => {
+ let cancelled = false;
+
+ const run = async () => {
+ try {
+ setLoading(true);
+ setError(null);
+
+ const result = await searchProducts({
+ // An empty term still returns the catalogue, which is what an
+ // unqualified /search visit should show.
+ query,
+ first: PAGE_SIZE,
+ sortKey: sort.sortKey,
+ reverse: sort.reverse,
+ filterInputs: activeFilters,
+ });
+
+ if (cancelled) return;
+
+ setProducts(result.products);
+ setTotalCount(result.totalCount);
+ setCursor(result.endCursor);
+ setHasNextPage(result.hasNextPage);
+ // Facet counts change with the result set, but keep the panel stable
+ // while filters are applied so options don't vanish mid-selection.
+ if (activeFilters.length === 0) setFilters(result.filters);
+ } catch (err) {
+ if (cancelled) return;
+ console.error('Search failed:', err);
+ setError(err instanceof Error ? err.message : 'Search failed');
+ } finally {
+ if (!cancelled) setLoading(false);
+ }
+ };
+
+ run();
+ return () => {
+ cancelled = true;
+ };
+ }, [query, sort.sortKey, sort.reverse, activeKey]);
+
+ const handleLoadMore = async () => {
+ if (loadingMore || !hasNextPage) return;
+
+ try {
+ setLoadingMore(true);
+ const result = await searchProducts({
+ query,
+ first: PAGE_SIZE,
+ after: cursor,
+ sortKey: sort.sortKey,
+ reverse: sort.reverse,
+ filterInputs: activeFilters,
+ });
+
+ setProducts((prev) => {
+ const seen = new Set(prev.map((p) => p.id));
+ return [...prev, ...result.products.filter((p) => !seen.has(p.id))];
+ });
+ setCursor(result.endCursor);
+ setHasNextPage(result.hasNextPage);
+ } catch (err) {
+ console.error('Failed to load more results:', err);
+ } finally {
+ setLoadingMore(false);
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+ ) : results.length === 0 ? (
+
+ {product.featuredImage ? (
+ 
+ ) : (
+
+
+
+ )}
+
+
+
+ {product.title}
+
+
+ {formatPrice(
+ product.priceRange.minVariantPrice.amount
+ )}
+
+
+
+
+ )}
+
+ )}
+
+ Filters
+
+
+
+ {activeChips.map((value) => (
+
+ ))}
+
+
+ )}
+
+ {filters.length === 0 && (
+ + No filters available for these results. +
+ )} + + {/* Price */} + {priceFilter && ( +
+
+ )}
+
+ {/* Facets */}
+ {listFilters.map((filter) => (
+ Price
+
+ setPriceMin(event.target.value)}
+ placeholder="$ From"
+ aria-label="Minimum price"
+ className="h-10 w-full rounded-md bg-secondary px-3 text-sm outline-none placeholder:text-muted-foreground"
+ />
+ –
+ setPriceMax(event.target.value)}
+ placeholder="$ To"
+ aria-label="Maximum price"
+ className="h-10 w-full rounded-md bg-secondary px-3 text-sm outline-none placeholder:text-muted-foreground"
+ />
+
+
+
+
+ ))}
+ + {filter.label} +
+ + {isColorFilter(filter) ? ( +
+ {filter.values.map((value) => {
+ const isActive = activeSet.has(value.input);
+ const color = swatchColorForName(value.label);
+
+ return (
+
+ );
+ })}
+
+ ) : (
+
+ {filter.values.map((value) => {
+ const isActive = activeSet.has(value.input);
+
+ return (
+
+ );
+ })}
+
+ )}
+
+ , 'onChange'> {
+ onValueChange?: (value: string) => void;
+ onClear?: () => void;
+ onClose?: () => void;
+}
+
+function CommandInput({
+ className,
+ value,
+ onValueChange,
+ onClear,
+ onClose,
+ ...props
+}: CommandInputProps) {
+ const hasValue = Boolean(String(value ?? '').length);
+
+ return (
+ {
+ const response = await shopifyFetch({
+ query: SEARCH_PRODUCTS_QUERY,
+ variables: {
+ query,
+ first,
+ after,
+ sortKey,
+ reverse,
+ productFilters: filterInputs.length
+ ? parseFilterInputs(filterInputs)
+ : null,
+ },
+ });
+
+ const search = response.data.search;
+
+ return {
+ products: search.edges.map((edge: { node: Product }) => edge.node),
+ totalCount: search.totalCount ?? 0,
+ filters: search.productFilters ?? [],
+ hasNextPage: Boolean(search.pageInfo?.hasNextPage),
+ endCursor: search.pageInfo?.endCursor ?? null,
+ };
+}
+
+export async function searchSuggestions(
+ query: string,
+ first = 3
+): Promise<{ products: SearchSuggestion[]; totalCount: number }> {
+ const response = await shopifyFetch({
+ query: SEARCH_SUGGESTIONS_QUERY,
+ variables: { query, first },
+ });
+
+ const search = response.data.search;
+
+ return {
+ products: search.edges.map((edge: { node: SearchSuggestion }) => edge.node),
+ totalCount: search.totalCount ?? 0,
+ };
+}
+ Search +
+ + {/* Toolbar */} +
+
+
+
+
+
+
+ {totalCount} {totalCount === 1 ? 'Item' : 'Items'}
+
+
+
+
+ {/* Results */}
+
+
+
+ {sortOpen && (
+ <>
+
+ setSortOpen(false)}
+ />
+
+
+ {SORT_OPTIONS.map((option, index) => (
+
+ ))}
+
+
+ )}
+
+ {loading ? (
+
+
+ {Array.from({ length: 10 }).map((_, index) => (
+
+ ) : error ? (
+
+
+
+ ))}
+
+
+
+
+ {error}
+ ) : products.length === 0 ? ( ++ No products matched{query ? ` “${query}”` : ' your filters'}. +
+ ) : ( + <> +
+ {products.map((product) => (
+
+
+ {hasNextPage && (
+
+
+
+ )}
+
+ )}
+
+
+ );
+}
+
+function CommandList({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ );
+}
+
+function CommandEmpty({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ );
+}
+
+interface CommandGroupProps extends React.ComponentProps<'div'> {
+ heading?: string;
+}
+
+function CommandGroup({ className, heading, children, ...props }: CommandGroupProps) {
+ return (
+
+ {heading && (
+
+ );
+}
+
+function CommandItem({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ );
+}
+
+function CommandSeparator({ className, ...props }: React.ComponentProps<'div'>) {
+ return (
+
+ );
+}
+
+export {
+ Command,
+ CommandDialog,
+ CommandInput,
+ CommandList,
+ CommandEmpty,
+ CommandGroup,
+ CommandItem,
+ CommandSeparator,
+};
diff --git a/graphql/search.js b/graphql/search.js
new file mode 100644
index 0000000..7ec0dab
--- /dev/null
+++ b/graphql/search.js
@@ -0,0 +1,79 @@
+import { ProductFragment } from '@/graphql/products';
+
+// Storefront search over products. `productFilters` accepts the raw `input`
+// values returned in `productFilters[].values[].input`, so facets round-trip
+// without the client needing to know each filter's shape.
+export const SEARCH_PRODUCTS_QUERY = `
+ ${ProductFragment}
+ query SearchProducts(
+ $query: String!
+ $first: Int!
+ $after: String
+ $sortKey: SearchSortKeys
+ $reverse: Boolean
+ $productFilters: [ProductFilter!]
+ ) {
+ search(
+ query: $query
+ first: $first
+ after: $after
+ types: PRODUCT
+ sortKey: $sortKey
+ reverse: $reverse
+ productFilters: $productFilters
+ ) {
+ totalCount
+ pageInfo {
+ hasNextPage
+ endCursor
+ }
+ productFilters {
+ id
+ label
+ type
+ values {
+ id
+ label
+ count
+ input
+ }
+ }
+ edges {
+ node {
+ ... on Product {
+ ...ProductFragment
+ }
+ }
+ }
+ }
+ }
+`;
+
+// Lightweight variant for the autocomplete dropdown — just enough to render a
+// row, so the dialog stays responsive while typing.
+export const SEARCH_SUGGESTIONS_QUERY = `
+ query SearchSuggestions($query: String!, $first: Int!) {
+ search(query: $query, first: $first, types: PRODUCT) {
+ totalCount
+ edges {
+ node {
+ ... on Product {
+ id
+ title
+ handle
+ featuredImage {
+ url
+ altText
+ }
+ priceRange {
+ minVariantPrice {
+ amount
+ currencyCode
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+`;
diff --git a/hooks/use-shopify-search.ts b/hooks/use-shopify-search.ts
new file mode 100644
index 0000000..1a57c89
--- /dev/null
+++ b/hooks/use-shopify-search.ts
@@ -0,0 +1,120 @@
+'use client';
+
+import { shopifyFetch } from '@/services/shopify/client';
+import {
+ SEARCH_PRODUCTS_QUERY,
+ SEARCH_SUGGESTIONS_QUERY,
+} from '@/graphql/search';
+import type { Product } from '@/hooks/use-shopify-products';
+
+export type SearchSortKey = 'RELEVANCE' | 'PRICE';
+
+export interface SearchFilterValue {
+ id: string;
+ label: string;
+ count: number;
+ /** JSON string accepted back as a `ProductFilter` input. */
+ input: string;
+}
+
+export interface SearchFilter {
+ id: string;
+ label: string;
+ type: 'LIST' | 'PRICE_RANGE' | 'BOOLEAN';
+ values: SearchFilterValue[];
+}
+
+export interface SearchProductsResult {
+ products: Product[];
+ totalCount: number;
+ filters: SearchFilter[];
+ hasNextPage: boolean;
+ endCursor: string | null;
+}
+
+export interface SearchSuggestion {
+ id: string;
+ title: string;
+ handle: string;
+ featuredImage?: {
+ url: string;
+ altText?: string;
+ } | null;
+ priceRange: {
+ minVariantPrice: {
+ amount: string;
+ currencyCode: string;
+ };
+ };
+}
+
+interface SearchProductsOptions {
+ query: string;
+ first?: number;
+ after?: string | null;
+ sortKey?: SearchSortKey;
+ reverse?: boolean;
+ /** Raw `input` strings from the facets, parsed back into filter objects. */
+ filterInputs?: string[];
+}
+
+function parseFilterInputs(inputs: string[]): unknown[] {
+ return inputs.flatMap((input) => {
+ try {
+ return [JSON.parse(input)];
+ } catch {
+ console.warn('Ignoring malformed product filter input:', input);
+ return [];
+ }
+ });
+}
+
+export async function searchProducts({
+ query,
+ first = 24,
+ after = null,
+ sortKey = 'RELEVANCE',
+ reverse = false,
+ filterInputs = [],
+}: SearchProductsOptions): Promise
+ {heading}
+
+ )}
+ {children}
+