Custom JavaScript Code im admorris Pro Template

Custom JavaScript Code im admorris Pro Template

Shop5

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

Inline Scripts

Wenn Sie ein Inline-Skript 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ührt. 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 Skript-Tag nach den im Head vom Template geladenen Libraries steht und defer verwendet, dann können diese in ihrem Skript 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 und 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>

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





    • Related Articles

    • JTL Paypal Checkout & admorris Pro Template

      Plugins des JTL-Shops sind standardmäßig für das NOVA Template vorkonfiguriert. Es kann daher sein, dass für andere Templates einige Einstellungen angepasst werden müssen – so auch der Fall bei der Nutzung des JTL PayPal Checkout-Plugins in ...

    • JTL PayPal Checkout & admorris Pro Template

      Plugins des JTL-Shops sind standardmäßig für das NOVA Template vorkonfiguriert. Es kann daher sein, dass für andere Templates einige Einstellungen angepasst werden müssen – so auch der Fall bei der Nutzung des JTL PayPal Checkout-Plugins in ...

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

    • JTL-Shop 5.2 Update mit admorris Pro

      Bevor Sie ein Update in Erwägung ziehen, beachten Sie folgende Punkte: Ist Ihr Server mit den Anforderungen des JTL-Shop 5.2 kompatibel? PHP 8.1 fähig! Sind alle Ihre notwendigen Plugins bereits kompatibel? Wenden Sie sich dazu am besten direkt an ...

    • Pro Slider

      Allgemein Verwenden Sie den Pro Slider um direkt unterhalb des Headermenüs beliebige Bilder oder Videos in einem Slider auf voller Breite anzeigen zu lassen. Es stehen verschieden Optionen zur Verfügung um die Darstellung an Ihre Wünsche anzupassen. ...