4

I'm trying to add external js in my module which will be applicable on all pages on frontend. This is the process I've followed: 1. Code in my layout file app/code/Lapisbard/General/view/frontend/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="frontend-1column" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="Lapisbard_General::js/ro_allpage.js"/>
    </head>
    <body/>
</page>

2. Added js file at app/code/Lapisbard/General/view/frontend/web/js/ro_allpage.js with following code

define('js/theme', [
    'jquery',
    'domReady!'
], function ($) {
    'use strict';
    console.log('Hello');
});

I see my file is being added on the page but it throws console error Uncaught ReferenceError: define is not defined. What I'm doing wrong?
Also I tried code below which throws Uncaught ReferenceError: require is not defined

require(["jquery"], function($){
    console.log("hello");
});
Improve this question
2
  • why not you use requirejs-config.js to add custom js
    – Shaheer Ali
    Commented Jan 20, 2016 at 5:24
  • @ShaheerAli: Can you share an example how to do it? Thanks.
    – amitshree
    Commented Jan 20, 2016 at 5:26

3 Answers 3

Reset to default
7

Place requirejs-config.js in the view/frontend folder of your module. Requirejs-config.js looks like:

 var config = {
map: {
    '*': {
        mycustomjs:           'Vendor_Module/js/mycustomjs',

    }
}};

and now Then in your phtml file 

  require(['jquery', 'mycustomjs'], function($,mycustomjs){
      $(function(){
         // Custom code here
    });
 });
Improve this answer
10
  • 1
    Thanks. Your code is working in phtml files. but same code is not working properly in my js file ro_allpage.js . It gives same error Uncaught ReferenceError: require is not defined though prints output hello in console.
    – amitshree
    Commented Jan 20, 2016 at 6:02
  • can you post errors here?
    – Shaheer Ali
    Commented Jan 20, 2016 at 6:04
  • require(['jquery', 'mycustomjs'], function($, mycustomjs){ $(function(){ console.log("hello"); }); }); prints hello in console but gives error Uncaught ReferenceError: require is not defined
    – amitshree
    Commented Jan 20, 2016 at 6:09
  • you still including your js through head? did you flush out your magento cache?
    – Shaheer Ali
    Commented Jan 20, 2016 at 6:12
  • require-config.js code is var config = { map: { '*': { mycustomjs: 'Lapisbard_General/js/ro_allpage', } }}; .Yes I've includedjs through head in layout's default.xml <head> <link src="Lapisbard_General::js/ro_allpage.js"/> </head>
    – amitshree
    Commented Jan 20, 2016 at 6:18
3

I'd recommend using the script method rather than the text method, it's easier for other developers to understand, it's less code, and meets Magento's official instructions.

To do this use the same script or link XML as normal but include src_type="url". Check this out official Doc URL.

<?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>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" />
  <link rel="stylesheet" type="text/css" src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" />

</head></page>
Improve this answer
2

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

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.