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

Improve this question
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

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.