Implementing Search page
Configuration
To create a search application, call the init
function with your configuration. This will create a new Preact application that renders on the specified contentCssSelector
. It will also bind to the input element identified by the provided inputCssSelector
and execute a search upon form submission.
The full list of Configuration options is documented here
Search page path
When serpPath
parameter is specified, the application will redirect to the specified search page after a search is conducted. Otherwise, the search will be rendered on the same page without changing the URL path.
Search page redirect
When serpPathRedirect
parameter is set to true
, the application after search submission will redirect the page to the search page specified in serpPath
and fetch the page. Default behaviour will rewrite browser history only to the specified path, without fetching the page.
Unbinding existing search input
To prevent events from firing on an existing input, you need to provide the CSS selector of the form that the input is in to the initialization configuration. When optional fromCssSelector
is passed, it will unbind the form and the elements inside from existing events. Additionally, formUnbindDelay
in milliseconds as value can be passed to delay the unbinding functionality.
Serp component
The search results page component should render a full search page using the provided app state. A minimal example might look like this:
Automatic URL Parameter Compression
When the compressUrlParameters
flag is set to true
, it automatically applies the URL parameter compression functions for filters, sort and pagination.
@nosto/preact
library has pre-built functions for changing search url format:
Description | Example | |
---|---|---|
| Replaces | Before:
|
| Returns shorter | Before:
|
| Compresses | Before:
|
Features
Faceted navigation
Stats facet
The stats facet returns the minimum and maximum values of numerical fields from search results. This functionality is especially useful when creating interactive elements like sliders. For instance, a price slider can leverage these min-max values to define its range, providing users a simple way to filter products within their desired price range.
Utilize the useRangeSlider
hook to generate useful context for rendering range inputs. Additionally, employ the component to generate the slider itself. These tools together facilitate the creation of dynamic and interactive range sliders for your application.
Terms facet
The terms facet returns field terms for all products found in the search. This feature analyzes the content of each product and extracts meaningful terms. These terms can then be used to filter or refine search results, providing users with a more accurate and targeted product search.
You can use the toggleProductFilter
function to toggle any filter value. This function will either add the filter value if it's not already applied or remove it if it's currently active, thus providing an efficient way to manipulate product filters in your application.
Pagination
Use the usePagination
hook to generate useful context for rendering any desired pagination. Utilize the width parameter to adjust how many page options should be visible. Also, remember to scroll to the top on each page change to ensure a seamless navigation experience for users.
Product actions
Since the code editor utilizes the Preact framework, it offers significant flexibility in customizing behavior or integrating the search page with existing elements on your site. For instance, you can implement actions such as 'Add to Cart', 'Wishlist', or 'Quick View'.
Analytics
Search automatically tracks to Google Analytics & Nosto Analytics when using SerpElement
component.
Component parameters:
hit | Product object. |
as | Element to render |
onClick (optional) | Additional onClick callback (tracking callback is already implemented in the component). |
The SerpElement
component supports any other HTML attribute, e.g. class.
Fallback Functionality
The search page incorporates built-in fallback functionality, allowing users to customize the behavior in case the search service encounters issues. To activate this feature, modify the initialization configuration to include the fallback: true
key-value pair.
Enabling Fallback
To enable fallback functionality, include the following code in the initialization configuration:
Once fallback is enabled, if the search request fails to retrieve data, the search functionality will be temporarily disabled for a short period, and the user will be redirected to the same page they are currently on.
Customizing Fallback Location
Additionally, it's possible to customize the location to which users are redirected when the search functionality is unavailable. This customization involves specifying functions for both the search engine results page (SERP) and category pages.
SERP Fallback
To redirect users to a specific location when the search engine is down, define a function for serpFallback
. This function accepts one parameter containing information about the current search query, including the query itself.
Category Fallback
Similarly, for category pages, define a function for categoryFallback
. This function also accepts one parameter containing information about the current query, including the category ID or Path.
By customizing these fallback locations, you can enhance the user experience by providing them with alternative navigation options if the search functionality is temporarily unavailable.
Search engine configuration
Nosto Search engine is relevant out of the box and search API can be used without any initial setup. Nosto Dashboard can be used to further tune search engine configuration:
Searchable Fields - manage which fields are used for search and their priorities,
Facets - create facets (filtering options) for search results page,
Ranking and Personalization Ranking and Personalization - manage how results are ranked,
Synonyms, Redirects, and other search features are also managed through Nosto Dashboard (my.nosto.com).
Last updated