Product Search

"use client"

import { ProductSearch } from "@/components/blocks/product-search/product-search"
import type { SearchFn } from "@/components/blocks/product-search/search"

const endpoint = "https://your-shop.myshopify.com/api/2025-07/graphql.json"

const query = `query Predictive($q: String!) {
  predictiveSearch(query: $q, limit: 6, types: [QUERY, COLLECTION, PRODUCT]) {
    queries { text }
    collections { id title handle }
    products {
      id title handle
      featuredImage { url altText }
      priceRange { minVariantPrice { amount currencyCode } }
      compareAtPriceRange { minVariantPrice { amount currencyCode } }
    }
  }
}`

type Money = { amount: string; currencyCode: string }

type PredictiveSearch = {
  queries: { text: string }[]
  collections: { id: string; title: string; handle: string }[]
  products: {
    id: string
    title: string
    handle: string
    featuredImage: { url: string; altText: string | null } | null
    priceRange: { minVariantPrice: Money }
    compareAtPriceRange: { minVariantPrice: Money }
  }[]
}

const search: SearchFn = async (q, { signal }) => {
  const response = await fetch(endpoint, {
    method: "POST",
    signal,
    headers: {
      "Content-Type": "application/json",
      "X-Shopify-Storefront-Access-Token": process.env.NEXT_PUBLIC_SHOPIFY_TOKEN ?? "",
    },
    body: JSON.stringify({ query, variables: { q } }),
  })
  if (!response.ok) throw new Error("Search is unavailable right now. Try again in a moment.")
  const { data } = (await response.json()) as {
    data: { predictiveSearch: PredictiveSearch }
  }
  const result = data.predictiveSearch
  return {
    suggestions: result.queries.map((item) => item.text),
    collections: result.collections.map((item) => ({
      id: item.id,
      title: item.title,
      href: `/collections/${item.handle}`,
    })),
    products: result.products.map((item) => ({
      id: item.id,
      title: item.title,
      href: `/products/${item.handle}`,
      image: item.featuredImage
        ? { src: `${item.featuredImage.url}&width=160`, alt: item.featuredImage.altText ?? "" }
        : undefined,
      price: item.priceRange.minVariantPrice,
      compareAt: item.compareAtPriceRange.minVariantPrice,
    })),
  }
}

export function StoreSearch() {
  return (
    <ProductSearch
      onSearch={search}
      onSubmit={(q) => window.location.assign(`/search?q=${encodeURIComponent(q)}`)}
      recentStorageKey="store:recent-searches"
      trending={["linen bedding", "ring vase"]}
    />
  )
}

"use client"

import { money } from "../price/money"
import { ProductSearch } from "@/components/blocks/product-search/product-search"
import type { SearchFn } from "@/components/blocks/product-search/search"

const appId = "YOUR_APP_ID"
const searchKey = "YOUR_SEARCH_ONLY_KEY"

type ProductHit = {
  objectID: string
  title: string
  handle: string
  image: string
  price: number
  collection: string
}

type SuggestionHit = { query: string }

type Response = {
  results: [
    { hits: SuggestionHit[] },
    { hits: ProductHit[]; nbHits: number; facets?: { collection?: Record<string, number> } },
  ]
}

const search: SearchFn = async (query, { signal }) => {
  const response = await fetch(`https://${appId}-dsn.algolia.net/1/indexes/*/queries`, {
    method: "POST",
    signal,
    headers: {
      "X-Algolia-Application-Id": appId,
      "X-Algolia-API-Key": searchKey,
    },
    body: JSON.stringify({
      requests: [
        { indexName: "products_query_suggestions", query, hitsPerPage: 8 },
        { indexName: "products", query, hitsPerPage: 4, facets: ["collection"], typoTolerance: true },
      ],
    }),
  })
  if (!response.ok) throw new Error("Search is unavailable right now. Try again in a moment.")
  const { results } = (await response.json()) as Response
  const [suggestions, products] = results
  return {
    suggestions: suggestions.hits.map((hit) => hit.query),
    collections: Object.entries(products.facets?.collection ?? {})
      .slice(0, 2)
      .map(([title, count]) => ({ id: title, title, count })),
    products: products.hits.map((hit) => ({
      id: hit.objectID,
      title: hit.title,
      href: `/products/${hit.handle}`,
      image: { src: hit.image },
      price: money(hit.price, "USD"),
    })),
    total: products.nbHits,
  }
}

export function AlgoliaSearch() {
  return <ProductSearch onSearch={search} recentStorageKey="recent-searches" />
}

"use client"

import { useRouter, useSearchParams } from "next/navigation"

import { ProductSearch } from "@/components/blocks/product-search/product-search"
import type { SearchFn } from "@/components/blocks/product-search/search"

const search: SearchFn = async (query, { signal }) => {
  const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`, { signal })
  if (!response.ok) throw new Error("Search is unavailable right now. Try again in a moment.")
  return response.json()
}

export function HeaderSearch() {
  const router = useRouter()
  const params = useSearchParams()

  return (
    <ProductSearch
      key={params.get("q") ?? ""}
      defaultValue={params.get("q") ?? ""}
      onSearch={search}
      onSubmit={(query) => router.push(`/search?q=${encodeURIComponent(query)}`)}
      onSelectProduct={(product) => product.href && router.push(product.href)}
      onSelectCollection={(collection, query) =>
        router.push(`${collection.href}?q=${encodeURIComponent(query)}`)
      }
      recentStorageKey="recent-searches"
    />
  )
}