Eine interaktive Suche für lernen & helfen Sprachreisen
24. August 2024

Wie man mit den Symfony UX Live Components auch ohne JavaScript-Kenntnisse eine interaktive Webseite umsetzen kann.

Seit 2021 unterstützen wir lernen & helfen Sprachreisen (www.lernenundhelfen.de) bei der Weiterentwicklung der Webseite und dem Kundenportal. Über die Webseite von lernen & helfen vermittelt die Inhaberin Silvia Schröder Sprachreisen für Privatpersonen im Ausland. Zunächst halfen wir ihr dabei, den Buchungsprozess der Sprachkurse zu digitalisieren und zu automatisieren. Was zuvor hauptsächlich über Telefon oder E-Mail-Austausch mit den Reisenden individuell abgestimmt werden musste, klappt nun größtenteils auch ohne manuelles Eingreifen des relativ kleinen Teams von lernen & helfen. Dies ermöglicht es dem Team nun, das große Interesse an Sprachreisen nach Ende der Corona-Pandemie zu bewältigen und zugleich ihr Kursangebot weiter auszubauen.

Mit einem stetig wachsenden Kursangebot kommen aber auch neue Herausforderungen auf. Als wichtigstes UX-Problem konnten wir schnell identifizieren, dass das Finden des richtigen Kursangebots die Besucher der Webseite vor die größten Herausforderungen stellte. So waren ihnen viele Angebote von lernen & helfen gar nicht bewusst oder sie mussten sich erst durch viele Seiten klicken, bis sie den passenden Kurs finden konnten.

Wenn eine Webseite viele Inhalte und Angebote hat, dann ist es sinnvoll eine Suchfunktion für die Nutzer*innen bereitzustellen. Dies ist vor allem im e-Commerce Bereich üblich, um z.B. den Nutzer*innen eines Online-Shops, möglichst effizient, das gesamte Produktsortiment vorzustellen und über Filterfunktionen die Suche nach dem besten und richtigen Produkt möglichst einfach zu gestalten.

In den letzten Jahren ist das Portfolio von lernen & helfen stetig gewachsen. Es wurden neue Arten von Sprachreisen ergänzt sowie neue Sprachen, Länder und Städte ins Angebot aufgenommen. Was früher noch über einfache Übersichtsseiten und Listen dargestellt werden konnte, erreichte nun ein Ausmaß, was die Nutzer*innen leicht überfordern konnte. Das neue Herzstück der Webseite sollte deswegen ähnlich wie in einem Online-Shop eine Suche werden, über die eine Nutzer*in geeignete Sprachreisen für sich über diverse Filterkriterien und eine Freitextsuche schnell finden kann. Zudem sollte die Suche interaktiv gestaltet werden, d.h. Änderungen an den Filtereinstellungen sollten direkt dazu führen, dass die passenden Sprachreisen im Frontend geladen und ausgegeben werden, ohne dass die Nutzer*in auf einen Button klicken oder die ganze Seite neu geladen werden muss.

Klassischerweise werden derartige Funktionen, bei denen die Nutzer*in über den Browser mit der Webseite interagieren kann, über JavaScript umgesetzt. JavaScript ist eine Programmiersprache, die clientseitig im Browser der jeweiligen Nutzer*in der Webseite ausgeführt wird. Die Umsetzung mit JavaScript erfordert, neben den notwendigen Kenntnissen in dieser Programmiersprache, die Bereitstellung einer serverseitigen Schnittstelle , die z.B. die richtigen Daten ermittelt. Im Falle unserer interaktiven Suche müsste über JavaScript ermittelt werden, welche Filtereinstellungen die Nutzer*in im Browser macht. Serverseitig wird dann mit diesen Filtereinstellungen die Suche ausgeführt und die passenden Ergebnisse zurück an den Client übertragen.

Da wir eine doppelte Implementierung mit doppelter Fehleranfälligkeit möglichst vermeiden wollten und einen Faible für Symfony Komponenten haben, haben wir uns entschlossen, diesmal einen anderen Weg zu gehen und die Umsetzung mit den Symfony UX Live Components zu machen. Über diese Symfony Komponente ist es möglich, die komplette Logik serverseitig via PHP und Twig zu programmieren, ohne dass man eine Zeile JavaScript-Code schreiben muss. Die Komponente selbst nutzt als Basis trotzdem JavaScript, aber, abgesehen von der Installation, müssen keine weiteren Code-Anpassungen gemacht werden.

Grob zusammengefasst muss man für eine solche Live Component  nur eine PHP-Klasse programmieren, die die Business-Logik enthält, und ein Twig-Template erstellen, über das die Ausgabe- und Interaktionsbereiche im Browser bestimmt werden. Die Live Component schickt nach einer Nutzerinteraktion dann eine HTTP-Anfrage im Hintergrund an den Server, dieser führt die PHP-Klasse aus und schickt das fertige HTML-Schnipsel zurück, was dann dynamisch im Browser das alte HTML ersetzt. Clientseitig wird im Browser kein kompletter Page-Reload gemacht, sondern nur ein Teil des HTMLs mit dem neuen Teil ersetzt.

Für mich haben Symfony UX Live Components den besonderen Charme, dass ich als Backend-Entwicklerin mehr oder weniger nur PHP-Code schreiben muss und damit benutzerfreundliche, interaktive Webseiten bauen kann. Da zudem nur Teile einer Webseite neu geladen werden müssen, die sich geändert haben, ist dies besonders nachhaltig und datensparsam. Insgesamt ist das eine tolle Komponente, die ich jedem Symfony-Entwickler herzlichst empfehlen kann.

Klick hier, wenn du das Fallbeispiel von lernen & helfen selbst im Browser testen möchtest.