Initial commit
This commit is contained in:
Rami Bitar
17
hooks/use-route-segment.ts
Normal file
17
hooks/use-route-segment.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
"use client";
|
||||
|
||||
import { useParams } from "next/navigation";
|
||||
|
||||
/**
|
||||
* Returns the last segment of the current catch-all slug route, e.g. the
|
||||
* `cool-shirt` in `/products/cool-shirt`. Components use this to derive the
|
||||
* resource they should load from the Next.js route segments directly.
|
||||
*/
|
||||
export function useRouteSegment(): string | undefined {
|
||||
const params = useParams();
|
||||
const segments = Array.isArray(params?.slug) ? (params.slug as string[]) : [];
|
||||
// Editor routes are served under `/editor/*`; ignore that prefix so the
|
||||
// resolved segment matches the public route.
|
||||
const routeSegments = segments[0] === "editor" ? segments.slice(1) : segments;
|
||||
return routeSegments[routeSegments.length - 1];
|
||||
}
|
||||
165
hooks/use-shopify-cart.ts
Normal file
165
hooks/use-shopify-cart.ts
Normal file
@@ -0,0 +1,165 @@
|
||||
'use client';
|
||||
|
||||
import { useContext } from 'react';
|
||||
import { shopifyFetch, SHOPIFY_STORE_DOMAIN } from '@/services/shopify/client';
|
||||
import { CartContext } from '@/contexts/shopify-context';
|
||||
import {
|
||||
CREATE_CART_MUTATION,
|
||||
ADD_CART_LINES_MUTATION,
|
||||
UPDATE_CART_LINES_MUTATION,
|
||||
REMOVE_CART_LINES_MUTATION,
|
||||
GET_CART_QUERY,
|
||||
} from '@/graphql/cart';
|
||||
|
||||
export interface CartLineInput {
|
||||
merchandiseId: string;
|
||||
quantity: number;
|
||||
}
|
||||
|
||||
export interface CartLineUpdateInput {
|
||||
id: string;
|
||||
quantity: number;
|
||||
}
|
||||
|
||||
interface CartLine {
|
||||
id: string;
|
||||
quantity: number;
|
||||
cost: {
|
||||
totalAmount: {
|
||||
amount: string;
|
||||
currencyCode: string;
|
||||
};
|
||||
};
|
||||
merchandise: {
|
||||
id: string;
|
||||
title: string;
|
||||
selectedOptions: Array<{
|
||||
name: string;
|
||||
value: string;
|
||||
}>;
|
||||
price: {
|
||||
amount: string;
|
||||
currencyCode: string;
|
||||
};
|
||||
image?: {
|
||||
id: string;
|
||||
url: string;
|
||||
altText?: string;
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
product: {
|
||||
id: string;
|
||||
title: string;
|
||||
handle: string;
|
||||
vendor?: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
export interface Cart {
|
||||
id: string;
|
||||
checkoutUrl: string;
|
||||
totalQuantity: number;
|
||||
cost: {
|
||||
subtotalAmount: {
|
||||
amount: string;
|
||||
currencyCode: string;
|
||||
};
|
||||
totalAmount: {
|
||||
amount: string;
|
||||
currencyCode: string;
|
||||
};
|
||||
totalTaxAmount?: {
|
||||
amount: string;
|
||||
currencyCode: string;
|
||||
};
|
||||
};
|
||||
lines: {
|
||||
edges: Array<{
|
||||
node: CartLine;
|
||||
}>;
|
||||
};
|
||||
}
|
||||
|
||||
// Create a new cart (optionally with initial items)
|
||||
export async function createCart(lines: CartLineInput[] = []): Promise<Cart> {
|
||||
const response = await shopifyFetch({
|
||||
query: CREATE_CART_MUTATION,
|
||||
variables: { lines: lines.length > 0 ? lines : null },
|
||||
});
|
||||
|
||||
if (response.data.cartCreate.userErrors.length > 0) {
|
||||
throw new Error(response.data.cartCreate.userErrors[0].message);
|
||||
}
|
||||
|
||||
return response.data.cartCreate.cart;
|
||||
}
|
||||
|
||||
// Add items to cart
|
||||
export async function addCartLines(cartId: string, lines: CartLineInput[]): Promise<Cart> {
|
||||
const response = await shopifyFetch({
|
||||
query: ADD_CART_LINES_MUTATION,
|
||||
variables: { cartId, lines },
|
||||
});
|
||||
|
||||
if (response.data.cartLinesAdd.userErrors.length > 0) {
|
||||
throw new Error(response.data.cartLinesAdd.userErrors[0].message);
|
||||
}
|
||||
|
||||
return response.data.cartLinesAdd.cart;
|
||||
}
|
||||
|
||||
// Update cart line quantities
|
||||
export async function updateCartLines(cartId: string, lines: CartLineUpdateInput[]): Promise<Cart> {
|
||||
const response = await shopifyFetch({
|
||||
query: UPDATE_CART_LINES_MUTATION,
|
||||
variables: { cartId, lines },
|
||||
});
|
||||
|
||||
if (response.data.cartLinesUpdate.userErrors.length > 0) {
|
||||
throw new Error(response.data.cartLinesUpdate.userErrors[0].message);
|
||||
}
|
||||
|
||||
return response.data.cartLinesUpdate.cart;
|
||||
}
|
||||
|
||||
// Remove items from cart
|
||||
export async function removeCartLines(cartId: string, lineIds: string[]): Promise<Cart> {
|
||||
const response = await shopifyFetch({
|
||||
query: REMOVE_CART_LINES_MUTATION,
|
||||
variables: { cartId, lineIds },
|
||||
});
|
||||
|
||||
if (response.data.cartLinesRemove.userErrors.length > 0) {
|
||||
throw new Error(response.data.cartLinesRemove.userErrors[0].message);
|
||||
}
|
||||
|
||||
return response.data.cartLinesRemove.cart;
|
||||
}
|
||||
|
||||
// Get cart by ID
|
||||
export async function getCart(cartId: string): Promise<Cart | null> {
|
||||
const response = await shopifyFetch({
|
||||
query: GET_CART_QUERY,
|
||||
variables: { cartId },
|
||||
});
|
||||
|
||||
return response.data.cart;
|
||||
}
|
||||
|
||||
// Redirect to Shopify checkout
|
||||
export function redirectToCheckout(checkoutUrl: string): void {
|
||||
if (checkoutUrl) {
|
||||
window.location.href = checkoutUrl;
|
||||
}
|
||||
}
|
||||
|
||||
// Hook to access cart context
|
||||
export const useShopifyCart = () => {
|
||||
const context = useContext(CartContext);
|
||||
if (!context) {
|
||||
throw new Error('useShopifyCart must be used within a ShopifyProvider');
|
||||
}
|
||||
return context;
|
||||
};
|
||||
174
hooks/use-shopify-collections.ts
Normal file
174
hooks/use-shopify-collections.ts
Normal file
@@ -0,0 +1,174 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { shopifyFetch } from '@/services/shopify/client';
|
||||
import {
|
||||
GET_COLLECTIONS_QUERY,
|
||||
GET_COLLECTION_PRODUCTS_QUERY,
|
||||
} from '@/graphql/collections';
|
||||
import type { Product } from './use-shopify-products';
|
||||
|
||||
interface CollectionImage {
|
||||
url: string;
|
||||
altText?: string;
|
||||
}
|
||||
|
||||
export interface Collection {
|
||||
id: string;
|
||||
title: string;
|
||||
handle: string;
|
||||
description?: string;
|
||||
descriptionHtml?: string;
|
||||
image?: CollectionImage;
|
||||
}
|
||||
|
||||
export interface CollectionWithProducts extends Collection {
|
||||
products: Product[];
|
||||
}
|
||||
|
||||
export type CollectionSortKey = 'BEST_SELLING' | 'CREATED' | 'PRICE' | 'TITLE';
|
||||
|
||||
export interface ProductFilter {
|
||||
available?: boolean;
|
||||
price?: { min?: number; max?: number };
|
||||
productType?: string;
|
||||
productVendor?: string;
|
||||
tag?: string;
|
||||
variantOption?: { name: string; value: string };
|
||||
productMetafield?: { namespace: string; key: string; value: string };
|
||||
}
|
||||
|
||||
interface UseCollectionProductsOptions {
|
||||
first?: number;
|
||||
sortKey?: CollectionSortKey;
|
||||
reverse?: boolean;
|
||||
filters?: ProductFilter[];
|
||||
}
|
||||
|
||||
// Fetch all collections
|
||||
export async function getCollections(first = 50): Promise<Collection[]> {
|
||||
const response = await shopifyFetch({
|
||||
query: GET_COLLECTIONS_QUERY,
|
||||
variables: { first },
|
||||
});
|
||||
|
||||
return response.data.collections.edges.map((edge: { node: Collection }) => edge.node);
|
||||
}
|
||||
|
||||
// Fetch products in a collection by handle
|
||||
export async function getCollectionProducts(
|
||||
handle: string,
|
||||
{ first = 50, sortKey = 'BEST_SELLING', reverse = false, filters }: UseCollectionProductsOptions = {},
|
||||
after?: string | null,
|
||||
): Promise<{ collection: CollectionWithProducts; hasNextPage: boolean; endCursor: string | null } | null> {
|
||||
const response = await shopifyFetch({
|
||||
query: GET_COLLECTION_PRODUCTS_QUERY,
|
||||
variables: { handle, first, sortKey, reverse, filters: filters?.length ? filters : undefined, after: after ?? null },
|
||||
});
|
||||
|
||||
const collection = response.data.collection;
|
||||
if (!collection) return null;
|
||||
|
||||
return {
|
||||
collection: {
|
||||
...collection,
|
||||
products: collection.products.edges.map((edge: { node: Product }) => edge.node),
|
||||
},
|
||||
hasNextPage: collection.products.pageInfo.hasNextPage,
|
||||
endCursor: collection.products.pageInfo.endCursor,
|
||||
};
|
||||
}
|
||||
|
||||
// Hook for fetching all collections
|
||||
export function useCollections(first = 50) {
|
||||
const [collections, setCollections] = useState<Collection[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const fetchCollections = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const data = await getCollections(first);
|
||||
setCollections(data);
|
||||
} catch (err) {
|
||||
console.error('Error fetching collections:', err);
|
||||
setError(err instanceof Error ? err.message : 'Failed to load collections');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [first]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchCollections();
|
||||
}, [fetchCollections]);
|
||||
|
||||
return { collections, loading, error, refetch: fetchCollections };
|
||||
}
|
||||
|
||||
// Hook for fetching products in a collection
|
||||
export function useCollectionProducts(
|
||||
handle: string | null,
|
||||
options: UseCollectionProductsOptions = {}
|
||||
) {
|
||||
const [collection, setCollection] = useState<CollectionWithProducts | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [hasNextPage, setHasNextPage] = useState(false);
|
||||
const [cursor, setCursor] = useState<string | null>(null);
|
||||
|
||||
const filtersKey = JSON.stringify(options.filters ?? []);
|
||||
|
||||
const fetchCollection = useCallback(async () => {
|
||||
if (!handle) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const result = await getCollectionProducts(handle, options);
|
||||
if (!result) {
|
||||
setCollection(null);
|
||||
setError('Collection not found');
|
||||
} else {
|
||||
setCollection(result.collection);
|
||||
setHasNextPage(result.hasNextPage);
|
||||
setCursor(result.endCursor);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error fetching collection products:', err);
|
||||
setError(err instanceof Error ? err.message : 'Failed to load collection');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [handle, options.first, options.sortKey, options.reverse, filtersKey]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchCollection();
|
||||
}, [fetchCollection]);
|
||||
|
||||
const fetchMore = useCallback(async () => {
|
||||
if (!handle || !cursor || !hasNextPage || loading) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const result = await getCollectionProducts(handle, options, cursor);
|
||||
if (result) {
|
||||
setCollection((prev) =>
|
||||
prev
|
||||
? { ...prev, products: [...prev.products, ...result.collection.products] }
|
||||
: result.collection
|
||||
);
|
||||
setHasNextPage(result.hasNextPage);
|
||||
setCursor(result.endCursor);
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Load more failed');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [handle, cursor, hasNextPage, loading, options.first, options.sortKey, options.reverse, filtersKey]);
|
||||
|
||||
return { collection, loading, error, hasNextPage, fetchMore, refetch: fetchCollection };
|
||||
}
|
||||
209
hooks/use-shopify-products.ts
Normal file
209
hooks/use-shopify-products.ts
Normal file
@@ -0,0 +1,209 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { shopifyFetch } from '@/services/shopify/client';
|
||||
import {
|
||||
GET_PRODUCTS_QUERY,
|
||||
GET_PRODUCT_QUERY,
|
||||
QUERY_PRODUCT_RECOMMENDATIONS,
|
||||
} from '@/graphql/products';
|
||||
|
||||
interface ProductImage {
|
||||
url: string;
|
||||
altText?: string;
|
||||
}
|
||||
|
||||
interface ProductPrice {
|
||||
amount: string;
|
||||
currencyCode: string;
|
||||
}
|
||||
|
||||
interface ProductVariant {
|
||||
id: string;
|
||||
title: string;
|
||||
price: ProductPrice;
|
||||
availableForSale: boolean;
|
||||
selectedOptions: Array<{
|
||||
name: string;
|
||||
value: string;
|
||||
}>;
|
||||
image?: ProductImage;
|
||||
}
|
||||
|
||||
interface ProductOption {
|
||||
id: string;
|
||||
name: string;
|
||||
values: string[];
|
||||
}
|
||||
|
||||
export interface Product {
|
||||
id: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
descriptionHtml?: string;
|
||||
handle: string;
|
||||
vendor?: string;
|
||||
productType?: string;
|
||||
tags?: string[];
|
||||
availableForSale?: boolean;
|
||||
images: {
|
||||
edges: Array<{
|
||||
node: ProductImage;
|
||||
}>;
|
||||
};
|
||||
priceRange: {
|
||||
minVariantPrice: ProductPrice;
|
||||
};
|
||||
compareAtPriceRange?: {
|
||||
minVariantPrice: ProductPrice;
|
||||
};
|
||||
variants: {
|
||||
edges: Array<{
|
||||
node: ProductVariant;
|
||||
}>;
|
||||
};
|
||||
options: ProductOption[];
|
||||
}
|
||||
|
||||
interface UseProductsOptions {
|
||||
first?: number;
|
||||
query?: string;
|
||||
sortKey?: 'BEST_SELLING' | 'CREATED_AT' | 'PRICE' | 'TITLE';
|
||||
reverse?: boolean;
|
||||
}
|
||||
|
||||
interface UseProductsReturn {
|
||||
products: Product[];
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
refetch: () => Promise<void>;
|
||||
}
|
||||
|
||||
// Fetch multiple products
|
||||
export async function getProducts({
|
||||
first = 20,
|
||||
query = '',
|
||||
sortKey = 'BEST_SELLING',
|
||||
reverse = false,
|
||||
}: UseProductsOptions = {}): Promise<Product[]> {
|
||||
const response = await shopifyFetch({
|
||||
query: GET_PRODUCTS_QUERY,
|
||||
variables: { first, query, sortKey, reverse },
|
||||
});
|
||||
|
||||
return response.data.products.edges.map((edge: { node: Product }) => edge.node);
|
||||
}
|
||||
|
||||
// Fetch a single product by handle
|
||||
export async function getProduct(handle: string): Promise<Product | null> {
|
||||
const response = await shopifyFetch({
|
||||
query: GET_PRODUCT_QUERY,
|
||||
variables: { handle },
|
||||
});
|
||||
|
||||
return response.data.product;
|
||||
}
|
||||
|
||||
// Fetch product recommendations
|
||||
export async function getProductRecommendations(productId: string): Promise<Product[]> {
|
||||
const response = await shopifyFetch({
|
||||
query: QUERY_PRODUCT_RECOMMENDATIONS,
|
||||
variables: { productId },
|
||||
});
|
||||
|
||||
return response.data.productRecommendations || [];
|
||||
}
|
||||
|
||||
// Hook for fetching multiple products
|
||||
export function useProducts(options: UseProductsOptions = {}): UseProductsReturn {
|
||||
const [products, setProducts] = useState<Product[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const fetchProducts = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const data = await getProducts(options);
|
||||
setProducts(data);
|
||||
} catch (err) {
|
||||
console.error('Error fetching products:', err);
|
||||
setError(err instanceof Error ? err.message : 'Failed to load products');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [options.first, options.query, options.sortKey, options.reverse]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchProducts();
|
||||
}, [fetchProducts]);
|
||||
|
||||
return { products, loading, error, refetch: fetchProducts };
|
||||
}
|
||||
|
||||
// Hook for fetching a single product
|
||||
export function useProduct(handle: string | null) {
|
||||
const [product, setProduct] = useState<Product | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const fetchProduct = useCallback(async () => {
|
||||
if (!handle) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const data = await getProduct(handle);
|
||||
setProduct(data);
|
||||
if (!data) {
|
||||
setError('Product not found');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error fetching product:', err);
|
||||
setError(err instanceof Error ? err.message : 'Failed to load product');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [handle]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchProduct();
|
||||
}, [fetchProduct]);
|
||||
|
||||
return { product, loading, error, refetch: fetchProduct };
|
||||
}
|
||||
|
||||
// Hook for fetching product recommendations
|
||||
export function useProductRecommendations(productId: string | null) {
|
||||
const [recommendations, setRecommendations] = useState<Product[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const fetchRecommendations = useCallback(async () => {
|
||||
if (!productId) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const data = await getProductRecommendations(productId);
|
||||
setRecommendations(data);
|
||||
} catch (err) {
|
||||
console.error('Error fetching recommendations:', err);
|
||||
setError(err instanceof Error ? err.message : 'Failed to load recommendations');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [productId]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchRecommendations();
|
||||
}, [fetchRecommendations]);
|
||||
|
||||
return { recommendations, loading, error, refetch: fetchRecommendations };
|
||||
}
|
||||
178
hooks/use-shopify-search.ts
Normal file
178
hooks/use-shopify-search.ts
Normal file
@@ -0,0 +1,178 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { shopifyFetch } from '@/services/shopify/client';
|
||||
import { GET_SEARCH_QUERY } from '@/graphql/products';
|
||||
import type { Product } from '@/hooks/use-shopify-products';
|
||||
|
||||
export type SortOption =
|
||||
| 'RELEVANCE'
|
||||
| 'BEST_SELLING'
|
||||
| 'NEWEST'
|
||||
| 'PRICE_ASC'
|
||||
| 'PRICE_DESC'
|
||||
| 'TITLE_ASC';
|
||||
|
||||
export interface SearchFilters {
|
||||
q?: string;
|
||||
availability?: boolean;
|
||||
productTypes?: string[];
|
||||
vendors?: string[];
|
||||
tags?: string[];
|
||||
colors?: string[];
|
||||
styles?: string[];
|
||||
sizes?: string[];
|
||||
materials?: string[];
|
||||
minPrice?: number | null;
|
||||
maxPrice?: number | null;
|
||||
metafields?: { namespace: string; key: string; value: string }[];
|
||||
sort?: SortOption;
|
||||
}
|
||||
|
||||
export interface SearchFacets {
|
||||
productTypes: string[];
|
||||
vendors: string[];
|
||||
tags: string[];
|
||||
}
|
||||
|
||||
function resolveSortKey(sort: SortOption): { sortKey: string; reverse: boolean } {
|
||||
switch (sort) {
|
||||
case 'BEST_SELLING': return { sortKey: 'BEST_SELLING', reverse: false };
|
||||
case 'NEWEST': return { sortKey: 'CREATED_AT', reverse: true };
|
||||
case 'PRICE_ASC': return { sortKey: 'PRICE', reverse: false };
|
||||
case 'PRICE_DESC': return { sortKey: 'PRICE', reverse: true };
|
||||
case 'TITLE_ASC': return { sortKey: 'TITLE', reverse: false };
|
||||
default: return { sortKey: 'RELEVANCE', reverse: false };
|
||||
}
|
||||
}
|
||||
|
||||
export function buildShopifyQuery(filters: SearchFilters): string {
|
||||
const parts: string[] = [];
|
||||
|
||||
if (filters.q?.trim()) parts.push(filters.q.trim());
|
||||
|
||||
if (filters.availability === true) parts.push('available_for_sale:true');
|
||||
|
||||
if (filters.productTypes?.length) {
|
||||
const clause = filters.productTypes.map((t) => `product_type:"${t}"`).join(' OR ');
|
||||
parts.push(filters.productTypes.length > 1 ? `(${clause})` : clause);
|
||||
}
|
||||
|
||||
if (filters.vendors?.length) {
|
||||
const clause = filters.vendors.map((v) => `vendor:"${v}"`).join(' OR ');
|
||||
parts.push(filters.vendors.length > 1 ? `(${clause})` : clause);
|
||||
}
|
||||
|
||||
if (filters.tags?.length) {
|
||||
const clause = filters.tags.map((t) => `tag:"${t}"`).join(' OR ');
|
||||
parts.push(filters.tags.length > 1 ? `(${clause})` : clause);
|
||||
}
|
||||
|
||||
for (const [option, values] of [
|
||||
['color', filters.colors],
|
||||
['style', filters.styles],
|
||||
['size', filters.sizes],
|
||||
['material', filters.materials],
|
||||
] as const) {
|
||||
if (values?.length) {
|
||||
const clause = values.map((v) => `variant.option.${option}:"${v}"`).join(' OR ');
|
||||
parts.push(values.length > 1 ? `(${clause})` : clause);
|
||||
}
|
||||
}
|
||||
|
||||
if (filters.minPrice != null) parts.push(`variants.price:>=${filters.minPrice}`);
|
||||
if (filters.maxPrice != null) parts.push(`variants.price:<=${filters.maxPrice}`);
|
||||
|
||||
if (filters.metafields?.length) {
|
||||
for (const mf of filters.metafields) {
|
||||
parts.push(`metafield.${mf.namespace}.${mf.key}:"${mf.value}"`);
|
||||
}
|
||||
}
|
||||
|
||||
return parts.join(' ');
|
||||
}
|
||||
|
||||
async function fetchProducts(vars: {
|
||||
first: number;
|
||||
query: string;
|
||||
sortKey: string;
|
||||
reverse: boolean;
|
||||
after?: string | null;
|
||||
}) {
|
||||
const res = await shopifyFetch({
|
||||
query: GET_SEARCH_QUERY,
|
||||
variables: { first: vars.first, query: vars.query, sortKey: vars.sortKey, reverse: vars.reverse, after: vars.after ?? null },
|
||||
});
|
||||
return {
|
||||
products: res.data.products.edges.map((e: { node: Product }) => e.node) as Product[],
|
||||
hasNextPage: res.data.products.pageInfo.hasNextPage as boolean,
|
||||
endCursor: res.data.products.pageInfo.endCursor as string | null,
|
||||
};
|
||||
}
|
||||
|
||||
export function useShopifySearch(filters: SearchFilters, { first = 24 }: { first?: number } = {}) {
|
||||
const [products, setProducts] = useState<Product[]>([]);
|
||||
const [facets, setFacets] = useState<SearchFacets>({ productTypes: [], vendors: [], tags: [] });
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [hasNextPage, setHasNextPage] = useState(false);
|
||||
const [cursor, setCursor] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const textQuery = filters.q?.trim() ?? '';
|
||||
const productQuery = buildShopifyQuery(filters);
|
||||
const { sortKey, reverse } = resolveSortKey(filters.sort ?? 'RELEVANCE');
|
||||
|
||||
// Fetch facets from unfiltered (text-only) result so sidebar options don't narrow
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
fetchProducts({ first: 100, query: textQuery, sortKey: 'RELEVANCE', reverse: false })
|
||||
.then(({ products: p }) => {
|
||||
if (cancelled) return;
|
||||
setFacets({
|
||||
productTypes: [...new Set(p.map((x) => x.productType).filter(Boolean))].sort() as string[],
|
||||
vendors: [...new Set(p.map((x) => x.vendor).filter(Boolean))].sort() as string[],
|
||||
tags: [...new Set(p.flatMap((x) => x.tags ?? []))].sort() as string[],
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
return () => { cancelled = true; };
|
||||
}, [textQuery]);
|
||||
|
||||
// Fetch products with all active filters
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
fetchProducts({ first, query: productQuery, sortKey, reverse })
|
||||
.then(({ products: p, hasNextPage: hnp, endCursor: ec }) => {
|
||||
if (cancelled) return;
|
||||
setProducts(p);
|
||||
setHasNextPage(hnp);
|
||||
setCursor(ec);
|
||||
})
|
||||
.catch((e) => {
|
||||
if (!cancelled) setError(e instanceof Error ? e.message : 'Search failed');
|
||||
})
|
||||
.finally(() => { if (!cancelled) setLoading(false); });
|
||||
return () => { cancelled = true; };
|
||||
}, [productQuery, sortKey, reverse, first]);
|
||||
|
||||
const fetchMore = async () => {
|
||||
if (!cursor || !hasNextPage || loading) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const { products: more, hasNextPage: hnp, endCursor: ec } = await fetchProducts({
|
||||
first, query: productQuery, sortKey, reverse, after: cursor,
|
||||
});
|
||||
setProducts((prev) => [...prev, ...more]);
|
||||
setHasNextPage(hnp);
|
||||
setCursor(ec);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : 'Load more failed');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return { products, facets, loading, error, hasNextPage, fetchMore };
|
||||
}
|
||||
Reference in New Issue
Block a user