Cerca

La ricerca è una query API Storefront — il tuo tema possiede la pagina e l’UX, la piattaforma si occupa del matching.

query Search($query: String!, $first: Int) {
  search(query: $query, first: $first) {
    id
    handle
    title
    images {
      id
      url
      altText
      width
      height
    }
    priceRange {
      min {
        amount
        currencyCode
      }
    }
  }
}

Una route di ricerca legge il termine dall’URL, effettua la query e renderizza la griglia:

export async function loader({ request, context }: Route.LoaderArgs) {
  const q = new URL(request.url).searchParams.get("q") ?? "";
  if (!q) return { q, products: [] };
  const { search } = await context.storefront.query<SearchQueryData>(SEARCH_QUERY, {
    variables: { query: q, first: 24 },
  });
  return { q, products: search };
}

Mantieni la query nell’URL (/search?q=…) per consentire la condivisione dei risultati e il funzionamento del pulsante Indietro. Per i suggerimenti durante la digitazione, applica un debounce alla stessa query con un valore ridotto di first e mostra un riquadro compatto — l’API è la stessa, ma viene chiamata dal client tramite una tua route.