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

  • also ich habe es mit Bootstrap 3 schon erfolgreich durchgeführt

    der weg wie bei : https://github.com/deltapapa01/bagalut wird nicht Fungieren.

    da die meiden Scripte erst später durch die einzelnen Comp. , Mod. und Plugins nachgeladen werden.

    Besser ist es die gewünschte ver. von Bootstrap und jQuery über ein Overrides jomla selbst laden zu lassen.

    das ist sehr einfach möglich dazu musst du nur ein paar Ordner in dein temp. Verzeichnis anlegen.

    Code
    1. \js\jui\bootstrap.min.js
    2. \js\jui\jquery.min.js
  • wenn du deine eigene Bootstrap versonnen verwenden weilst musst du anders vorgehen.

    das Entfernen von Jomla Scripten macht an der stelle keinen Sinn und ist nicht keine gute Lösung.

    außerdem liegen an dieser stelle noch nicht alle Informationen vor um denn head zu erstellen.

    mache es so


    zuerst mal binden wir denn Namen Raum ein (ab 3.8).

    Code
    1. defined('_JEXEC') or die;
    2. use Joomla\CMS\HTML\HTMLHelper,
    3. Joomla\CMS\Uri\Uri,
    4. Joomla\CMS\Factory;

    danach binden du jQuery Bootstrap


    Code
    1. HTMLHelper::_('bootstrap.framework', false, $this->direction);
    2. HTMLHelper::_('bootstrap.tooltip');
    3. HTMLHelper::_('bootstrap.loadCss', false, $this->direction);


    danach setzen du die nötigen MetaData


    nun noch die css und js Dateien

    Code
    1. HTMLHelper::_('stylesheet', 'bootstrap.css', array(), true);
    2. HTMLHelper::_('stylesheet', 'bootstrap-theme.css', array(), true);
    3. HTMLHelper::_('stylesheet', 'template.css', array(), true);
    4. HTMLHelper::_('script', 'mein.js', false, true);
    5. $this->language = $doc->language;
    6. $this->direction = $doc->direction;
    7. ?>

    nun kannst du deine eigentliches HTML Template erstellen

    PHP
    1. <!DOCTYPE html>
    2. <html lang="<?php echo $this->language; ?>">
    3. <head>
    4. <jdoc:include type="head" />
    5. </head>
    6. <body>
    7. .......
    8. </body>

    wenn du deine jQuery Scripte mit denn


    Code
    1. jQuery()......

    prefix erstellst an stelle des Standard prefix von jQuery dann hast du auch keine jQuery Konflikte solange alle jQuery Scripte für die aktuelle jQuery Version kompatibel sind

  • 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....

  • deltapapa die Fehler aus deinem ersten Post sind keine jQuery-Fehler, sondern Fehler die ich entstehen weil jQuery eben garnicht vorhanden ist. Durch den entsprechenden unset in deinem Template unterdrückst du das Laden des Frameworks, weshalb sämtliche Codeschnipsel, die JQuery benötigen (z.B. alles rund ums Frontend-Editing, Tooltips, Modal-Dialoge etc) in einen Fehler laufen.

  • 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

  • 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.

    So, habe nochmal genauer gelesen, jetzt macht das hier auch alles sinn. Du hast ein Problem bei der Ladereihenfolge der Skripte!


    Die Website wird von oben nach unten geparst und ausgeführt, das bedeutet auch dass ein Skript im oberen Teil des Heads, das JQuery benötigt (z.B. das Caption.js von Joomla) zwingend voraussetzt dass JQuery bereits vor diesem Script geladen wurde. In deinem Template hingegen unsettest du das Core-JQuery und lädst dein JQuery in der template.js dann *nach* allen anderen Skripten, daher die Fehler.



    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.

    Auch das ergibt Sinn, du hast JQuery dann nämlich zwei mal geladen:

    1. das Core-JQuery, das mit diversen Funktionen und Plugins ergänzt wurde, die in den nachgelagerten JS Files hinzu kommen.
    2. dein eigenes JQuery in der template.js, bei dem diese Plugins fehlen und das die erste Instanz überschreibt


    Gibt es dann irgendwo in der Seite einen Inline-Codeblock, der eines dieser JQuery Plugins braucht, so greift dieser Block auf das Jquery deiner template.js zu - und dort gibt es die Plugins leider nicht. Ergebnis: Fehler.


    Lösungsansatz: Joomla so umbauen, dass für Public-User keine Skripte mehr geladen werden, die JQuery benötigen. Typische Kandidaten sind Captions, Tooltips und Modals. Joomla lädt JQuery nämlich nur dann, wenn es auch ein Skript gibt dass JQuery explizit angefragt hat. Für eingeloggte User ist der Performance-Impact dann in der Regel eher zu verschmerzen.

  • 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.


  • Joomla wird in Zukunft Beginen seinen Unterbau zu modernisieren beginnen mit ver. 4 werden die alten J Klassen nach und entfernt.

    Das du das noch nirgends im Einsatz gesehen wunder mich nicht das ist einfach noch zu neu das dauert Erfahrungsgemäße immer seine Zeit bis es die Entwickler in Ihren Anwendungen einsetzen.

    Die Dokumentation müsstet du in der Joomla api finden.

    Für mich haben die Informationen des Joomla Day 2018 ausgereicht denn Vortrag kannst du dir auf Youtube ansehen leider weiße ich jetzt nicht mehr genau in welchen Video das Thema vorgestellt wurde.

  • 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:


    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.

  • Ein modernes, aktuelles Bootstrap 4 Joomla Template zu schreiben ist schon wirklich eine Herausforderung.

    Wenn ich das richtig lese haben deine Problem nicht direkt etwas mit Boostrap 4 und Joomla zu tun, sondern eher mit den "Funktionen" des Blank Template das du verwendest.

    Vielleicht reicht dir ja auch ein Template wie zum Beispiel dieses als Grundlage aus: https://github.com/sniggle/joomla-bootstrap4-template

  • Ein eigenes Template u machen, ist immer(!) eine gewisse Herausforderung.

    Aber es hängt auch stark vom Wissensstand ab. Also ob es reicht, das Design vom Kopf auf die Website zu zaubern oder ob du noch das Wissen, wie sowas überhaupt geht, erlernen musst.

    Bootstrap selber ist meiner Meinung nach eine relativ einfache Hilfe dafür. Aber erst, wenn du dich da etwas eingearbeitet hast ;)


    Aber so ist es mit allem. Joomla ist eigentlich auch ziemlich schwer mittlerweile - es sei denn du hast dich eingearbeitet! :D



    Axel

  • 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

    Code
    1. 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?