Rothaus Zäpflefinder mit TYPO3 und Vue.js

Finde heraus wo es "Biergit"

Kunde

Die Badische Staatsbrauerei Rothaus AG ist auf 1.000 Metern Höhe Deutschlands höchst gelegene Brauerei. Seit 1791 wird dort oben in Rothaus die Leidenschaft fürs Bierbrauen gepflegt. Mit ihren vielen Angeboten innerhalb der Rothaus Zäpflewelt ist die Brauerei ein beliebtes Ausflugsziel für Bierliebhaber, Familien, Touristen und Vereine. 
 

Situation

Die zugrundeliegenden Technologiekomponenten des Zäpflefinders waren veraltet und bezüglich Datenpflege und Ausgabeformate gab es Optimierungschancen. Mit einem neuen technischen und grafischen Konzept ist es gelungen, den Zäpflefinder immer aktuell zu halten und vor allem auch mobil gut nutzbar zu gestalten. Im nächsten Schritt wird auch die Rothaus Website konzeptionell, grafisch und technisch neu entwickelt.

Key Facts

  • Basis TYPO3, Version 9
  • Vue.js als Frontendtechnologie 
  • Leaflet und Open Street Maps für die Kartendarstellung 
  • Schnittstelle zu Rothaus CRM zur Abfrage von Händlerdaten 
Zäpflefinder Detailseite

Wo finde ich den nächsten 6er?

Der Zäpflefinder bietet eine Händlersuche für Rothaus Biere inklusive Filtermöglichkeiten. Das Tool wurde konzeptionell, grafisch und technisch, auf Basis von TYPO3 und Vue.js, neu entwickelt. 

Der ursprüngliche Aufbau war aufgrund von verschiedenen Ausgabeformen und unterschiedlichen Datenbeständen sehr komplex und die Datenpflege sehr aufwändig. Ein neues und simples technisches Konzept wurde entwickelt und umgesetzt. 

Der Nutzer kann zwischen der Eingabe von PLZ bzw. Städtenamen oder der Suche in der Nähe seines Standortes entscheiden. Die Ergebnisse zeigen Händler im entsprechenden Umkreis auf einer Karten- und einer Listenansicht. Die Suchergebnisse können über Sorten- und darunterliegende Gebinde-Filter eingegrenzt werden. Genauso kann ein Kundentyp (Einzelhändler, Fachgroßhändler, Gastronomie) gewählt werden. So findet jeder Bierliebhaber einfach und schnell einen passenden Händler – ob zuhause oder unterwegs auf dem Smartphone: der Zäpflefinder wurde für verschiedene Viewports optimiert. 

Wie macht man das? Die Frontend Technologien.

Vue.js

Für unsere Single Page Application (SPA) haben wir Vue.js eingesetzt. 
Die 2014 veröffentlichte Open Source Bibliothek bietet einen schnellen Einstieg in die Welt der modernen, komponentenbasierten Webframeworks. Mit dem vereinfachten Templating System bietet Vue.js eine echte Alternative zu Angular und React. Speziell die flachere Lernkurve, sowie die höhere Entwicklungsgeschwindigkeit im Vergleich zu den bekannten Vertretern, war für unsere Entscheidung wichtig. Vue.js ist für uns ein robustes, leichtgewichtiges sowie flexibles Werkzeug in unserer Entwicklung und wird mittlerweile von einer breiten Community gestützt, gefördert und weiterentwickelt.

Leaflet und Plugins

Als Alternative zu Google Maps fiel die Entscheidung auf Leaflet und Open Street Maps. Letzteres ist eine weit verbreitete freie JavaScript-Bibliothek für interaktive Karten. Open Street Maps bietet sehr guten Browser-Support, ist leicht einzusetzen und pflegt keine externen Abhängigkeiten. Leaflet macht die Karte für den User interaktiv: auf der Karte rein- und rauszoomen, die Karte herumschieben, Marker darstellen und den Such-Umkreis anzeigen. Diese Funktionen macht Leaflet möglich. 

Für die Kartensuche verwenden wir das Plugin Leaflet Control Geocoder. Mit diesem Tool können wir die Suchergebnisse auf Deutschland eingrenzen, was mit anderen Tools nicht standardmäßig möglich ist. Das Vue Geolocation Plugin ermöglicht den aktuellen Standort der User abzufragen. Natürlich erst, nachdem der User zugestimmt hat. Nachdem ein Standort vom User im Suchfeld eingegeben wurde, werden die Händlerdetails via Axios geladen, das einen, auf der Promise-API basierenden HTTP-Client, bereitstellt.
 

Zäpflefinder Listenansicht

Schnittstelle zum Rothaus CRM

Um relevante Händlerdaten im Zäpflefinder aktuell halten zu können, wurde in Zusammenarbeit mit Merkarion eine Schnittstelle entwickelt: Ein regelmäßiger (Voll-) Export im JSON-Format übergibt die relevanten und aktuellsten Daten aus dem CRM. Dazu gehören z.B. Händlername, Adresse, Geo-Koordinaten, Öffnungszeiten, Website des Händlers, Sorten- und Gebinde-Zuordnung und die Einordnung des Kundentyps (Einzelhändler, Fachgroßhändler, Gastronomie). 

Ein automatisierter Cronjob prüft periodisch das Import-Verzeichnis auf dem Server und startet den Import-Prozess: Der Import-Service übernimmt die aktuellsten Daten und gleicht Gebinde und Händler ab. So ist der Zäpflefinder immer auf dem neuesten Stand und zeigt Ihnen wo es “Biergit”!

Hier geht’s zum Zäpflefinder.