3

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");
});
  • why not you use requirejs-config.js to add custom js – Shaheer Ali Jan 20 '16 at 5:24
  • @ShaheerAli: Can you share an example how to do it? Thanks. – amitshree Jan 20 '16 at 5:26
5

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|||||
  • 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 Jan 20 '16 at 6:02
  • can you post errors here? – Shaheer Ali Jan 20 '16 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 Jan 20 '16 at 6:09
  • you still including your js through head? did you flush out your magento cache? – Shaheer Ali Jan 20 '16 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 Jan 20 '16 at 6:18
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|||||
1

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|||||

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.