integration_documentation:direct_integration
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
integration_documentation:direct_integration [2018/05/07 14:57] florian [Shopware] |
integration_documentation:direct_integration [2022/03/16 11:44] 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 the response will be placed in container of the shop with **unique ids**. 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 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. | + | 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 |}} | ||
| ---- | ---- | ||
| - | === Filter container === | + | ==== Navigation container ==== |
| - | For using FINDOLOGIC on category pages you have to provide the ''cat_url''s in a valid manner. [[export_patterns:xml_export|See our documentation about ''cat_url''s]] 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 should have the id *fl-filters*. For the category pages, the HTML-response of FINDOLOGIC contains both all 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 |}} | ||
| ---- | ---- | ||
| - | ==== Direct Integration plugins for the export ==== | + | ==== Visualisation ==== |
| - | FINDOLOGIC offers **plugins for the export** for the shopsystems, that are listed below. | + | - 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}} | ||
| + | |||
| + | ---- | ||
| - | If there is no export-plugin available for your shopsystem, you have to use an individual script for exporting shop-data to FINDOLOGIC. | + | ==== Inserting content after Findologic rendering ==== |
| - | See our [[export_patterns:xml_export|export documentation for XML format]] and the [[export_patterns:xml|FINDOLOGIC XML export patterns]] for informations about the FINDOLOGIC XML-export, that is used for the Direct Integration. | + | 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. |
| - | <note>The Direct Integration is possible for every shopsystem, including individual shopsystems!</note> | + | Recommended implementation: |
| - | \\ | + | <code php> |
| + | document.addEventListener("findologicFinish", afterFindo); | ||
| + | function afterFindo() { | ||
| + | // „Shop’s script“ | ||
| + | } | ||
| + | </code> | ||