Skip to main content

Autocomplete

Enhance your Catalyst storefront search experience by integrating Fast Simon's Autocomplete functionality. This guide explains how to replace your existing search query with Fast Simon's AI-driven autocomplete API for real-time suggestions.

Step 1: Update the Search Action​

  1. Navigate to the file:
    core/components/header/_actions/search.ts

  2. Modify the search function:
    Replace the existing search logic with Fast Simon's Autocomplete API. For example, locate the following code:

    try {
      const response = await client.fetch({
        document: GetQuickSearchResultsQuery,
        variables: { filters: { searchTerm: submission.value.term }, currencyCode },
        customerAccessToken,
        fetchOptions: customerAccessToken ? { cache: 'no-store' } : { next: { revalidate } },
      });

      const { products } = response.data.site.search.searchProducts;

      return {
        lastResult: submission.reply(),
        searchResults: await searchResultsTransformer(removeEdgesAndNodes(products)),
        emptyStateTitle,
        emptyStateSubtitle,
      };
    }

    Replace it with:

    try {
      const fastSimon = await getFastSimon();
      const results = await fastSimon.getAutocompleteResults({
        query: submission.value.term,
      });

      const fastSimonSearchResults = FastSimonDataTransformer.parseFastSimonAutocompletResponse(results);

      return {
        lastResult: submission.reply(),
        searchResults: fastSimonSearchResults,
        emptyStateTitle,
        emptyStateSubtitle,
      };
    }

    This updated function calls Fast Simon's ;getAutocompleteResults; to retrieve search suggestions and then transforms the response using your utility function.

Step 2: Parse and Transform the Autocomplete Response​

Ensure you have a utility function (e.g., parseFastSimonAutocompletResponse) that transforms the raw Fast Simon API response into the data structure expected by your Catalyst search components. This function should:

  • Extract product data, collection suggestions, or popular search terms.
  • Format the data for display in the autocomplete dropdown.

Key Concepts​

Dynamic Search Suggestions​

  • Real-Time Autocomplete:
    The Fast Simon Autocomplete API provides immediate suggestions based on the user's input, enabling a more interactive search experience.
  • AI-Driven:
    Powered by Fast Simon's AI, the suggestions are contextually relevant and can enhance user engagement.

Seamless Integration​

  • Minimal Code Changes:
    By replacing your existing client fetch call with the Fast Simon SDK method, you can integrate advanced autocomplete functionality with minimal modifications.
  • Optimized for Catalyst:
    This integration leverages the new Fast Simon SDK packages (@fast-simon/storefront-sdk and @fast-simon/types) and fits seamlessly into your Next.js-based Catalyst storefront.

Benefits

  • Enhanced User Experience:
    Users receive faster and more accurate search suggestions, improving overall satisfaction.
  • Increased Engagement:
    Relevant autocomplete suggestions can help drive higher click-through rates and conversions.
  • Simplified Maintenance:
    With a dependency-free SDK approach, the integration remains lightweight and easy to update across frameworks.

By following these steps, you can power your Catalyst storefront with Fast Simon's Autocomplete functionality, delivering a refined and dynamic search experience that adapts to your users' needs.