This page provides you with further details to build your front-end application powered by Fredhopper.
Requirements
Please ensure the following requirements are met before you start:
Query Fredhopper
The following table provides Java source code for common use cases based on the Query Language library:
| Use case | Description | Source code (Java) |
|---|---|---|
| Attribute type function (geo search) | On a classified website the user can search for ads within a certain radius (e.g. 20km) of his current position (e.g. x=200, y=350). See Implement Fredhopper GEO search | Download |
| Breadcrumb | The user removes from the breadcrumb (e.g. Women > Shoes > Red) a single crumb (e.g. Red). | Download |
| Compare page | The user selects multiple items (e.g. ID 1000, 1001 and 1002), and requests to compare them. | Download |
| Gift finder | A online department store offers a gift finder in which users can enter a search term (e.g. "shirt") and set several filters (e.g. gender="female", occasion="christmas", price="up to 80 EUR"). | Download |
| Landing page | A website offers its clients direct access to the Nike landing page via the brand image. | Download |
| Lister size | The user wants to view more products (e.g. 25) than the default lister size. | Download |
| Numeric range | The user requests all cameras between 50 EUR and 200 EUR with more than 8 Mega Pixel. | Download |
| AND multi-select | On a travel website the user first selects all facilities (e.g. swimming pool, see, pets) that the hotel has to have, and requests afterwards to update the page. | Download |
| OR multi-select | On a travel website the user first selects a couple of countries that he may want to visit (e.g. Spain, Italy and Greece), and requests afterwards to update the page. | Download |
| Pagination | The user views one page of the item lister after the other (e.g. page="2"). | Download |
| Re-sorting | The user can re-sort the item lister by various attributes (e.g. descending release date). | Download |
| Scoped search | The user searches for "nike" in the category "women". | Download |
| Search | The user searches for "nike". | Download |
| See all items | The user views all items in the result set on one page. | Download |
| Session tracking | A website identifies each user by a session IDs, and wants to pass the session ID to Fredhopper. | Download |
Security
 |
Leaking internal Fredhopper parameters URL parameters like fh_location=//catalog01/en_US/categories<{women}, into your website may lead to problems with PCI compliance since they may look like cross-scripting. You can avoid leaking Fredhopper parameter into the front-end application by managing the client-facing URLs independently from internal Fredhopper query language as you would do it for SQL queries. For example: instead of adding to the URL fh_location=//catalog01/en_US/categories<{women}/price<500, just add cat=women&price=0,500 to the URL. Your front-end application uses these request parameters to create the Fredhopper query fh_location=//catalog01/en_US/categories<{women}/price<500. |
Render query results
The following table provides Java source code for common use cases:
Breadcrumbs
| Use case | Description | Source code (Java) |
|---|---|---|
| Breadcrumb | The user sees all refinement steps that led him to the current location, and can remove each of them. | See tutorial |
| Breadcrumb without refinements | The website shows in the breadcrumb only the categories path - but not further search or refinement options. | Download |
Facets
| Use case | Description | Source code (Java) |
|---|---|---|
| Facetmap (text links) | The user can refine its items results by various facets which are rendered as text links. | See tutorial |
| Facetmap (drop downs) | The user can refine the items by various facets which are rendered as drop-down boxes. After selecting a facet value, the alternative facet values are still displayed in the drop down (lateral facets), e.g. after selecting red, the color facet still shows also green, blue, etc. If the user selects another color like blue, the original selection (red) is replaced. | Download |
| OR multi-selects facets | The user can choose multiple facet values via a check box which are combined via OR, e.g. the user can choose in the country facet to go to Italy, Spain or Greece. | Download |
| Facet values with zero items | The website shows all facet values that apply to the category selection. For further refinements only the number of items are adjusted but not the available facet values, i.e. also facet values with 0 items will be shown. For example: In Home & Garden > Kitchen > Cookware the shop offers a.o. products from DeLonghi and Le Creuset. After a further refinement for color=blue, only Le Creuset products are still in the selection. Nonetheless, DeLonghi will be shown as an option with 0 items. Remark: In a real-life application one would cache the unfiltered request to avoid that the number of Fredhopper requests is doubled. |
Download |
Listers
| Use case | Description | Source code (Java) |
|---|---|---|
| Item lister | The website shows all organic query results. | See tutorial |
| Item lister paging | The user can view one page of the item lister after the other. | See reference implementation (ListerServlet.java) |
Campaigns
| Use case | Description | Source code (Java) |
|---|---|---|
| Campaigns | The website shows all campaignal query results. | See reference implementation (promotions.jsp) |
| Campaigns with custom fields | Marketers define in the Business Manager where campaigns are rendered, e.g. above the lister or next to the lister. | Download |
| Previous/next links on the detail page | The user can browse from one detail page to the next through a result set. | See reference implementation (nav_controls.jsp) |
Search
| Use case | Description | Source code (Java) |
|---|---|---|
| Redirects | The website redirects to the static FAQ page if the user searches for "faq" instead of showing items matching on "faq". | See reference implementation (PreviewServlet.java) |
| Query suggestions (we also searched for/Did you mean?) | The website shows which alternative search terms were used if the user misspelled his search term. | See reference implementation (breadcrumbs.jsp) |
Google Analytics tracking
| Use case | Description | Source code (Java) |
|---|---|---|
| Track facet clicks with Google Analytics | The user can refine the items by various facets. Each clicks is reported to Google Analytics as an event. | Download |
| Track landing pages & site search with Google Analytics | To generate Landing Page reports and Site Search reports in Google Analytics, the logged page URL is based on facet and search selections. | Download |
| Track campaigns with Google Analytics | The user select items in campaigns. Each clicks is reported to Google Analytics as an event. | Download |
Implement custom fields
Fredhopper use a concept of custom fields that enable you to add meta tags to both facets and campaigns. This concept is used to create good abstraction between Fredhopper and the presentation layer. Please carefully review the page below:
- Control facet display behaviour using custom fields
- Use custom fields for campaign grids
- Define a fly-out using custom fields
- Control promotion display behaviour using custom fields
More best practice examples
Please also review the page below in detail:
Limit the query capacity
You should ensure that your front-end application honors the SLA by putting an upper bound on the number of requests sent to Fredhopper - the SLA is specified in your hardware recommendation. We strongly discourage a best effort approach as the Fredhopper server may slow down, start rejecting requests or in the extreme case stop answering any requests.
If we assume a well-behaved client that does not send too many requests per second, a different usage pattern may still become problematic - the speed at which a client processes the response data. If a client processes responses in a streaming matter then the socket stream may actually keep the streams on the server side (Fredhopper) open and depending on their internal buffer - blocking. This keeps request processing threads blocking, which even in a well-behaved client (request-wise time limited) still may result in piling up threads and resources in the Fredhopper server. As a solution, limit the client to send no more than N requests (QPS + 10-20%), incrementing the counter of pending requests when the client makes a new request and decrementing the pending requests counter when a response processing completes entirely.
Comments
0 comments
Please sign in to leave a comment.