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 jsShaheer Ali– Shaheer Ali2016年01月20日 05:24:43 +00:00Commented Jan 20, 2016 at 5:24
-
@ShaheerAli: Can you share an example how to do it? Thanks.amitshree– amitshree2016年01月20日 05:26:06 +00:00Commented Jan 20, 2016 at 5:26
3 Answers 3
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
});
});
-
1Thanks. Your code is working in phtml files. but same code is not working properly in my js file
ro_allpage.js. It gives same errorUncaught ReferenceError: require is not definedthough prints outputhelloin console.amitshree– amitshree2016年01月20日 06:02:44 +00:00Commented Jan 20, 2016 at 6:02 -
can you post errors here?Shaheer Ali– Shaheer Ali2016年01月20日 06:04:27 +00:00Commented Jan 20, 2016 at 6:04
-
require(['jquery', 'mycustomjs'], function(,ドル mycustomjs){ $(function(){ console.log("hello"); }); });printshelloin console but gives errorUncaught ReferenceError: require is not definedamitshree– amitshree2016年01月20日 06:09:58 +00:00Commented Jan 20, 2016 at 6:09 -
you still including your js through head? did you flush out your magento cache?Shaheer Ali– Shaheer Ali2016年01月20日 06:12:26 +00:00Commented 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– amitshree2016年01月20日 06:18:47 +00:00Commented Jan 20, 2016 at 6:18
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>
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.