Step by Step to your Front-End Integration
Ensure that all prerequisites for successful front-end integration are met before you begin.
Choose an integration method
To connect to the Fredhopper Query API you can use either the SOAP interface or the REST interface with either XML or JSON reponses.
For more information see also Front-End Integration Best Practice.
Understand your use cases
Identify all areas in your webshop where Fredhopper can be utilized, such as search, navigation or merchandising. Which parts of the shopper's journey (i.e. browse, search, refine, sort-by) will be powered by Fredhopper?
If you are working on your Fredhopper implementation together with Crownpeak, your technical consultant will have mapped out the use cases with you in the preparation phase.
For each context:
Identify the types of queries you have to send (see Sending Queries to the Query API and Constructing Queries).
Determine the context parameters for your query (see Constructing Queries).
Lastly, ensure that all necessary information is available to populate the required parameters and correctly formulate the required queries, e.g. consistent category IDs and parent categories.
Try out queries
Using a tool such as Postman, send sample queries to the Fredhopper Query API to identify any potential issues by taking a close look at the responses (see Understanding the FHR Query Response):
Does it include the facets, breadcrumbs, items-section, themes/campaigns as expected?
Are all the display fields and attribute types you need present?
Display fields are defined in the Merchandising Studio (System > Display fields).
Is there any excess information that you do not need in your front-end?
You can suppress any excess response content not needed in the front-end to improve performance. Note that only certain information can be suppressed. You can't suppress the following information in the response: info, breadcrumb, footer.
For more information see also Query Response Best Practice.
Optimize and maintain your integration
Beyond functional integration, focus on optimizing how your front end interacts with the Fredhopper Query API. Follow recommended strategies for minimizing latency, reducing payload size, caching, and limiting unnecessary queries. Regularly review your setup against Fredhopper’s evolving best-practice documentation.
Last updated