> ## Documentation Index > Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt > Use this file to discover all available pages before exploring further. # Materials: FINDOLOGIC files > The JavaScript and CSS files of the FINDOLOGIC integration: where each one comes from, in which order they're loaded, and which classes you can style. The FINDOLOGIC integration requires several JavaScript and CSS files. None of them come from WEBSALE. This page tells you where to get each one, in which order they're loaded, and which classes you can target in the stylesheet. How to integrate the search and the suggest function is described on the guide page. Guide: Integrating FINDOLOGIC · Integrating the FINDOLOGIC suggest function ## The files and where they come from | File in the shop | What it is | Source | | - | - | - | | `findologic_suggest.js` | the FINDOLOGIC suggest script, named `structured_autocomplete.js` there | FINDOLOGIC | | `findologic_suggest.css` | the associated style file, named `structured_autocomplete.css` there | FINDOLOGIC | | `jquery.autocomplete.js` | the jQuery plugin Autocomplete 1.1 by Jörn Zaefferer, 2009, MIT and GPL | FINDOLOGIC, or the plugin itself | | `jquery.preload.js` | the jQuery plugin Preload 1.0.8 by Ariel Flesler, 2008, MIT and GPL | FINDOLOGIC, or the plugin itself | | `findologic_priceslider.js` | a jQuery UI 1.8.16 package with Core, Widget, Mouse, and Slider, 2011, MIT and GPL | jQuery UI | | `findologic_priceslider.css` | the associated theme stylesheet, extended with the FINDOLOGIC classes | FINDOLOGIC | > [!NOTE] > > Request the files from FINDOLOGIC. Some of them have different names there, and the second column gives the original name in each case. When you place them in the shop, rename them as used on the guide page, otherwise the paths in the examples won't match. > [!WARNING] > > The four libraries date from 2008 to 2011 and are no longer maintained by their authors. jQuery UI 1.8.16 is particularly old. Have FINDOLOGIC confirm new integrations before you adopt these versions, and check whether FINDOLOGIC now ships newer versions. ## The loading order For the suggest function: ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ``` `findologic_suggest.js` requires both jQuery components and must come after them. If it comes before them, the suggest function has no effect and no error message appears. You only need `jquery.preload.js` if the suggestions should show preview images. For the price slider, add `findologic_priceslider.js`. It brings its own jQuery UI and is independent of the suggest function. > [!WARNING] > > If your shop already includes jQuery UI, don't load `findologic_priceslider.js` in addition. Two jQuery UI versions in the same document overwrite each other, and which one wins depends on the order. In this case, use your existing jQuery UI with the Slider module and take only the FINDOLOGIC classes from `findologic_priceslider.css`. ## The classes of the suggest layer `findologic_suggest.js` builds the layer itself. The supplied style file styles these classes. If you adapt the layer to your design, these are the starting points. | Class | Element | | - | - | | `ac_results` | the layer as a whole | | `ac_result` | a suggestion row | | `ac_over` | the row under the mouse pointer | | `ac_odd` | every second row, for alternating backgrounds | | `ac_title_row` | a heading row within the layer | | `ac_image` | the preview image of a product suggestion | | `ac_name` | the product name or search term | | `ac_price` | the price | | `ac_baseprice` | the base price | | `ac_cat` | the category of a suggestion | | `ac_loading` | the loading state during the request | | `autocompleteCat` | the category row in the suggestion list | | `autocompletecount` | the number of hits | | `allResults` | the "show all results" row at the end | | `headline` | a subheading | | `flHighlight` | the part of the suggestion the visitor has already typed | In addition, there's the ID `preview` for the preview area. > [!NOTE] > > `findologic_suggest.js` contains a general base class and, building on it, an implementation for a different shop system, recognizable by the names around `Plentymarkets`. The functions for adding a suggestion directly to the basket belong to this third-party implementation and aren't available in WEBSALE V8s. This is added here; the previous documentation doesn't mention it. > > For WEBSALE, only the basic function applies: show suggestions and trigger the search on selection. ## The price slider As a filter for the search results, you can offer a price range as a slider. It isn't described on the guide page or anywhere else in this documentation. What follows is derived from the two files and added here. The slider is a jQuery UI slider. The two files provide everything it needs: the JavaScript provides the slider including its dependencies, and the stylesheet provides both the jQuery UI theme and FINDOLOGIC's own styling. ### The IDs and classes | ID or class | Element | | - | - | | `fl-price-slider` | the slider itself, the ID of the element jQuery UI is bound to | | `flChosenPriceFilter` | the display of the selected price range | | `flpricemax` | the upper value | | `flSliderWrapper` | the frame around the slider | | `flSlider` | the bar | | `flSlideMarker` | a handle | | `activeMarkerLabel` | the label of a handle while it's being moved | | `flSliderToolTip` | the value display at the handle | | `flLabels` | the labels below the bar | | `flRightValue` | the right end value | | `flFilterBoxFilters` | the box containing the filter | In addition, the stylesheet uses the usual jQuery UI classes `ui-slider`, `ui-slider-horizontal`, `ui-slider-handle`, `ui-slider-range`, `ui-widget`, `ui-widget-content`, `ui-widget-header`, and the states `ui-state-default`, `ui-state-hover`, `ui-state-focus`, and `ui-state-active`. If you restyle the slider, change the `fl` classes and leave the `ui` classes alone, otherwise you'll break the widget's behavior. > [!NOTE] > > The previous documentation swaps the source information for these two files. For `findologic_priceslider.js` it states "file name at FINDOLOGIC: fl\_slider.css", and for the CSS file "fl\_slider.js". Corrected here. ## Why there are no listings here The previous documentation prints all six files in full, about 75,000 characters in total. Not a single line of it comes from WEBSALE, two of the files are minified, and `findologic_priceslider.js` consists entirely of a jQuery UI package. Third-party code printed in documentation becomes outdated without anyone noticing, and it tempts you to adopt a 2011 version instead of asking the vendor for the current one. This page therefore names the sources and what you need to know for the integration. Guide: Integrating FINDOLOGIC ## Related topics - [Integrating FINDOLOGIC](https://dokumentation.websale.de/en/v8s/externe-dienste/integration-von-findologic.md) - [INQUIRY materials](https://dokumentation.websale.de/en/v8s/materialien/materialien-inquiry.md) - [Advertising materials](https://dokumentation.websale.de/en/v8s/referenz/tags/affiluser/werbemittel.md) - [IBAN converter materials](https://dokumentation.websale.de/en/v8s/materialien/materialien-iban-konverter.md) - [Materials: FACT-Finder suggest layer](https://dokumentation.websale.de/en/v8s/materialien/materialien-fact-finder-suggest-layer.md) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.