Algolia - AutoComplete with Suggestion + Search Results Page - NextJS

Question

Am implementing the Algolia search in my NextJS app. I have the datasource and indices already setup. What am trying to setup is something like what Gucci is doing in their search. Gucci is using Algolia for their search functionality.

I tried using the react-instantsearch-dom package of Algolia. And I updated my /pages/_app.js file like this(only relevant code is written here):

/**
 *      /pages/_app.js
 * 
 */

//-------- Algolia
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch } from 'react-instantsearch-dom';

const searchClient = algoliasearch( 'xxxxxxxxxx', 'yyyyyyyyyyyyyyy' );
//-------- /Algolia

function MyApp({ Component, pageProps }) {
    return (
        <>
            <InstantSearch searchClient={searchClient} indexName={ 'abc_test_products' }>
                <Component {...pageProps} />                                
            </InstantSearch>   
        </>
    )
}

export default MyApp

This way I could use the components of react-instantsearch-dom anywhere.

Am confused at three things here.

---

Doubt 1:

How can I pass the algolia query and filters to the search results page like here and display the results using the components : https://www.gucci.com/us/en/st/newsearchpage?facetFilters=categoryLevel1_en%3AChildren&searchString=handbags&search-cat=header-search

So basically when the user clicks one of the algolia search suggestions(from the dropdown after clicking the search box at the top right corner of the page), they are taken to a search results page and there it seems like Algolia search is instantiated and displays the results.

---

Doubt 2:

How can I display the auto suggestions and product images side by side?

---

Doubt 3:

Displaying dynamic filter/refinement options. I understood that if there's a brand attribute in our Algoia indices/dataset, I can include that in the search filter like this:

<RefinementList attribute="brand" />

But if there are different attribute that I want to display the refinement list, say "Color", "Brand", etc. how would I display the title of the refinement option and the list dynamically from the search results.

---

Answer 1

Your UI example looks like a mash-up of a Query Suggestions panel on the left and a Hits list on the right. You can customize what a hit looks like before you render to get the image in there. And the filter menus automatically update as the user filters.

I haven't tried to get the query params into the URL, that would be interesting. I think you'd have to add useRouter into your Next page and then push the Algolia params onto the string using onClick.

Below is an example I built, maybe it helps you:

const Search = () => {

  const Hit = ({ hit }) => {
    return (
      <HitContainer>
        <span>{hit.type}</span>
        <h2><a href={hit.path}>{hit.title}</a></h2>
        {
          hit.content &&
            <p>{ `${hit.content.substring(0,150)} ...` }</p>
        }
        <hr />
      </HitContainer>
    )
  }

  return (
    <>
        <InstantSearch
          searchClient={ AlgoliaReactClient } 
          indexName="MAINSITE" >
          
          <CustomSearchBox 
            translations={{
              submitTitle: 'Submit your search query.',
              resetTitle: 'Clear your search query.',
              placeholder: 'What are you looking for?',
            }}
          />
          <HitsAndFilters>
            <AllFilters>
              <h3>Topics</h3>
              <FilterMenu
                attribute="topics" 
                limit={5}
                showMore
              />
              <h3>Locations</h3>
              <FilterMenu
                attribute="locations" 
                limit={5}
                showMore
              />
            </AllFilters>
            <AllHits hitComponent={Hit} />
          </HitsAndFilters>
        </InstantSearch>
      </>
    )
  }