integration_documentation:direct_integration

integration_documentation:direct_integration

Overview

The FINDOLOGIC-scripts are binding events on the search field of the shop. When a user submits the form of the search field, the request gets sent via AJAX directly to the FINDOLOGIC servers. This offers a massive speed boost and lowers the load on the shop side, because it is not necessary that the request is being sent to the shop's server first.

FINDOLOGIC loads the entire search result as defined in the template manager and delivers the rendered HTML to the shop. The HTML in this response will be placed in a container of the shop. This container must have unique selectors. As a customer of FINDOLOGIC you have to add the given classes to the existing main container in your shop.


Implementing the FINDOLOGIC snippet

You can find the snippet for your channel in the FINDOLOGIC customer login. Please add this snippet in the <head>-section of your source code.

Please note that the usage of Google Tag Manager will disable the flickerfree-functionality of the snippet as the scripts are getting loaded too late.

Search result container

To ensure proper functionality, the FINDOLOGIC Direct Integration must have access to the main container of the shop. To do so, it is necessary to add the class fl-result to the corresponding, pre-existing container. This class has to be available on every shop page in order to ensure that the search works on every single page. For the search result pages, the HTML-response of FINDOLOGIC contains both all found product and the available filters.


FINDOLOGIC navigation

The FINDOLOGIC navigation allows you to use the FINDOLOGIC filters on category pages.
You will also have all the benefits of the Direct Integration and you can use our merchandising feature product pushing.


Use the navigation in your shop

If you want to use FINDOLOGIC in your category pages with Direct Integration, the requirements are as described below.

Export:

  • Make sure to export the correct cat_urls in the attributes, matching the FINDOLOGIC XML or CSV export scheme.

Shop frontend:

  • The container for the filters with the id “fl-filters”.
  • The container for the navigation results when choosing a filter wit the id “fl-searchresults”.
  • See our documentation about Direct Integration for more information on this topic.

FINDOLOGIC:

  • The navigation needs to be integrated by FINDOLOGIC.

Visualisation

  1. The FINDOLOGIC filters will be placed in the filter container, if the cat_url is correct.
  2. Depending on the type of navigation booked, products will either be provided by the shop or by FINDOLOGIC on the first click (instant product listing).
  3. When selecting a filter, the products will be provided by FINDOLOGIC via JavaScript and will be placed in the products container.

1. 2. & 3.

If you have any questions regarding the navigation, or you are not sure how to integrate the navigation in your shop, please contact our technical support support@findologic.com.


For using FINDOLOGIC on category pages you have to provide the cat_urls in a valid manner. See our documentation about ''cat_urls'' for more information. To ensure proper functionality, the FINDOLOGIC Direct Integration must have access to the main container of the shop. To do so, it is necessary to add the class fl-navigation-result to the corresponding, pre-existing container. This class has to be available on every category page of the shop. For the category pages, the HTML-response of FINDOLOGIC contains both all found products and available filters for this category.


Inserting content after FINDOLOGIC rendering

In case of frequent updates to a product’s or category’s specific information (e.g. availability, price, promotion banners etc.), it is possible to load this data dynamically via scripts on the shop’s side, after FINDOLOGIC results are fully rendered.

If needed, FINDOLOGIC will send an event (such as „findologicFinish“) after results rendering. In further consequence any code may be executed by setting up a respective event-listener.

Recommended implementation:

document.addEventListener("findologicFinish", afterFindo);
function afterFindo() {
    // „Shop’s script“
}