General
epoq Search is an intelligent search. The search results are calculated in milliseconds and an intelligent algorithm outputs targeted results, for example by detecting and correcting errors, making suggestions and recognising automatic and manual adjustments.
- For the setup of the intelligent search we need your product catalog in XML or CSV format. We hand over the tracking code for the connection to our knowledge base, which you integrate into your online shop.
- You will receive a code snippet as a placeholder for the frontend of the intelligent search function, which you integrate into your online shop.
- We create the search widget according to your requirements and it takes over the display of filters and search results.
- We check the search field and filter functions, test weighting, ranking and error tolerance and optimise these settings.
- The intelligent search is checked in detail in the test system and will be activated in the online shop after your approval.
By default, the currently popular browsers are supported.
Technical Integration
The complete code (JS/CSS) is made available via the integration of the epoq tracking file (flow file), so that no further file needs to be included in the shop.
The flow-file must be included on all pages.
Example <head> Extension
The reference to the required file should be included in the <head> section of the page:
flow-File Beispiel
<head>
...
<script type='text/javascript' src='https://cdn.epoq.de/flow/TENANT-ID.js'></script>
...
</head>
In Staging/Test systems the flow-file loads additional JavaScript and CSS files to enable us to develop faster and better error analysis. Furthermore, indicators usually show that we are in staging mode.
In the productive system we play a minified file.
Used libraries/files
We currently use the JavaScript libraries jQuery, jQuery.ui and jQuery.address to support the functions of the epoq search widget.
If jQuery and/or jQuery.ui are available, we are happy to use the existing libraries with them.
If this is not possible or not desired, it is also possible for us to supply our own jQuery with our own add-ons in noConflict mode.
jQuery – Libraries:
- jQuery (current version: 3.3.1)
- jQuery UI (current version: 1.12.1)
- jQuery Address (current version: 1.6)
Page changes
In addition to the integration of the flow file, you have to create various <div> placeholders in your HTML templates, which are later filled dynamically with the search information.
Depending on your requirements, the templates may differ slightly from the standard given below.
Search input field
Wherever the search input field including typeahead is to be displayed, the following fragments should be placed:
Search input field
...
<input class="epoq_search_box" type="text">
<button class="epoq_search_button" type="submit"/>
...
If corresponding elements already exist, it is sufficient to add the respective CSS classes "epoq_search_box" and "epoq_search_button".
Search results page
The following must be placed on the page on which the search results including navigation/sorting and filter options are to be displayed:
Search results page
// As a placeholder for the search term entered and the number of results:
<div id="epoq_currentSearch"></div>
// As placeholder for the Link Finder:
<div id="epoq_contentresult"></div>
// As placeholder for the banner management:
<div id="epoq_bannerresult"></div>
//As placeholder for the filters and statistics:
<div id="epoq_filterresult"></div>
// As placeholder for sorting, navigation and the result list:
<div id="epoq_searchresult"></div>
The different DIVs can be arranged as desired on the shop side. For example, it is common to set the filters on the left in a separate table or list, while the product tiles are then placed on the right. We only replace within the <div> and therefore do not change the placement.
Parameter transfer for navigation pages
Filters are used for special pages, such as the product overview pages, which can be accessed via the shop navigation. This ensures that only the results from the transferred category are displayed on a category page. The respective filters are transferred via JavaScript.
Here is an example, if the category page "Clothing>Pants" for men and children is to be called up:
Parameter transfer for navigation pages
<script type="text/javascript">
var EpoqSearch = EpoqSearch || {};
EpoqSearch.navigationFilter = {
"g:product_type": ["Clothing>Pants"],
"e:gender": ["gentlemen", "children"]
};
</script>
Important here: The values must correspond exactly to the values in the catalog.
Integration of the search result display
As soon as a search is made in the search input field (Enter, mouse click), a complete search is triggered. This normally leads to the search results page, where we fill the corresponding containers.
Display on a search results page (with forwarding)
With this option, a fixed page for the search results display is specified. This page should be communicated to us so that the redirection is carried out correctly.
When you start a search, you will be redirected to this page and the search results will be displayed there.
As soon as you are on the search results page, new search queries or changes (filtering, sorting, paging) are executed directly in the page via AJAX.
You can also set the search results page yourself in your shop:
<script type="text/javascript">
var EpoqSearch = EpoqSearch || {};
EpoqSearch.epoq_target = "/search";
</script>