Custom JavaScript Code im admorris Pro Template

Custom JavaScript Code im admorris Pro Template

Shop5

Die Funktionsweise Javascript über loadjs zu laden funktioniet immer noch, aber es gibt im Shop5 inzwischen einen einfacheren weg.

Inline Scripts

Wenn Sie ein Inline-Script einfügen wollen, das jQuery oder eine andere vom Template geladene Library verwendet, dann können Sie die vom JTL-Shop 5 zu verfügung gestellte {inline_script} Smarty-Funktion verwenden.
  1. {inline_script}
  2. <script>
  3. /* javascript code ... */
  4. </script>
  5. {/inline_script}
Wichtig zu wissen ist hier allerdings, dass das script base64 enkodiert wird und im source code nicht mehr lesbar ist. Die Developer Tools können es aber schon noch debuggen.
Chrome: Sources Tab > (no domain) in der linken Sidebar
Firefox: Debugger Tab > (no domain) in der linken Sidebar

Laden von Javascript Files

Laden sie Javascript Files am besten mit dem defer Attribut. Das File wird sofort asynchron geladen, aber erst wenn das dokument fertig geladen ist ausgefürt. Dadurch wird das parsen des HTML Dokuments nicht blockiert und die Reihenfolge der Skripte wird bei der Ausführung auch berücksichtigt. 
  1. <script src="script.js" defer></script>
Wenn Ihr script Tag nach den im head vom Template geladenen Libraries steht und defer verwendet, dann können diese in ihrem script auf jeden Fall alle verwenden.
Ohne defer kann es zum Beispiel zu Fehlern wie "jQuery is undefined" kommen.

Shop4

Ab Version 1.14 werden die mit dem admorris Pro Template mitgelieferten Skripte asynchron geladen. Es gibt auch eine neue Option, welche es ermöglicht jQuery asynchron zu laden. Wir verwenden dafür die Library LoadJS. Weiter unten folgt noch eine Anleitung, wie Sie Libraries, die Sie selbst in Ihren Shop einbauen möchten, damit laden können, um das Rendern der Webseite im Browser nicht durch das Laden und Parsen des Javascript Codes zu blockieren.

Verwenden von JS Libraries des Templates

Wenn Sie in einem eigenen Skript eine der Libraries (z.B.: Bootstrap, Slick Slider) verwenden möchten, sei es in einem Element oder im Child Template, dann müssen Sie folgendes beachten:

In Ihren Code muss in eine Callback-Funktion in loadjs.ready() eingefügt werden. Für die vom Template geladenen Skripte wurde der Name 'template-scripts' vergeben. Mit dem folgenden Code wird mit der Ausführung so lange gewartet, bis die vom Template zu Verfügung gestellten Skripte fertig geladen wurden.


  1. loadjs.ready('template-scripts', function() {
  2.   $(document).ready(function(){
  3.     /*... hier Code einfügen ...*/
  4.   });
  5. });


jQuery Code mit der jQuery asynchron laden Option

Wenn Sie in Ihrem Skript jQuery verwenden, aber keine Javascript Libraries des Templates verwenden und die Funktion “jQuery asynchron laden” verwenden möchten, beachten Sie bitte folgendes:

Mit der zu Verfügung gestellten {jqueryReady} Smarty Block-Funktion wird bei aktivierter “jQuery asynchron laden” Option automatisch die loadJS Callback-Funktion erstellt.

  1. {jqueryReady}
  2.   ... hier Code einfügen ...
  3. {/jqueryReady}
Die Smarty Block-Funktion gibt dann folgendes aus. Wenn “jQuery asynchron laden” deaktiviert ist wird nur der Inhalt zurückgegeben.
  1. loadjs.ready('jQuery', function() {{...ihr Code...}});

Javascript Libraries asynchron laden

Um eigene Javascript Libraries hinzuzufügen, empfehlen wir ein Child zu verwenden, um dort die Dateien abzulegen, damit sie bei Updates des Templates nicht wieder entfernt werden.
In diesem Beispiel wird die Library direkt in der Callback-Funktion verwendet:
  1. <script> loadjs('templates/admorris_pro_child/js/javascriptLib.js', function() { ... Code zur Verwendung der Library hier einfügen ... });
  2. </script>
Es ist auch möglich eine ID zu vergeben und an einer anderen Stelle loadjs.ready zu verwenden:
  1. <script>
  2.   loadjs('templates/admorris_pro_child/js/javascriptLib.js', 'name-der-id');
  3. </script>

  4. <script>
  5.   loadjs.ready('name-der-id', function() {
  6.     ... Code zur Verwendung der Library hier einfügen ...
  7.   });
  8. </script>
Weitere Informationen zur Verwendung von LoadJS finden sie hier:
Libraries die JQuery verwenden müssen bei aktivierter "jQuery asynchron laden" Option auch wie oben schon beschrieben innerhalb eines {jqueryReady} Blocks asynchron geladen werden.





    • Related Articles

    • Cookiehinweis Pro

      Mit dem Cookiehinweis Pro können Sie interne und externe Scripts und Cookies bis zur aktiven Zustimmung blockieren. Dabei haben wir besonders darauf geachtet, das PopUp auf Zustimmungen zu optimieren, und die Einrichtung für Sie so einfach wie ...
    • Child-Template

      Zum erstellen eines Child-Templates haben wir Ihnen schon alles vorbereitet. Sie müssen dazu nur den Ordner /templates/admorris_pro/admorris_pro_child per FTP eine Ebene höher ziehen. Das Ergebnis sollte dann so aussehen: ...
    • admorris Pro Update von Shop4 auf Shop5

      Achtung: Stellen Sie vor dem Shopupdate sicher, dass Sie die Systemvoraussetzungen für den JTL-Shop5 erfüllen. Insbesondere, dass Ihr Webserver auf 64bit basiert! Wenn Sie im Shop5 Pluginupdates auf einem 32bit System durchführen, werden wichtige SQL ...
    • Versionsübersicht, Systemvoraussetzungen & Kompatibilität

      Systemvoraussetzungen: JTL Shop 4.06 bis JTL-Shop  5.1.1 PHP 5.6 bis 8.0 Bis JTL Shop 5.0.3 ist der ionCube Loader notwendig ZipArchive  Apache Server  (für NGINX müssen Sie selber alle notwendigen .htaccess Einstellungen übernehmen) SSL Zertifikat ...
    • Zoom Funktion auf Artikeldetailseiten deaktivieren

      Ab der Version 2.3.2 finden Sie im Plugin unter dem Menüpunkt 'Produktdetailseite' die Einstellung 'EasyZoom' um die Zoom Funktion zu aktivieren/deaktivieren. Für ältere Versionen stehen Ihnen folgende Möglichkeiten zur Verfügung:  Wenn Sie ein Child ...