6

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?

Improve this question
4
  • 1
    Can you use app\code\Custom\Module\view\frontend\layout\XXXXXXX.xml <head></head>?
    – Jackson
    Commented Sep 6, 2016 at 9:32
  • How would it work? It is not requireJS way, is it?
    – HungryDB
    Commented Sep 6, 2016 at 9:41
  • Do you want to include your JS files in your Custom Module right? You need requireJS way ok got it
    – Jackson
    Commented Sep 6, 2016 at 9:45
  • 1
    This will help you magento.stackexchange.com/questions/85851/… & inchoo.net/magento-2/…
    – Jackson
    Commented Sep 6, 2016 at 9:47

2 Answers 2

Reset to default
8

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.

Improve this answer
3
  • 1
    Is this the recommended way?
    – tread
    Commented Feb 2, 2017 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
    Commented Jul 13, 2017 at 12:52
  • 1
    @Vinaya: try this snippet require([ 'jquery'], function($){ $(document).ready(function($) { //your code }); });
    – VishalParkash
    Commented Oct 6, 2020 at 17:15
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.

Improve this answer
3

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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