Search Results

Learn how to integrate Fast Simon’s search functionality into your Catalyst app by using the refined search function that queries Fast Simon’s API. This integration powers dynamic search result pages with filtering, sorting, and pagination.

---

Step 1: Update the Search Page

1. Navigate to the file:
   core/app/[locale]/(default)/(faceted)/search/page.tsx
2. Add the Refined Search Function:
   In this file, add the following function that initializes and invokes Fast Simon’s API using the Catalyst SDK. In the below example we are using the Props interface provided by Catalyst, you need to add facetsOnly?: boolean to the Props interface.

const getFastSimonRefinedSearch = cache(async (props: Props) => {
  const searchParams = await props.searchParams;

  return await fetchFastSimonFacetedSearch({
    page: searchParams.page && typeof searchParams.page === 'string' ? searchParams.page : '1',
    narrow: FastSimonDataTransformer.parseFiltersParams(searchParams),
    sort: FastSimonDataTransformer.getFastSimonSortParam(searchParams.sort),
    term: typeof searchParams.term === 'string' ? searchParams.term : null,
    facetsOnly: props.facetsOnly || false,
  });
});

3. Replace Existing Function Calls:

   • Update all instances where the previous getRefinedSearch function is used, replacing them with the new getFastSimonRefinedSearch function.
     
   • Update the pagination function to use Fast Simon data:

    async function getPaginationInfo(props: Props): Promise<CursorPaginationInfo> {
      // ...rest
      const search = await getSearch(props);
      const { hasNextPage, hasPreviousPage, endCursor, startCursor } = search.products.pageInfo;
   
      return {
        startCursorParamName: 'before',
        endCursorParamName: 'after',
        ...search.products.pageInfo,
        endCursor: hasNextPage ? endCursor : null,
        startCursor: hasPreviousPage ? startCursor : null,
     };
    }

---

Step 2: Update the Filters Function

Ensure your filters component fetches the correct facet data by updating the getFilters function. Replace its implementation with:

async function getFilters(props: Props): Promise<Filter[]> {
  const refinedSearch = await getFastSimonRefinedSearch({ ...props, facetsOnly: true });
  return refinedSearch.facets.items;
}

This function calls the refined search with the facetsOnly flag enabled and returns the facets to be rendered by your filters component.

---

Key Concepts

Translating Fast Simon Results

• Data Transformation:
  Use the FastSimonDataTransformer to convert Fast Simon search results into the data structure expected by your Catalyst components. This step is analogous to the Shopify GraphQL structure transformation in Hydrogen, but tailored for your Catalyst implementation.

Handling Facets

• Facets Availability:
  If the initial Fast Simon response does not include fully prepared facets, the API is designed to fetch and resolve them asynchronously.

• Efficient Updates: By replacing the legacy search functions with getFastSimonRefinedSearch, your search pages and filters are optimized for performance and real-time data updates.

---

Additional Notes

Error Handling:
Ensure that any errors during the search process are caught and logged. This will help maintain a smooth user experience even when Fast Simon API calls encounter issues.

• Component Integration:
  Make sure that your search results and filters components are designed to handle the transformed data structure returned from the Fast Simon API.
• Testing:
  Test the integration thoroughly in both local development and staging environments before deploying to production.

By following these steps, you will have fully integrated Fast Simon’s search functionality into your Catalyst storefront, delivering a dynamic and responsive search experience to your users.