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 [2019/12/12 17:32] florian |
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''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 |}} | + | |
- | + | ||
- | ---- | + | |
- | + | ||
- | ==== 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. | + | 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. | + | 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 90: | Line 63: | ||
<code php> | <code php> | ||
- | document.addEventListener("findologicFinished", afterFindo); | + | document.addEventListener("findologicFinish", afterFindo); |
function afterFindo() { | function afterFindo() { | ||
// „Shop’s script“ | // „Shop’s script“ | ||
Line 96: | Line 69: | ||
</code> | </code> | ||
- | |||
- | |||
- |