Blank - Bootstrap 4.3.1 jQuery Konfikte in Joomla!

Hi,

ich habe endlich mal wieder Zeit gefunden, an meinem eigenen Template nach der Blank Bootstrap Vorlage zu arbeiten.

Leider habe ich immer noch jQuery Fehlermeldungen, an denen ich verzweifel.

Um andere Fehlerquellen auszuschließen, habe ich ein neues J3.9.3 aufgesetzt, bis auf Akeeba Backup Pro völlig unberührt gelassen, um dort mein Template zu testen:

test.petersen-webdesign.de. Das ganze Projekt liegt auf Github: https://github.com/deltapapa01/bagalut

Soweit klappt das ganz gut (naja, Inhalt fehlt noch, und natürlich sind noch einige Baustellen offen, aber erst einmal gehts so einigermaßen)

Wenn ich die Seite so aufrufe, bekomme ich keine Fehlermeldungen.

Sobald ich mich mit Schreibrechten einlogge, meldet die Konsole das:

Je nachdem, was man für Rechte hat, sind da sehr unterschiedlich jQuery Konflikte.

Richtig übel wird das, wenn ich mit Dropdown Menüs arbeite, dann habe ich auch im Template Darstellungsfehler, vermutlich auch von den Tooltip Problemen.

Im Template selber entlade ich eine ganze Reihe von JS Dateien:

Aber egal wie ich vorgehe, selbst wenn ich alle Joomla eigenen Dateien mit zulade, erhalte ich immer Fehler.

Hat jemand eine Idee, wie ich diese jQuery Konflikte lösen kann? Wie kann ich am besten vorgehen, um den Fehler zu lokalisieren.

Und gibt es irgendwo noch eine gute Möglichkeit, mit Boostrap 4 Dropdown Menüs zu erstellen? In dem Buch von David und Elisa wird leider kein Dropdown beschrieben, und die Möglichkeit wie im Blank Template beschrieben mit dem eigenen JS Code könnte ja eine Fehlerquelle sein.

Vielen Dank für mögliche Antworten,

deltapapa

Hi,

vielen Dank für deine Antworten.

Deinen ersten Post habe ich verstanden, einfach die jQuery (und BS) Dateien als Override einbinden. Davor habe ich mich bis jetzt ein bisschen gesträubt, weil ich dann meinen NPM / Gulp Workflow etwas ändern muss, ich ich wollte bis jetzt so dicht wie möglich am Blank Bootstrap Template bleiben.

Deinen zweiten Post habe ich nicht ganz verstanden. Hast du da irgendwo ein Vorlage auf GitHub, das man sich das im Zusammenhang einmal angucken kann?

Ich habe jetzt erst einmal zum Testen die jQuery von Joomla eingebunden, und via unset die Joomla eigene Bootstrap Dateien entladen. Das scheint auch ganz gut zu klappen.

Was ich jetzt noch habe: Wenn ich mich als Super - User einlogge, dann kann ich ja das Menü im Frontend bearbeiten (bzw das Modul) Dort bekomme ich jetzt immer Darstellungsfehler, aber keine jQuery Fehlermeldungen in der Konsole. Und wenn ich irgendwo in die Seite klicke, jede Menge jQuery Fehler.

Ich werde da wohl weiter testen müssen. Naja, BS 5 hat ja keinen jQuery mehr an Board, vllt wird das dann einfacher....

Hi David,

Danke für die Antwort. Laut dem Blank Bootstrap Template von Alex hole ich via NPM die aktuelle BS / jQuery Version (+popper.js und custom.js) und packe die mit Gulp in 1 File(vendor/template.js).

Dann lade ich das ganze am Ende meiner index.php. Mit dem unset wollte ich das Laden der J! eigenen Files unterbinden, um es nicht doppelt zu laden. Aber wie gesagt, das klappt alles nicht so ganz.

Selbst wenn ich jetzt die Joomla eigene jQuery lade, sieht alles prima aus. Wenn ich mich als SU einlogge auch noch. Aber sobald ich irgendwo in der Seite irgendwo hinklicke, kommt sofort ein Fehler.

Ich glaube, ich werde doch nochmal versuchen, die JS Dateien als Override zu laden, so wie in eurem Buch vorgeschlagen...

Viele Grüße,

deltapapa

Hi David,

vielen Dank für deine Bemühungen

