integration_documentation:direct_integration

integration_documentation:direct_integration

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
integration_documentation:direct_integration [2019/12/19 11:05]
lukas [Inserting content after FINDOLOGIC rendering]
integration_documentation:direct_integration [2022/03/16 11:44] (current)
florian [Implementing the Findologic snippet]
Line 1: Line 1:
-===== Integration documentation - Direct Integration =====+===== Direct Integration =====
  
 ==== Overview ==== ==== 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+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.
  
-FINDOLOGIC ​loads the entire search result ​as defined in the [[customer_account:​template_manager|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.+Findologic ​loads the entire search result 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 ====+==== Implementing the Findologic ​snippet ====
  
-You can find the snippet for your channel in the [[https://secure.findologic.com/​login.symfony/​web/​app.php/​smartsuggest/​edit|FINDOLOGIC customer login]]. Please add this snippet in the ''<​head>''​-section of your source code. +You can find the snippet for your channel in your [[https://account.findologic.io|Findologic account]]. Please add this snippet in the ''<​head>''​-section of your source code. 
  
 <​note>​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.</​note>​ <​note>​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.</​note>​
Line 19: Line 19:
 ==== Search result container ==== ==== 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. +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.+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.
  
 {{ :​integration_documentation:​fl-result.png |}} {{ :​integration_documentation:​fl-result.png |}}
Line 26: Line 26:
 ---- ----
  
-==== FINDOLOGIC navigation ​====+==== Navigation container ​====
  
-The FINDOLOGIC navigation allows you to use the FINDOLOGIC filters ​on category pages. \\ +For using Findologic ​on category pages you have to provide ​the ''​cat_url''​s in a valid manner. ​[[xml_export_documentation:xml_format#​cat_url_examples|See our documentation about ''​cat_urls''​]] for more information. 
-You will also have all the benefits of the Direct Integration and you can use our merchandising feature ​[[customer_account:product_pushing|product pushing]].+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.
  
----- +{{ :integration_documentation:​fl-navigation-result.png |}}
- +
-==== 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_export_documentation:xml_format#​attributes|XML]] or [[csv_export_documentation:​csv_format#​attributes|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 [[integration_documentation:​direct_integration:​|our documentation]] about Direct Integration for more information on this topic. +
- +
-**FINDOLOGIC:​** +
- +
-  * The navigation needs to be integrated by FINDOLOGIC. ​+
  
 ---- ----
Line 55: Line 38:
 ==== Visualisation ==== ==== Visualisation ====
  
-  - The FINDOLOGIC ​filters will be placed in the filter container, if the ''​cat_url''​ is correct. +  - The Findologic ​filters will be placed in the filter container, if the ''​cat_url''​ is correct. 
-  - The products will still be provided by the shop. +  - 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)
-  - When selecting a filter, the products will be provided by FINDOLOGIC ​via JavaScript and will be placed in the products container.+  - When selecting a filter, the products will be provided by Findologic ​via JavaScript and will be placed in the products container.
  
 ----- -----
Line 70: Line 53:
 ---- ----
  
-==== Navigation container ​====+==== Inserting content after Findologic rendering ​====
  
-For using FINDOLOGIC on category pages you have to provide the ''​cat_url''​in a valid manner[[xml_export_documentation:​xml_format#​cat_url_examples|See our documentation about ''​cat_urls''​]] for more information. +In case of frequent updates ​to a product’s or category’specific information (e.gavailabilityprice, promotion banners etc.), it is possible ​to load this data dynamically via scripts ​on the shop’s sideafter Findologic results are fully rendered.
-To ensure proper functionalitythe FINDOLOGIC Direct Integration must have access to the main container of the shopTo 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 pagesthe HTML-response of FINDOLOGIC contains both all found products and available filters for this category.+
  
-{{ :​integration_documentation:​fl-navigation-result.png |}} +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.
- +
----- +
- +
-==== 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:​ Recommended implementation:​
Line 96: Line 69:
  
 </​code>​ </​code>​
- 
- 
-