0

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.

2
  • Did you create requirejs-config.js? Jan 2 '20 at 5:39
  • @RohanHapani, No. In My Custom module having custom.js file.
    – Bojjaiah
    Jan 2 '20 at 5:40
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.

8
  • Here what is mage/custom?
    – Bojjaiah
    Jan 2 '20 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. Jan 2 '20 at 5:52
  • Okay, let's try.
    – Bojjaiah
    Jan 2 '20 at 5:52
  • It's working on the product page only. How to work with this in category list page also?
    – Bojjaiah
    Jan 2 '20 at 6:36
  • 1
    Thank you, now it's working fine.
    – Bojjaiah
    Jan 2 '20 at 7:13
0

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

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!

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.