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.

@RohanHapani, No. In My Custom module having custom.js file. — Bojjaiah
– Bojjaiah, Commented Jan 2, 2020 at 5:40

Rohan Hapani · Accepted Answer · 2020-01-02 06:50:23Z

2

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.

edited Jan 2, 2020 at 6:50

answered Jan 2, 2020 at 5:47

Rohan Hapani

17.6k9 gold badges57 silver badges99 bronze badges

Here what is mage/custom?

Bojjaiah
– Bojjaiah

2020-01-02 05:50:30 +00:00
Commented Jan 2, 2020 at 5:50
You added mage.custom in your js file. So, you need to write mage/custom in your requirejs-config file to set alias of ABCSolutions_CustomModule/js/custom js file.

Rohan Hapani
– Rohan Hapani

2020-01-02 05:52:04 +00:00
Commented Jan 2, 2020 at 5:52
Okay, let's try.

Bojjaiah
– Bojjaiah

2020-01-02 05:52:42 +00:00
Commented Jan 2, 2020 at 5:52
It's working on the product page only. How to work with this in category list page also?

Bojjaiah
– Bojjaiah

2020-01-02 06:36:34 +00:00
Commented Jan 2, 2020 at 6:36
1

Thank you, now it's working fine.

Bojjaiah
– Bojjaiah

2020-01-02 07:13:10 +00:00
Commented Jan 2, 2020 at 7:13

| Show 3 more comments

Jaydeep Charadva · Accepted Answer · 2020-01-02 06:42:48Z

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

Sarvesh Patel · Accepted Answer · 2020-01-02 07:16:12Z

0

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!

answered Jan 2, 2020 at 7:16

Sarvesh Patel

9719 silver badges29 bronze badges

Add a comment |

Stack Exchange Network

Custom JavaScript not working in Magento 2

3 Answers 3

UPDATE :

Your Answer

Hot Network Questions

Custom JavaScript not working in Magento 2

3 Answers 3

UPDATE :

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions