> ## 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. # Materialien FINDOLOGIC-Dateien > Die JavaScript- und CSS-Dateien der FINDOLOGIC-Integration: woher jede stammt, in welcher Reihenfolge sie geladen werden und welche Klassen Sie gestalten können. Die FINDOLOGIC-Integration braucht mehrere JavaScript- und CSS-Dateien. Keine davon stammt von WEBSALE. Diese Seite sagt Ihnen, woher Sie jede bekommen, in welcher Reihenfolge sie geladen werden und welche Klassen Sie im Stylesheet ansprechen können. Wie Sie die Suche und die Vorschlagsfunktion einbauen, steht auf der Anleitungsseite. Wegweiser: [Integration von FINDOLOGIC](https://dokumentation.websale.de/v8s/externe-dienste/integration-von-findologic.md) · [Integration der FINDOLOGIC Suggest-Funktion](https://dokumentation.websale.de/v8s/externe-dienste/integration-von-findologic.md) ## Die Dateien und woher sie kommen | Datei im Shop | Was es ist | Bezugsquelle | | - | - | - | | `findologic_suggest.js` | das Suggest-Skript von FINDOLOGIC, dort `structured_autocomplete.js` | FINDOLOGIC | | `findologic_suggest.css` | die zugehörige Stildatei, dort `structured_autocomplete.css` | FINDOLOGIC | | `jquery.autocomplete.js` | das jQuery-Plugin Autocomplete 1.1 von Jörn Zaefferer, 2009, MIT und GPL | FINDOLOGIC, oder das Plugin selbst | | `jquery.preload.js` | das jQuery-Plugin Preload 1.0.8 von Ariel Flesler, 2008, MIT und GPL | FINDOLOGIC, oder das Plugin selbst | | `findologic_priceslider.js` | ein jQuery-UI-Paket 1.8.16 mit Core, Widget, Mouse und Slider, 2011, MIT und GPL | jQuery UI | | `findologic_priceslider.css` | das zugehörige Theme-Stylesheet, ergänzt um die FINDOLOGIC-Klassen | FINDOLOGIC | Fordern Sie die Dateien bei FINDOLOGIC an. Dort heißen sie teilweise anders, die zweite Spalte nennt den jeweiligen Originalnamen. Benennen Sie sie beim Ablegen im Shop so um, wie es die Anleitungsseite verwendet, sonst stimmen die Pfade in den Beispielen nicht. > [!WARNING] > > Die vier Bibliotheken stammen aus den Jahren 2008 bis 2011 und werden von ihren Urhebern nicht mehr gepflegt. jQuery UI 1.8.16 ist besonders alt. Lassen Sie neue Integrationen von FINDOLOGIC bestätigen, bevor Sie diese Stände übernehmen, und prüfen Sie, ob FINDOLOGIC inzwischen neuere Fassungen ausliefert. ## Die Ladereihenfolge Für die Vorschlagsfunktion: ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ``` `findologic_suggest.js` setzt beide jQuery-Komponenten voraus und muss nach ihnen stehen. Steht es davor, bleibt die Vorschlagsfunktion wirkungslos, ohne dass eine Fehlermeldung erscheint. `jquery.preload.js` brauchen Sie nur, wenn die Vorschläge Vorschaubilder zeigen sollen. Für den Preis-Schieberegler kommt `findologic_priceslider.js` dazu. Er bringt sein eigenes jQuery UI mit und ist unabhängig von der Vorschlagsfunktion. > [!WARNING] > > Wenn Ihr Shop bereits jQuery UI einbindet, laden Sie `findologic_priceslider.js` nicht zusätzlich. Zwei jQuery-UI-Stände im selben Dokument überschreiben sich gegenseitig, und welcher gewinnt, hängt von der Reihenfolge ab. Verwenden Sie in diesem Fall Ihr vorhandenes jQuery UI mit dem Modul Slider und übernehmen Sie aus `findologic_priceslider.css` nur die FINDOLOGIC-Klassen. ## Die Klassen des Suggest-Layers Den Layer baut `findologic_suggest.js` selbst auf. Die mitgelieferte Stildatei gestaltet diese Klassen. Wenn Sie den Layer an Ihr Design anpassen, sind das die Ansatzpunkte. | Klasse | Element | | - | - | | `ac_results` | der Layer als Ganzes | | `ac_result` | eine Vorschlagszeile | | `ac_over` | die Zeile unter dem Mauszeiger | | `ac_odd` | jede zweite Zeile, für abwechselnde Hintergründe | | `ac_title_row` | eine Überschriftszeile innerhalb des Layers | | `ac_image` | das Vorschaubild eines Produktvorschlags | | `ac_name` | der Produktname oder Suchbegriff | | `ac_price` | der Preis | | `ac_baseprice` | der Grundpreis | | `ac_cat` | die Kategorie eines Vorschlags | | `ac_loading` | der Ladezustand während der Anfrage | | `autocompleteCat` | die Kategoriezeile in der Vorschlagsliste | | `autocompletecount` | die Trefferzahl | | `allResults` | die Zeile "alle Ergebnisse anzeigen" am Ende | | `headline` | eine Zwischenüberschrift | | `flHighlight` | der Teil des Vorschlags, den der Besucher bereits getippt hat | Dazu kommt die Kennung `preview` für den Vorschaubereich. > [!NOTE] > > `findologic_suggest.js` enthält eine allgemeine Grundklasse und darauf aufbauend eine Umsetzung für ein anderes Shopsystem, erkennbar an den Namen rund um `Plentymarkets`. Die Funktionen zum direkten Ablegen eines Vorschlags im Warenkorb gehören zu dieser fremden Umsetzung und stehen in WEBSALE V8s nicht zur Verfügung. > > Für WEBSALE bleibt es bei der Grundfunktion: Vorschläge anzeigen und bei Auswahl die Suche auslösen. ## Der Preis-Schieberegler Als Filter für die Suchergebnisse können Sie einen Preisbereich als Schieberegler anbieten. Er ist weder auf der Anleitungsseite noch sonst in dieser Dokumentation beschrieben. Was folgt, ist aus den beiden Dateien abgeleitet. Der Regler ist ein jQuery-UI-Slider. Die beiden Dateien bringen alles mit, was er braucht: das JavaScript den Slider samt seiner Abhängigkeiten, das Stylesheet sowohl das jQuery-UI-Thema als auch die FINDOLOGIC-eigene Gestaltung. ### Die Kennungen und Klassen | Kennung oder Klasse | Element | | - | - | | `fl-price-slider` | der Regler selbst, die Kennung des Elements, an das jQuery UI gebunden wird | | `flChosenPriceFilter` | die Anzeige des gewählten Preisbereichs | | `flpricemax` | der obere Wert | | `flSliderWrapper` | der Rahmen um den Regler | | `flSlider` | die Leiste | | `flSlideMarker` | ein Griff | | `activeMarkerLabel` | die Beschriftung eines Griffs, solange er bewegt wird | | `flSliderToolTip` | die Werteanzeige am Griff | | `flLabels` | die Beschriftungen unter der Leiste | | `flRightValue` | der rechte Endwert | | `flFilterBoxFilters` | der Kasten, in dem der Filter steht | Daneben verwendet das Stylesheet die üblichen jQuery-UI-Klassen `ui-slider`, `ui-slider-horizontal`, `ui-slider-handle`, `ui-slider-range`, `ui-widget`, `ui-widget-content`, `ui-widget-header` und die Zustände `ui-state-default`, `ui-state-hover`, `ui-state-focus` und `ui-state-active`. Wenn Sie den Regler umgestalten, ändern Sie die `fl`-Klassen und lassen Sie die `ui`-Klassen in Ruhe, sonst brechen Sie das Verhalten des Widgets. ## Umfang dieser Seite Keine Zeile der sechs Dateien stammt von WEBSALE, zwei davon sind minifiziert, und `findologic_priceslider.js` besteht ausschließlich aus einem jQuery-UI-Paket. Abgedruckter Fremdcode veraltet in der Dokumentation, ohne dass es jemandem auffällt, und er verleitet dazu, einen Stand von 2011 zu übernehmen, statt beim Hersteller nach dem aktuellen zu fragen. Diese Seite nennt deshalb die Bezugsquellen und das, was Sie für die Einbindung wissen müssen. Wegweiser: [Integration von FINDOLOGIC](https://dokumentation.websale.de/v8s/externe-dienste/integration-von-findologic.md) ## Related topics - [Integration von FINDOLOGIC](https://dokumentation.websale.de/v8s/externe-dienste/integration-von-findologic.md) - [Materialien INQUIRY](https://dokumentation.websale.de/v8s/materialien/materialien-inquiry.md) - [Materialien WEBSALE Partnerprogramm](https://dokumentation.websale.de/v8s/materialien/materialien-partnerprogramm.md) - [Materialien eKomi Produktbewertung](https://dokumentation.websale.de/v8s/materialien/materialien-ekomi-produktbewertung.md) - [Materialien Tracking-Schnittstelle](https://dokumentation.websale.de/v8s/materialien/materialien-tracking-schnittstelle.md) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.