Catalog and search

import {
  definePage,
  serverApi,
  z,
  type ProductsResponse,
} from "@ecomiq/storefront";

const ProductSearchSchema = z.object({
  q: z.string().optional(),
  page: z.coerce.number().int().positive().catch(1),
});

type ProductSearch = z.infer<typeof ProductSearchSchema>;

export default definePage<
  ProductsResponse,
  Record<string, string>,
  ProductSearch
>({
  validateSearch: (raw) => ProductSearchSchema.parse(raw),
  loader: ({ search }) =>
    serverApi.getProducts({
      search: search.q,
      page: search.page,
      pageSize: 24,
    }),
  meta: ({ search }) => ({
    title: search.q ? `Results for ${search.q}` : "Products",
  }),
  component: ({ data }) => (
    <section>
      <h1>{data.totalCount} products</h1>
      {data.products.map((product) => (
        <article key={product.id}>
          <h2>{product.name}</h2>
          <p>{product.price}</p>
        </article>
      ))}
    </section>
  ),
});

const suggestions = await serverApi.autocompleteProducts({
  search: "cof",
  limit: 8,
});