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.
After much trail this is what boiled out. The location of the requirejs-config.js is correct as the docs indicate,
/app/design/frontend/<vendor>/<theme>/requirejs-config.js
But the why this didn't work was that if you redid the jQuery to a CDN then everything else would fail as the mappings were based on that (as I understand it at this time). This is what I ended up needing to do to get everything to load an show up.
var config = {
"paths":{
'jquery':'https://code.jquery.com/jquery-1.11.3.min',
'_jquery':'jquery/',
'jquery/ui':'https://code.jquery.com/ui/1.11.4/jquery-ui',
'jquery/jquery-migrate':'https://code.jquery.com/jquery-migrate-1.2.1.min',
'spine':'https://repo.wsu.edu/spine/1/spine.min.js?2015-16-12',
'datatables':'//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min'},
map: {
"*": {
"jquery/jquery.mobile.custom": "/static/frontend/wsu/wsu_base/en_US/jquery/jquery.mobile.custom.js",
'jquery/jquery.cookie':"/static/frontend/wsu/wsu_base/en_US/jquery/jquery.cookie.js",
'jquery/jquery.validate':'/static/frontend/wsu/wsu_base/en_US/jquery.validate.js',
'jquery/jquery.metadata':'/static/frontend/wsu/wsu_base/en_US/jquery/jquery.metadata.js',
'jquery/jquery-ui-timepicker-addon':'/static/frontend/wsu/wsu_base/en_US/jquery/jquery-ui-timepicker-addon.js'
}
},
"shim": {
"spine" : ["jquery","jquery/ui"],
"datatables" : ["jquery","jquery/ui"]
},deps: [
"spine",
"datatables"
]
};
Best Answer
Try below code in your requirejs-config.js