Das wäre ja vllt auch ein Hinweis für Alex, weil das betrifft dann ja alle Blank Bootstrap Templates.

Was ich noch nicht ganz verstehe:

Ich lade in der aktuellen Version des Templates folgende Scripte:

Gulb stream die Stylesheets zusammen, und dann habe ich es so angepasst, dass das Joomla eigene jQuery geladen wird und danach die gulp gestreamten anderen js Dateien (popper, bootstrap und custom)

Jetzt habe ich keine Fehler mehr, nur wenn ich mich einlogge, und dann irgendwo hinklicke oder den Mauszeiger bewege bekomme ich solche Fehler:

Von der Reihenfolge her müsste es jetzt ja passen. Im Moment setze ich auch keine Scripte auf unset, und die template.js am Ende der index.php habe ich rausgenommen und am Anfang mit eingebunden.

Von der Sache her ist das auch nicht schlimm, weil ich das Template ja eh nur auf meiner Seite verwenden will, und meine Änderungen meist eh im BE mache.

Aber ich bin natürlich an einer guten, Fehlerfreien Lösung interessiert und möchte natürlich so viel wie möglich lernen.

Robox:

Die Verweise:

use

Joomla\CMS\HTML\HTMLHelper,

Joomla\CMS\Uri\Uri,

Joomla\CMS\Factory;

sind ja relative neu (ab 3.8)

Gibts dazu irgendwo eine Dokumentation? Habe das noch nirgends im Einsatz gesehen, außer hier:

https://www.wicked-software.de…r-einem-beitrag-in-joomla

Vielen Dank für mögliche Ideen oder Hinweise.

okay, vielen Dank.

