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.

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

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

| improve this answer | |
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!

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