4

I want to modify the mage.catalogAddToCart JS widget of Magento 2.

According to http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/custom_js.html I have to do a

$.widget('foobar.myCatalogAddToCart', $.mage.catalogAddToCart, {


}

But I was not able to init it with a

<script type="text/x-magento-init">
            "#product_addtocart_form": {
                "myCatalogAddToCart": { }
            }
        }
</script>

also not

<script type="text/x-magento-init">
            "#product_addtocart_form": {
                "foobar.myCatalogAddToCart": { }
            }
        }
</script>

I am confused, because Magento Base also does not use the Namespace in its initialization. It is just

<script type="text/x-magento-init">
            "#product_addtocart_form": {
                "catalogAddToCart": { }
            }
        }
</script>

When I call my Widget mage.myCatalogAddToCart it works.

Questions:

  1. How can I use a proper custom namespace (foobar in the example)?

Bonus:

  1. Can I also rewrite catalogAddToCart compeletly, so I do not have to change the .phtml initialization?

Edit

Answer to Question 1.) I must have made some other mistake. The first one (init with "myCatalogAddToCart") is working now. The namespace just does not seem to matter.

But still try to figure out the answer to question 2.)

2
  • 1
    I'm trying to this exact same thing and it seems the standard way of extending the widget is not working. I can add catalogAddToCart: 'Namespace_Module/js/customAddToCart' to my requirejs-config.js file and it doesn't recognize the override in the browser. I've looked at the requirejs-config.js file that gets generated in the pub directory and it includes the override of the path to that widget but when catalogAddToCart is called in the template, requirejs doesn't use the overide to call the custom widget. – Nathan Toombs Oct 16 '15 at 5:18
  • @NathanToombs, did you ever find solution to the problem? Thanks – stevensagaar Feb 24 '16 at 11:32
1

I've answered the first part of your question in another question https://magento.stackexchange.com/a/96371/28167

The short answer is, using your example, "foobar.myCatalogAddToCart" is completely arbitrary.

All that matters is that it must match what get's returned. That text has no other meaning outside the scope of your widget and other widgets that extend your widget as you are doing with catalogAddToCart.

<script type="text/x-magento-init">
    "#product_addtocart_form": {
            "myCatalogAddToCart": { }
        }
    }
</script>

The only way this would work is if you create a requirejs-config mapping to your widget file. That would look like this

var config = {
    map: {
        '*': {
            "myCatalogAddToCart": 'Vendor_Module/js/path/to/widget'
        }
    }
};

"myCatalogAddToCart" could be any unique string so long as it is the same in your script tag and in the requirejs-config.js file.

1
  • Still does't work, here is my requirejs-config.js file var config = { map: { '*': { "addtocart": 'namespace_modulename/js/add-to-cart' } } }; here is my add-to-cart.js define([ 'jquery', 'jquery/ui', 'mage/catalogAddToCart' ], function($) { "use strict"; $.widget('namespace.addtocart', $.mage.catalogAddToCart, { _create: function() { alert('custom event triggered'); } }); return $.namespace.addtocart; }); – stevensagaar Feb 24 '16 at 12:02

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.