Custom JavaScript not working in Magento 2

Question

I'm trying to call my custom JavaScript function in addtocart.phtml file, but it's not working.

After user clicked add to cart button, I'm calling my custom JavaScript function using , but not woring. For this, I tried below code.

Added below code to addtocart.phtml file from app/design/frontend/Vendor/Theme/Magento_Catalog/templates/product/view

<?php if ($block->isRedirectToCartEnabled()) : ?>
<script type="text/x-magento-init">
    {
        "#product_addtocart_form": {
            "Magento_Catalog/product/view/validation": {
                "radioCheckboxClosest": ".nested"
            },
            "ABCSolutions_CustomModule/js/custom": {

            }
        }
    }
</script>
<?php else : ?>

And Custom Js file

define([
    "jquery",
    'Magento_Customer/js/customer-data',
    "jquery/ui"
], function($,customerData) {
    "use strict";    
    //creating jquery widget
    $.widget('mage.custom', {
        _create: function() {

            //bind click event of elem id
            this.element.on('click', function(e){
                console.log('Click ME!');
                console.log(customerData.get('customer'));
            });
        }

    });

    return $.mage.custom;
});

I tried both category and product page it's not working. Could you please suggest us to work above code for both pages after add to cart button clicked.

Answer 1

You need to create requirejs-config.js file in your view/frontend folder to set path of your custom js file and paste the below code :

var config = {
    paths: {
        'mage/custom': 'ABCSolutions_CustomModule/js/custom'
    }
};

UPDATE :

For catalog page :

app/design/frontend/Vendor/Theme/Magento_Catalog/templates/product/list.phtml

"[data-role=tocart-form], .form.map.checkout": {
    "ABCSolutions_CustomModule/js/custom": {

    }
}

And then, change code in your js based on page.

Then, upgrade and deploy your module :

php bin/magento s:up
php bin/magento s:s:d -f
php bin/magento c:c

Hope, it will helpful for you.

Answer 2

If you want to add custom js in the phtml file then you need to add like this way:

1) require-config.js

var config = {
    paths: {
        'yourCustomJs': 'ABCSolutions_CustomModule/js/custom'
    }
};

2) addtocart.phtml

<?php if ($block->isRedirectToCartEnabled()) : ?>
<script type="text/x-magento-init">
    {

        require(['jquery','yourCustomJs',],
        function($){ 
             jQuery(document).ready(function() {
                    window.obj.init();
             }
        }
    }
</script>
<?php else : ?>    

3) yourCustomJs.js

window.obj = {
     init: function() {
          // Your Custom Js code.
     });
};

Try this, it will help you. (Note: If you want to check this then just print one alert or console message then check it. So, you can make sure that this is properly working.)

Answer 3

Please try as per below code and add your code on any event.

require([
    'jquery'
], function ($) {
    $(document).ready(function() {
       $(document).on("click",".yourclass", function() {
            //put here your code
       });
    });
});

hope it helps to you!