JavaScript SDK

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    zaprooSearchServerKey: '', // NUXT_ZAPROO_SEARCH_SERVER_KEY, a secret key with read access
    public: {
      zaprooSearchApiKey: '', // the public key
      zaprooSearchProfileKey: '',
      zaprooSearchSuggestKey: '',
      zaprooSearchBaseUrl: 'https://api.search.zaproo.cloud',
    },
  },
});

// composables/useZaprooSearch.ts
import { createZaprooSearch } from '@zaprooecommerce/search-js-sdk';

export function useZaprooSearch() {
  const config = useRuntimeConfig();
  const sid = useCookie<string | null>('zs_sid');
  return createZaprooSearch({
    apiKey: import.meta.server ? config.zaprooSearchServerKey : config.public.zaprooSearchApiKey,
    profileKey: config.public.zaprooSearchProfileKey,
    suggestKey: config.public.zaprooSearchSuggestKey,
    baseUrl: config.public.zaprooSearchBaseUrl,
    sessionId: sid.value ?? null,
    headers: import.meta.server ? useRequestHeaders(['user-agent']) : undefined,
  });
}

// Call the returned function from your consent banner once the visitor agrees.
export function useZaprooSearchConsent() {
  const sid = useCookie<string | null>('zs_sid', { maxAge: 60 * 60 * 24 * 30, sameSite: 'lax' });
  return () => {
    sid.value ??= crypto.randomUUID();
  };
}

<!-- pages/search.vue -->
<script setup lang="ts">
const route = useRoute();
const zaprooSearch = useZaprooSearch();
const { data } = await useAsyncData('search', () => zaprooSearch.search({ q: String(route.query.q ?? '') }), {
  watch: [() => route.query.q],
});

function open(itemId: string, position: number) {
  if (data.value?.searchId) zaprooSearch.track({ type: 'click', searchId: data.value.searchId, itemId, position });
  return navigateTo(`/product/${itemId}`);
}
</script>

// app/search/page.tsx
import { createZaprooSearch } from '@zaprooecommerce/search-js-sdk';
import { cookies, headers } from 'next/headers';
import { Results } from './results';

export default async function SearchPage({ searchParams }: { searchParams: Promise<{ q?: string }> }) {
  const zaprooSearch = createZaprooSearch({
    apiKey: process.env.ZAPROO_SEARCH_SERVER_KEY!, // a secret key with read access
    profileKey: process.env.NEXT_PUBLIC_ZAPROO_SEARCH_PROFILE_KEY!,
    baseUrl: process.env.NEXT_PUBLIC_ZAPROO_SEARCH_BASE_URL,
    sessionId: (await cookies()).get('zs_sid')?.value ?? null,
    headers: { 'User-Agent': (await headers()).get('user-agent') ?? '' },
  });
  const results = await zaprooSearch.search({ q: (await searchParams).q ?? '' });
  return <Results results={results} />;
}

// app/search/results.tsx
'use client';
import { createZaprooSearch, type SearchResponse } from '@zaprooecommerce/search-js-sdk';

const zaprooSearch = createZaprooSearch({
  apiKey: process.env.NEXT_PUBLIC_ZAPROO_SEARCH_API_KEY!,
  profileKey: process.env.NEXT_PUBLIC_ZAPROO_SEARCH_PROFILE_KEY!,
  baseUrl: process.env.NEXT_PUBLIC_ZAPROO_SEARCH_BASE_URL,
  // client components also render on the server, where there is no document
  sessionId: typeof document === 'undefined' ? null : (document.cookie.match(/(?:^|; )zs_sid=([^;]+)/)?.[1] ?? null),
});

export function Results({ results }: { results: SearchResponse }) {
  return (
    <ul>
      {results.items.map((hit, i) => (
        <li key={hit.id}>
          <a
            href={`/product/${hit.id}`}
            onClick={() => results.searchId && zaprooSearch.track({ type: 'click', searchId: results.searchId, itemId: hit.id, position: i + 1 })}
          >
            {String(hit.title)}
          </a>
        </li>
      ))}
    </ul>
  );
}

import { createZaprooSearch, type Suggestion } from '@zaprooecommerce/search-js-sdk';
import { useEffect, useState } from 'react';

const zaprooSearch = createZaprooSearch({
  apiKey: import.meta.env.VITE_ZAPROO_SEARCH_API_KEY,
  profileKey: import.meta.env.VITE_ZAPROO_SEARCH_PROFILE_KEY,
  suggestKey: import.meta.env.VITE_ZAPROO_SEARCH_SUGGEST_KEY,
  baseUrl: import.meta.env.VITE_ZAPROO_SEARCH_BASE_URL,
});

export function SearchBox() {
  const [q, setQ] = useState('');
  const [suggestions, setSuggestions] = useState<Suggestion[]>([]);

  useEffect(() => {
    const controller = new AbortController();
    const timer = setTimeout(() => {
      zaprooSearch.suggest(q, { signal: controller.signal }).then((r) => setSuggestions(r.suggestions), () => {});
    }, 150);
    return () => {
      clearTimeout(timer);
      controller.abort();
    };
  }, [q]);

  return (
    <>
      <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search" />
      <ul>
        {suggestions.map((s) => <li key={s.text}>{s.text}</li>)}
      </ul>
    </>
  );
}