Term Search

Overview

Term search is the most common way for users to search for a given product. In this guide, we will explore how to build a term search experience using the Merchstack API.

Before we get started, we are assuming that you have already set up your project to access the Merchstack API. If you have not, please refer to the Accessing the API section of the documentation.

Search for a product

To search for a product, we will use the alternativeSearch query. The alternativeSearch query is a powerful query that allows you to search for products based on a variety of criteria. For more information on the alternativeSearch query or any other queries, please refer to the GraphQL Playground -> Docs -> alternativeSearch

For this example, we will be searching for products that have the word "shirt" in the product name. We will also be limiting the results to 10 products per page.

import React from 'react'
import { useQuery, gql } from '@apollo/client'

const GET_PRODUCTS = gql`
  query AlternativeSearch($input: AlternativeSearchInput!) {
    alternativeSearch(input: $input) {
      products {
        id
        name
        slug
        description
      }
    }
  }
`

const ProductListPage = () => {
  const { loading, error, data } = useQuery(GET_PRODUCTS, {
    variables: {
      input: {
        term: 'shirt',
        take: 10,
      },
    },
  })

  if (loading) return <p>Loading...</p>
  if (error) return <p>Error :(</p>

  return (
    <ul>
      {data.alternativeSearch.products.map((product) => (
        <li key={product.id}>
          <h2>{product.name}</h2>
          <p>{product.description}</p>
        </li>
      ))}
    </ul>
  )
}

export default ProductListPage

In the above example, we are using the alternativeSearch query to search for products that have the word "shirt" in the product name. The example provides a basic example of how to use the alternativeSearch query. Let's consider another example where we would use the debounced search input to search for products. We would list the first 5 product name under the search input along with a See All button that would take the user to the Product Linting Page with the search term. The code would look something like this:

import React, { useState } from 'react'
import { useQuery, gql } from '@apollo/client'

const GET_PRODUCTS = gql`
  query AlternativeSearch($input: AlternativeSearchInput!) {
    alternativeSearch(input: $input) {
      products {
        id
        name
        slug
        description
      }
    }
  }
`

const SearchInputComponent = () => {
  const [searchTerm, setSearchTerm] = useState('')
  // Debounce the search input
  // https://usehooks.com/useDebounce/
  const debouncedSearchTerm = useDebounce(searchTerm, 500)

  const { loading, error, data } = useQuery(GET_PRODUCTS, {
    variables: {
      input: {
        term: debouncedSearchTerm,
        take: 5,
      },
    },
  })

  if (loading) return <p>Loading...</p>
  if (error) return <p>Error :(</p>

  return (
    <>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <ul>
        {data.alternativeSearch.products.map((product) => (
          <li key={product.id}>
            <a href={product.slug}>{product.name}</a>
          </li>
        ))}

        <li>
          <a href={`/products?term=${searchTerm}`}>See All</a>
        </li>
      </ul>
    </>
  )
}

export default SearchInputComponent

More Information on Alternate Search

The alternativeSearch query is a powerful query that allows you to search for products based on a variety of criteria. For more information on the alternativeSearch query or any other queries, please refer to the GraphQL Playground -> Docs -> alternativeSearch

We will keep referring to the alternativeSearch query throughout the storefront integration documentation. It is important to understand how to use this query. We recommend that you spend some time familiarizing yourself with the query.