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, 2020 at 5:39
  • @RohanHapani, No. In My Custom module having custom.js file.
    – Bojjaiah
    Jan 2, 2020 at 5:40

3 Answers 3

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, 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. Jan 2, 2020 at 5:52
  • Okay, let's try.
    – Bojjaiah
    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
    Jan 2, 2020 at 6:36
  • 1
    Thank you, now it's working fine.
    – Bojjaiah
    Jan 2, 2020 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 and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.