4

I am well aware of a RequireJS feature of Magento 2. I used it quite well for some JS scripts.

require(['jquery', 'ajaxform', ''], function (jQuery)
{
         // JS code
});

But now I have a template HTML for which I have custom JS files to perform actions.

Like -

<div class="font-dp">
     <div class="">
          <select class="form-control" id="font-dropdown">
          </select>
       </div>
</div>

Now here I am fetching options for above select tag dynamically using JSON from a custom JS file. I have not used any JS code on the template file. I have called events on each HTML element from custom JS files. I have nearly 15-20 JS files like this.

So I am confused about how to include these JS files in my custom module. I have rendered my template on front-end using the custom module. How should I add JS files?

7

I found a solution at last. Thanks @mike-smith for reference.

I added something like this in Namespace/Modulename/view/frontend/modulename_index_index.xml

 <head>
    <!--For CSS-->
    <css src="Namespace_Modulename/css/my_custom.css"/>

    <!--and for JS-->
    <link src="Namespace_Modulename/js/my_custom.js"/>
</head>

I added CSS file my_custom.css in Namespace/Modulename/view/frontend/web/css/ folder and JS file my_custom.js in Namespace/Modulename/view/frontend/web/js/ folder.

  • 1
    Is this the recommended way? – Stevie G Feb 2 '17 at 14:47
  • Hello @HungryDB, I have added js file but in console it is showing "jQuery not defined", how to add custom js file after jquery load? please reply. – Vinaya Maheshwari Jul 13 '17 at 12:52
1

This is how I add dotdotdot library in my magento2 custom theme.

1. Download and add Js Library in your theme following the path:

// app/design/frontend/Namespace/themename/web/js/jquery.dotdotdot.min.js

2. Create a theme's requirejs file as follow and let the requirejs know newly added library.

// app/design/frontend/Namespace/themename/requirejs-config.js
var config = {
   map: {
       '*': {
           dotdotdot: 'js/jquery.dotdotdot.min',
       }
   }
};

3. Use the added library in your theme's main js file as follow:

// app/design/frontend/Namespace/themename/web/js/main.js
require([ 'jquery' , 'dotdotdot' , 'domReady!'],function($){
    $(window).load(function() {
        //custom js code
        /* $(".product-item-name").each(function(){
            $(this).dotdotdot(); 
        }); */
    });
});

4. and include your theme's js file in your site's head as follow:

// app/design/frontend/Namespace/themename/Magento_Theme/layout/default_head_blocks.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="js/main.js"/> 
    </head>
</page>

You can add any external JS library and custom file on every page in magento2.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.