Bootstrap in Zikula 1.3.x - Zusammenspiel mit Prototype

in  Zikula Apps , , ,

Bootstrap in Zikula 1.3.x - Zusammenspiel mit Prototype

Zikula verwendet ab Version 1.4.0 Bootstrap zur Ausgestaltung der Oberfläche. Natürlich kann man Bootstrap aber auch bereits für 1.3.x einsetzen. Wir haben mittlerweile eine gute Hand voll Themes mit Bootstrap unter 1.3.x erstellt oder umgebaut. Problematisch kann es werden, wenn man JavaScript-Komponenten von Bootstrap einsetzen möchte, gleichzeitig aber noch Prototype von irgendeinem Modul geladen wird.

Die JavaScript-Bestandteile von Bootstrap verwenden als Basis jQuery. Dies ist bereits in Zikula 1.3.x enthalten und kann einfach - auch zusammen mit Prototype - geladen und verwendet werden.

Während die Arbeit mit den CSS-Klassen von Bootstrap direkt und problemlos möglich ist, kann es beim Einsatz einiger JavaScript-Komponenten zu unerwartetem Verhalten kommen: so kann es beispielsweise passieren, dass Tooltips, Dropdowns und Popovers flackern oder sich zu schnell schließen. Dies hängt mit einer Inkompatibilität mit Prototype zusammen. Eine Lösung dazu fand ich glücklicherweise bei Stack Overflow. Einfach das in der ersten Antwort gezeigte Code-Snippet in eine JS-Datei im Theme einbinden und schon funktionieren die Bootstrap UI-Komponenten wie gewünscht.

In einem späteren Umbauschritt einer Seite gelangt man an den Punkt, an dem kein Prototype mehr geladen wird, da alle involvierten Templates und Skripte auf jQuery portiert wurden. Sobald Prototype nicht mehr im Markup referenziert wird, muss das Code-Snippet wieder entfernt werden, da sonst ein JavaScript-Fehler auftritt, weil die Funktion Element.addMethods nicht mehr verfügbar ist.

In Zikula 1.3.8 und 1.4.0 ist dieser Patch übrigens nicht mehr nötig, da hier Prototype direkt im Core angepasst wurde, um die Probleme zu minimieren. Für alle, die Bootstrap jedoch jetzt schon mit 1.3.x einsetzen möchten, spart der Patch jedoch Zeit und Nerven.

Sofern Interesse besteht, werde ich zukünftig weitere Artikel zur Arbeit mit Bootstrap einstellen. Da die offizielle Dokumentation bereits sehr umfangreich ist, können wir uns auf Zikula-spezifische Aspekte beschränken, wie zum Beispiel den Aufbau von Themes sowie einen Überblick über die Migration für Modulentwickler.

Weitere Beiträge in Kategorie Zikula Apps

Zikula Core 3.0.3 mit Sicherheits-Update von Symfony 5
- Vor kurzem hatten wir über das Release von Zikula 3.0.1 berichtet, welches wichtige Korrekturen für Zikula 3 bereitgestellt hat. Vor einer Woche wurde die nächste Version 3.0.2 veröffentlicht. …
Symfony Services asynchron im Hintergrund aufrufen
- Oftmals greift man in Symfony-Projekten auf CLI-Kommandos mit Hilfe der Symfony Console-Komponente zurück, um länger laufende Prozesse außerhalb des Webservers durchzuführen. In komplexeren Vorhaben …
Zikula 3.0.1 veröffentlicht - erstes Bugfix Release für Zikula Core 3
- Genau einen Monat nach der Veröffentlichung von Zikula 3.0.0 ist nun das erste Update erschienen. Zikula 3.0.1 bringt wichtige Korrekturen und sorgt somit für ein Stück mehr Stabilität in der neuen …
Zikula Framework in Version 3 veröffentlicht
- Heute haben wir das finale Release von Zikula Core 3.0.0 veröffentlicht. Es basiert auf Symfony 5.1 sowie Twig 3 und verwendet unter anderem Bootstrap 4 und Font Awesome 5. Einen grundlegenden …
Zikula 3 erscheint als Release Candidate
- Heute wurde der erste Release Candidate für Zikula Core 3.0.0 veröffentlicht. Einen grundlegenden Überblick über die wichtigsten Änderungen sowie die weiterführenden Links zur Dokumentation und zu den …