How to include custom js file in my custom theme?

user_3130687 0
Viewed 206

Using OroCommerce v4.1.8 (latest stable version).

I have created my custom theme (extended from "default" theme) which renders correctly (all css is loaded and applied as defined), but for my custom JS file that does not appear to be included in the page. Below is my \Resources\views\layouts\mytheme\config\jsmodules.yml file:

    shim:
        jquery:
            expose:
                - $
                - jQuery
        magnificPopup:
            imports:
                - jQuery=jquery
        owlCarousel:
            imports:
                - jQuery=jquery
            exports: owlCarousel
    aliases:
        magnificPopup$: mytheme/js/magnific-popup.min
        owlCarousel$: mytheme/js/owl.carousel.min
        my-main$: mytheme/js/main
    dynamic-imports:
        mytheme:
            - magnificPopup
            - owlCarousel
            - my-main

On the webserver, I can see a compiled mytheme.js file getting created under /var/www/oroapp/public/layout-build/mytheme/chunk folder, but looking into the HTML for the home page, there is no line/reference to load this file.

Please advise what am I missing or how to troubleshoot this?

orocommerce
1 Answers

OroCommerce uses Webpack to build JS dependencies. By default, all the configured JavaScript dependencies files are combined to the single file, e.g.:

<script src="/layout-build/mytheme/app.js"></script>

Where mytheme is your theme name. To use one of the above dependencies in your ES6 module, you have to require it manually with the import statement or using the require function.

For more details, see the official documentation about JavaScript Modularity in the OroCommerce Application.

user_17357240
Related