Materials: FINDOLOGIC files - WEBSALE Dokumentation

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

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.

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:

<script type="text/javascript" src="../js/web/jquery.autocomplete.js"></script>
<script type="text/javascript" src="../js/web/jquery.preload.js"></script>
<script type="text/javascript" src="../js/web/findologic_suggest.js"></script>

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.

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.

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.

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

​The files and where they come from

​The loading order

​The classes of the suggest layer

​The price slider

​The IDs and classes

​Why there are no listings here

The files and where they come from

The loading order

The classes of the suggest layer

The price slider

The IDs and classes

Why there are no listings here