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/07 14:06]
sarah [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.
  
 ------ ------
  
-=== Search result container ​===+==== Implementing the Findologic snippet ====
  
-This container has to be available on every shop page in order to ensure that the search works on every single page. The container must have the class ''​fl-result''​. For the search result pages, the HTML-response of FINDOLOGIC ​contains both all found product and the available filters.+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 |}} {{ :​integration_documentation:​fl-result.png |}}
Line 17: Line 26:
 ---- ----
  
-=== Navigation container ===+==== Navigation container ​====
  
-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. +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. 
-This container has to be available on every category page of the shop. The container must have the class ''​fl-navigation-result''​. For the category pages, the HTML-response of FINDOLOGIC ​contains both all found products and available filters for this category.+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 |}} {{ :​integration_documentation:​fl-navigation-result.png |}}
Line 26: Line 36:
 ---- ----
  
 +==== Visualisation ====
 +
 +  - The Findologic filters will be placed in the filter container, if the ''​cat_url''​ is correct.
 +  - 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 navigation, or 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>​