Adding 3rd-party JS Libraries

Make sure to add all 3rd-party libraries before the template frontend scripts as follows:

  ...
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.2.0/swiper-bundle.min.js"></script>
  <!-- TEMPLATE SCRIPTS -->
  <script src="js/vendor.js"></script>
  <script src="js/framework.js"></script>
  <script src="js/app.js"></script>
  <!-- - TEMPLATE SCRIPTS -->
  </body>
</html>

Initializing from template frontend

To avoid issues with non-working JS code during AJAX navigation, please choose a suitable wrapper function to initialize your JS libraries as mentioned here: Adding Inline JS Code.

Initializing from external JS files

If your initialization code has to be placed in an external JS file, make sure to hook the execution to DOMContentLoaded or load events.

• The DOMContentLoaded event fires when the HTML document has been completely parsed, and all deferred scripts (<script defer src="…"> and <script type="module">) have downloaded and executed. It doesn't wait for other things like images, subframes, and async scripts to finish loading.

• The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets, scripts, iframes, and images. This is in contrast to DOMContentLoaded, which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.

window.addEventListener('DOMContentLoaded', () => {
  /**
   * The code you put here will be executed
   * on page load AND on each AJAX transition.
   * 
   * This event can be used in external JS files too.
   */
});

window.addEventListener('load', () => {
  /**
   * The code you put here will be executed
   * on page load AND on each AJAX transition.
   * 
   * This event can be used in external JS files too.
   */
});