Filter: Aktualisierungen und Seitenreload > Performance

[Brubbel]

Hallo Forum,

Ich habe auf meiner Seite 1 Filter-Modul mit 2 Auswahlfiltern im Einsatz. Direkt unterhalb des Filters habe ich das passende Listenmodul dazu. Die Filter sind auf sofortiges aktualisieren eingestellt, da ich dem Besucher eine möglichst schnelle/sofortige Ergebnisanzeige seiner Suchfilter anbieten möchte.
Die grundsätzliche Filteraufgabe funktioniert wie sie soll.

Im praktischen Alltag schält sich aber ein hässliches Problem heraus: Die Aktualisierung nach jeder einzelnen Änderung.

Es ist nicht möglich, mehr als einen Selekt-Punkt gleichzeitig auszuählen und bei dem Range Filter stört es besonders, dass man nicht "flüssig" die Änderung des Auswahl sehen kann.
Ich hatte zuerst die Filter/Liste Kombination oben auf der Seite, da ging es gerade so noch. Aber jetzt ist ein größerer Text/Grafikblock darüber und nun kommt das Problem dazu, dass nach jeder Änderung der Auswahl, die Seite komplett neu lädt und man dann auch entsprechend wieder oben auf der Seite anfängt. Ergo für die nächste Filteränderung wieder runterscrollen ...

Das macht leider für den Besucher keinen richtigen Spass.

Könnt ihr mir Hilfestellungen geben wie ich das vebessern kann? Wie macht ihr das? Kann der Reload unterdrückt werden und die Filter werden auf die bereits geladenen Inhalte angewendet? Oder?
Bin für jeden Beschleunigungstipp sehr dankbar!

[Tim]

Nimm einfach die sofortige Aktualisierung raus. Oder bau dir das komplett auf Ajax um, dann geschieht die eigentlich "Filterung" ohne reales Seitenreload. Geht alles. Das sind im Grunde einfache Formular-Aktionen.

[Brubbel]

;-) Die sofortige Aktualisierung herauszunehmen ist klar aber eigentlich keine Option.

Von Ajax habe ich leider keine Kenntnisse. Falls das schon mal jemand gemacht haben sollte, vielleicht kann sie/er vielleicht mal ein Funktionsbeispiel hier posten? Das wäre klasse.

Falls das nicht so einfach zu lösen ist, könnte ich denn dem "reload", welches der Filter auslöst, eine Ankerpostion mitgeben, so dass ich wieder unten beim Filter abgesetzt werde?

[Tim]

Ein Blick in den Quellcode verrät, das Formular selbst löst per onchange das reload aus
Kannst im Template also auch rausnehmen und dann bequem um jeden filter einzeln eine Methode setzen

[Brubbel]

Phew, bei Dir klingt das immer ganz leicht ;-). Mal schauen ob ich sowas hinbekomme. Später ... ;-)
Danke Dir!

[Siegi]

Hi,
ich habe diese Diskussion entdeckt und möchte ebenfalls die Catalog-Inhalte per Ajax einbinden.

Hier mein "Schlachtplan":

1) neue Seite, Seitenname: ajaxProdukte
- Layout zuweisen: One-Page: Blank (Lightbox-Pages)
- im Menü verstecken

Die Seite hat 1 Artikel mit 2 Contentelementen
- CustomCatalog-Filter
- CustomCatalog-Liste

Diese Seite soll per Ajax aufgerufen werden.


2) neue Seite, Seitenname: Produkte
- Layout zuweisen: Content-Page - Full Width
- die Seite ist im Menü sichtbar

Die Seite bindet ebenfalls die beiden Catalog-Elemente ein:
- CustomCatalog-Filter
- CustomCatalog-Liste

Die 2 Catalog-Elemente werden für den Erstaufruf benötigt.
Diese Seite ist im Frontend für Besucher sichtbar.


3) Javascript
Checkt, ob auf der Produkte-Seite eine der Select-Boxen verändert wurde
oder ob ein Button (Filter zurücksetzen) angeklickt worden ist.
Falls ja, wird per Ajax die Seite ajaxProdukte.html aufgerufen
und die ausgewählten Selectfelder werden als Get-Parameter angehängt, z.B. so:
produkt-liste.html?serie=model1&bereich=cat1
Der Rückgabewert (HTML) wird dann auf der Produkte-Seite eingebunden.

Könnte das so funktionieren oder habe ich etwas Grundsätzliches nicht bedacht?
Viele Grüße
Siegi

[Tim]

Funktionieren kann das.

Ein paar Hinweise:
Was man im Hinterkopf haben sollte, nur weil plötzlich die Abfrage via Javascript läuft, wird kein Server schneller oder ähnliches. Ich persönlich würde nie Ajax einsetzen, wenn nicht anders möglich ist. Ajax ist Javascript, beides sind allgemein erstmal nur Hilfsmittel.

Die Ajax-Seite im Request sollte so mager wie möglich sein. Auch im Ajax MUSS php die gesamte Seite verarbeiten, sonst kommt nichts an. Kurz gesagt, die Hauptseite muss generiert werden und zusätzlich bei jedem Request oben drauf der Ajax content. Ajax hat nur den Charme einen "loader" anzuzeigen.

Beispiel:
Schaut Euch mal im Textfilter das autocomplete Template an, was in jedem CC dabei ist. Hier lade ich per Ajax eine Catalogliste, die per GET gefiltert wird anhand der Text-Eingabe.
Das ist quasi genau das, was du machen willst.

[Siegi]

Danke für die Tipps!
Siegi

[janineiten]

Gibt es irgendwo eine Anleitung, wie man eine Katalog-Liste unterhalb eines Checkbox-Filters ohne Seitenreload lädt? Mit dem Template autocomplete kann ich leider nicht viel anfangen.

[Tim]

Das hat mit dem autocomplete nichts zu tun. Das kann nur mit einem Ajax Script gemacht werden.

[janineiten]

Gibt es irgendwo eine Vorlage für ein solches Ajax Script? Hat das schon jemand gemacht?

[Tim]

Zum Theme Ajax gibt es bei google unzählige Vorlagen. Ich selbst nutze meistens immer direkt die jquery Seiten. Ich gebe zu, ich muss auch immer wieder nachschlagen
Eine exakte CC Vorlage kann man hier kaum erstellen, da jeder CC irgendwie anders ist und nur du weisst worauf du reagieren willst.
Generell ist der Ablauf aber immer gleich:

Aktion, z.B. Klick auf xyz, feuert ein Ajax Request auf eine beliebige Seite oder gleiche Seite (dies wäre kein Performance-Gewinn) mit den gewünschten Parametern. Im Ajax Objekt gibt es Events wie "start" "complete" usw. damit können dann wiederum Aktionen getriggert werden.