Suche

Suche ist eine Storefront-API-Query — dein Theme besitzt Seite und UX, die Plattform macht das 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
      }
    }
  }
}

Eine Such-Route liest den Begriff aus der URL, fragt ab und rendert das Grid:

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 };
}

Halte die Query in der URL (/search?q=…), damit Ergebnisse teilbar sind und der Zurück-Button funktioniert. Für Type-ahead: dieselbe Query debounced mit kleinem first in einem kompakten Overlay — identische API, nur clientseitig über deine eigene Route aufgerufen.