Ich hatte extra nochmal hier (https://github.com/twbs/bootstrap/blob/v4.1.3/package.json) nachgeschaut, bei BS 4.1 ging es noch mit der jQuery 1.9.1.

Aber ab 4.3.1 scheint es nur noch mit 3.3.1 zu gehen...schade, also BS 4.3.x nur noch mit eigener jQuery. Ich will mir aber auf jeden Fall nochmal die Override Funktion anschauen.

Moin Moin,

also ich habe fleißig weiter getestet, ausprobiert und alle verschieden Variationen ausprobiert.

Ich komme immer wieder zu dem Schluss, das diese Fehler von dem Menü ausgelöst werden, egal ob normal oder Dropdown.

Je nachdem, wie ich die jQuery lade, erscheinen andere Fehler.

Zwei Dinge habe ich beobachtet: Die Dropdown Lösung erreiche ich ja mit etwas JS Code, wie im Blank Bootstrap empfohlen:

jQuery(function($) {

  // dropdown menu
  $('ul.dropdown-menu').each(function(){
    $(this).prev().attr({
      id: $(this).attr('aria-labelledby'),
      role: 'button',
      'data-toggle': 'dropdown',
      'aria-haspopup': 'true',
      'aria-expanded': 'false'
    });
  });

});

Dort werden ja aber nur on the fly ein paar Attribute hinzugefügt, oder?

Was ich auch beobachtet habe, das es Probleme gibt beim laden der Popups / Tooltips:

Als jQuery lade ich jetzt die aktuelle Version, nur leider erscheinen gebau die gleichen Fehler wie in der Joomla eigenen:

Es ist ja im Prinzip nicht weiter schlimm, das im eingeloggten Zustand diese Fehler kommen, aber es wurm mich ja doch

Vielen Dank und schönes WE,

deltapapa

Hi, danke für die Antwort. Ich habe die Fehler jedoch auch, wenn ich die Joomla eigenen jQuery und die bootstrap Dateien via unset auslade.

Ich komme da irgendwie überhaupt nicht weiter, wenn ich z.B. Anfange, weitere Komponenten zu installieren (z.B. JSN Uniform), dann kommen gleich die nächsten Fehler.

Ein modernes, aktuelles Bootstrap 4 Joomla Template zu schreiben ist schon wirklich eine Herausforderung. Es gibt ja im Netz einige, deren Overrides noch auf dem Protostar aufbauen, und das ist ja nun auch schon ein paar Jahre alt. Und wenn man es einigermaßen zurecht hat, funktioniert das Dropdown Menü nicht.

Naja, ich werde weiter suchen und testen, mal schauen ob ich vllt noch einige Ideen bei den EN - sprechenden Kollegen bekommen kann.

Hi ihr beide,

Bootstrap 4 finde ich persönlich sehr schön und jetzt nicht so schrecklich schwer, gerade um zu Anfang und schnell doch etwas sehenswertere Ergebnisse zu zaubern. Klar, wenn ich mir das Netz so angucke (und gerade viele WP Seiten), dann sieht man die Herkunft und das verwendet Framework ziemlich vielen Seiten, was ja aber nicht unbedingt schlecht sein muss.

Was für mich ebenfalls sehr wichtig war, ist die ganze Zusammenarbeit von node.js, npm und gulp als Beispiel. Wenn man da erst einmal durch ist (unter Windows), ist die Template Erstellung wirklich ein Spaß und sehr cool.

Das von Astrid verlinkte Template habe mir tatsächlich schon ziemlich genau angeguckt. Aber da geht's dann wieder los: Die Menu Oberrides sind alle schon ziemlich alt, wenn du da in die default.php reinschaust, siehst du auf den ersten Blick 2011 bis 2015. Ich würde jetzt ungern auf so alte Overrides aufbauen, was hieße, die aktuellen nehmen und alles wieder neu einbauen. (Davon ab hat das Template leider auch in der Konsole einige JS Fehler...)

Dann habe ich das Buch von David und Elisa komplett durchgearbeitet. Das behandelt BS 3, und das Menü ist leider nicht dropdown fähig. Da gabs also wieder jede Menge Umbauarbeiten, bei dennen ich dann wieder an meine Grenze stieß.

Und da kam das Blank genau richtig, weil komplett von Anfang an, mit einer unheimlich ausführlichen Dokumentation. (Kann ich jedem nur Empfehlen.)

Das Problem was ich jetzt habe, ist ja ehr ein generelles: Joomla läd seine eigene jQuery und bs.js. Wenn ich dann meine eigenen einbauen will, gibts Versions Konflikte. Wenn ich die Joomla eigenen js Dateien außer Kraft setze, laufen bestimmte Erweiterungen nicht mehr (Klar, die entwickler gehen ja nicht davon aus, das man die unset setzt) . Wenn ich dann irgendwie doch alles zu laufen habe, ist in der Console kein Fehler, und du loggst dich im FE ein, wirst du mit Fehler nur so überhäuft.

Mein nächster Plan ist, mir die J4 Templates mit den neuen Namenspaces wie Robox oben schon mal geschrieben hat, anzuschauen, z.B. use joomla\cms\html\htmlhelper etc.

Mal schauen, was da so bei rauskommt....

Moin Moin,

ich bin schon einmal ein ganzes Stück weiter, die jQuery Probleme werden weniger

Dank an dieser Stelle ein Dank an Robox und diese Anleitung hier, die mir sehr weitergeholfen hat: https://www.ghsvs.de/programmi…stehen-bootstrap-override

Aber, es gibt immer noch Probleme:

Meine popper.js wird nicht geladen, und ich weiß leider nicht warum. Ich kompiliere die popper.min.js und meine custom.js via gulp zu einer einzigen template.js Datei.

Die Einbindung ist auch korrekt, der Browser sieht meine template.js

Der custom.js Code (der ohne die Verarbeitung durch Gulp leider nicht im Browser läuft, andere Baustelle) funzt ohne Problem.

Hier kommt meine jetzige Einbindung:

Die entsprechenden Dateien liegen im Ordner /js/jui.

Ich hätte jetzt gedacht, das er sich die popper.js von alleine zieht, durch die letzte Zeile, macht er aber leider nicht. (also die bootstrap.tooltip)

Ich kann auch überhaupt keine Anleitung zu bootstrap.tooltip finden, und glaube auch nicht das es auch ein Override ist.

Meine zusätzlichen js und css Dateien muss ich so laden:

Die Fehlermeldung wegen der popper.js:

Noch ein kleiner Hinweis: Leider funktioniert es nicht, wenn ich bootstrap.css (oder bootstrap.min.css) via

HTMLHelper::_('bootstrap.loadCss',false, $this->direction);

Er will die Datei aus dem Ordner css/jui einfach nicht laden. Daher habe ich sie erst einmal so eingebunden, vllt bekomme ich das auch noch hin.

Meine dringendste Frage ist jetzt, wie bekomme ich popper.js eingebunden.

Vielen Dank,

Dirk

Edit: Habe gerade gelesen, das in der bootstrap.bundle.js popper mit drinnen ist, vllt ist das eine Lösung?