2

I want to add a custom js - pricing.js in my theme folder using require js

I call the script in defaultheadBlock.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
 <head>
 <css src="//fonts.googleapis.com/css?family=Open+Sans:400,600,300" src_type="url" />
 <css src="//fonts.googleapis.com/css?family=Rubik:300,400,500|Covered+By+Your+Grace" src_type="url" />
 <css src="bootstrap/bootstrap.min.css" />
 <css src="css/slick.min.css" />
 <css src="css/magnific-popup.css" />
 <css src="font/icont-fonts.min.css" />
 <css src="css/style.css" />
 <css src="css/animate.css" />
 <css src="css/labs.css" />
 <css src="css/masonry.css" />
 <css src="css/custom.css" />
 <script src="js/pricing.js" />
 </head>
</page>

Also added the code in require-config.js

var config = {
 paths: {
 "bootstrapminify": 'Magento_Theme/js/bootstrap.min',
 "slick": 'Magento_Theme/js/slick.min',
 "tonyMenu":'Magento_Theme/js/tonyMenu',
 "sliders": 'Magento_Theme/js/sliders',
 jquery_bridget: 'Magento_Theme/js/jquery-bridget',
 "isotope": 'Magento_Theme/js//isotope.pkgd.min',
 countdown_pl: 'Magento_Theme/js/countdown/jquery.plugin.min',
 countdown_cd: 'Magento_Theme/js/countdown/jquery.countdown.min',
 "calculator_home": 'Magento_Theme/js/pricing'
 },
 "shim": {
 "bootstrapminify": { deps :['jquery'] },
 "slick" : { deps :['jquery'] },
 "tonyMenu" : { deps :['jquery', 'slick'] },
 "sliders" : { deps :['jquery', 'slick'] },
 jquery_bridget : { deps :['jquery'] },
 isotope : { deps :['jquery', 'jquery_bridget'] },
 countdown_pl : { deps :['jquery'] },
 countdown_cd : { deps :['jquery', 'countdown_pl'] },
 "calculator_home": { deps :['jquery','bootstrapminify'] }
 },
 deps: [
 'Magento_Theme/js/theme'
 ]
};

but after chcking the code I found the script is being called but on clcking the pub/static/ url is not found error.

enter link description here

Ronak Rathod
6,58020 silver badges46 bronze badges
asked Apr 1, 2019 at 13:31
1

1 Answer 1

1

Please try below steps.

create file custom.js

require([
 'jquery',
 "jquery/ui"
], function($){
 'use strict';
 $('a').on('click', function(event) {
 console.log(1);
 });
});

Define it into your requirejs-config.js located at below location

Magento_root/app/design/frontend/Vendor/Theme/requirejs-config.js

It should contain the code as follows:

var config = {
 map: {
 '*': {
 module_js_denotation_name: 'js/file',
 }
 }
};

Now, you can call into any phtml file.

<script type="text/javascript">
 require(['jquery', 'module_js_denotation_name'], function(,ドル myscript) {
 myscript();
 });
</script>

After that run below commands and clear cache,

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f

Thanks

answered Apr 1, 2019 at 14:20

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.