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/03/04 14:46]
florian [Overview]
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 searchfield ​of the shop. When a user submits the form of the searchfield, 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-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 provide these containers ​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 ==== 
 + 
 +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>​ 
 + 
 +------ 
 + 
 +==== 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. 
 + 
 +{{ :​integration_documentation:​fl-result.png |}}
  
 ---- ----
  
-=== Search result ​container ===+==== Navigation ​container ​====
  
-This container has to be available on every shop page in order to ensure that the search works on every single page. The container should have the id *fl-searchresults*. For the search result ​pages, the HTML-response of FINDOLOGIC ​contains both all found product ​and the available filters.+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. 
 +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 |}}
  
 ---- ----
  
-=== Filter container ​===+==== Visualisation ====
  
-For using FINDOLOGIC on category pages you have to provide ​the ''​cat_url''​s in a valid manner. [[export_patterns:​xml#​cat_url_examples|See our documentation about ''​cat_urls''​]] for more information+  - The Findologic filters will be placed in the filter container, if the ''​cat_url'' ​is correct
-This container has to be available ​on every category page of the shop. The container should have the id *fl-filters*. For the category pages, the HTML-response of FINDOLOGIC contains both all available filters for this category.+  - 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. 
 + 
 +----- 
 + 
 + **1.** {{ integration_documentation:​nav1_1.png }}  
 + **2. & 3.** {{ integration_documentation:​nav1_2.png }} 
 + 
 +If you have any questions regarding ​the navigationor you are not sure how to integrate ​the navigation in your shop, please contact our technical support [[support@findologic.com]]. 
 + 
 +{{tag>​Navigation Nav Selector}}
  
 ---- ----
  
 +==== 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:​
 +
 +<code php>
 +
 +document.addEventListener("​findologicFinish",​ afterFindo);​
 +function afterFindo() {
 +    // „Shop’s script“
 +}
  
 +</​code>​