Contao 3.1 mit FlexSlider, jQuery und Mootools

Da baue ich gerade eine neue kleine Website mit Contao 3.1.1 und aktiviere jQuery, da ich das lieber mag als die Mootools.

Auf der Seite habe ich den FlexSlider 1.2.2 stable als Erweiterung installiert, der auch wunderbar funktioniert, solange die Mootools nicht aktiviert sind.

Da ich aber die Erweiterung calendarfield nutzen möchte, um im FE auch einen datepicker einzusetzen, muß Mootools aktiviert sein.

Der datepicker funktioniert dann auch prächtig, aber dummerweise funktioniert der FlexSlider jetzt nicht mehr.

Also Google angeworfen, aha, das Problem ist nicht neu.
Anscheinend sollte bei gleichzeitiger Verwendung von jQuery und Mootools  jede JavaScript-Routine wie folgt gekapselt werden:

Bei jQuery das hier:

// jQuery
(function($) {
    // Your code goes here
})(jQuery);

Bei Mootools folgendes:

// MooTools
(function($) {
    // Your code goes here
})(document.id);

Quelle: mootools und jquery mit contao 3

Also mal in den diversen Sourcecodes rumgestöbert, aber beide Erweiterungen benutzen das schon.

Auf der Website bekomme ich aber den Fehler

TypeError: $(...).load is not a function
    $(window).load(function() {

Also wird anscheinend zwar das FlexSlider-Modul richtig abgesichert, aber nicht der vom FlexSlider erzeugte jQuery-Code für die Seite.

Das kann man aber in den template-Dateien des FlexSliders leicht selber korrigieren:

In der unteren Hälfte der template-Datei flexSlider_default.html5 bzw. flexSlider_default.xhtml die beiden Stellen suchen, an denen

$(window).load(function() {

steht. Davor jetzt den nötigen jQuery-Code einfügen:

// jQuery
(function($) {
    $(window).load(function() {

Wichtig: Auf keinen Fall vergessen, die beiden Blöcke auch wieder mit dem Code

})(jQuery);

zu schließen. Das passiert direkt vor dem schließenden </script>-Befehl.

Komplett sieht das also jetzt so aus (passend gekürzt):

<?php if ($configuration['carousel'] == false): ?>
    <script>
    // jQuery
 (function($) {
        $(window).load(function() {
            $('#<?php echo $configuration['alias']; ?>').flexslider({
            ...
            pauseOnAction: true,
            useCSS: false,
            touch: true
            });
        });
    })(jQuery);
    </script>
<?php else: ?>
    <script>
    // jQuery
 (function($) {
        $(window).load(function() {
            $('#<?php echo $configuration['alias']; ?> #carousel').flexslider({
            ...
            pauseOnAction: true,
            controlNav: false,
            animationLoop: true,
            slideshow: true,
            sync: "#<?php echo $configuration['alias']; ?> #carousel"
            });
        });
    })(jQuery);
    </script>
<?php endif; ?>

Ich hoffe sehr, daß ich euch damit weiterhelfen konnte, mich hat dieses Problem doch einige Recherchezeit gekostet.

Dieser Beitrag wurde unter IT-Technik abgelegt und mit , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.