Search patterns

const search = sdk.search({ query: 'ring' })

const { data, error } = await search.get()

if (error) {
  console.error('Search failed:', error.message)
} else if (data) {
  renderProducts(data.products)
}

const search = sdk.search({ query: 'ring' })

const { error: prepareError } = await search.prepare()
if (prepareError) {
  console.error('Prepare failed:', prepareError.message)
}

// Later, perhaps after the shopper adjusts filters
const { data, error } = await search.get({
  filterGroup: filter(eq('your-attribute', 'your-value')),
})

// On the search page
const search = sdk.search({ query: 'ring' })
const { data: prepareData, error: prepareError } = await search.prepare()

if (prepareError) {
  console.error('Prepare failed:', prepareError.message)
} else if (prepareData?.searchId) {
  sessionStorage.setItem('current_search_id', prepareData.searchId)
  window.location.href = `/search?q=ring&sid=${prepareData.searchId}`
}

const urlParams = new URLSearchParams(window.location.search)
const storedSearchId = urlParams.get('sid')

const search = sdk.search({ query: 'ring' })
const { data, error } = await search.get({
  searchId: storedSearchId || undefined,
})

if (error) {
  console.error('Search failed:', error.message)
} else if (data) {
  renderProducts(data.products)
}

import { createSDK, createDebounce } from '@commerce-blocks/sdk'

const { data: sdk, error } = createSDK({
  storefrontAccessToken: 'your-storefront-token',
  trackingToken: 'your-tracking-token',
})

if (error) {
  console.error('SDK init failed:', error.message)
} else {
  const autocomplete = sdk.autocomplete()
  let controller

  const { call: debouncedSearch } = createDebounce(async (query) => {
    if (controller) controller.dispose()
    controller = sdk.autocomplete()

    const { data, error } = await controller.get({ query })

    if (error) {
      console.error('Autocomplete failed:', error.message)
    } else if (data) {
      renderSuggestions(data.matchedQueries)
    }
  }, 150)

  input.addEventListener('input', (event) => {
    debouncedSearch(event.target.value)
  })
}

const search = sdk.search({ query: 'ring' })
const autocomplete = sdk.autocomplete()

const [prepareResult, autocompleteResult] = await Promise.all([
  search.prepare(),
  autocomplete.get({ query: 'ring' }),
])

if (autocompleteResult.data) {
  renderSuggestions(autocompleteResult.data.matchedQueries)
}

const { data, error } = await search.get()
if (error) {
  console.error('Search failed:', error.message)
} else if (data) {
  renderProducts(data.products)
}

let autocompleteController

input.addEventListener('input', (event) => {
  if (autocompleteController) {
    autocompleteController.dispose()
  }

  autocompleteController = sdk.autocomplete()
  autocompleteController.get({ query: event.target.value }).then(({ data, error }) => {
    if (error) {
      console.error('Autocomplete failed:', error.message)
    } else if (data) {
      renderSuggestions(data.matchedQueries)
    }
  })
})