[CE 2.1] Ajax cart doesn't work

[minhluan259]

I installed CE 2.1 with sample data.
In product page, home page, top category (landing page) : Ajax cart doesn't work.
Ajax cart only work in sub category.

[pboisvert]

@asemenenko Can you make sure this one gets tested/verified?

[minhluan259]

Today CE 2.1 release, and it have the same issue.

[stevekem]

Having same issue with 2.1 CE

[minhluan259]

@asemenenko @pboisvert @stevekem , I found the issue in file:
vendor\magento\module-catalog\view\frontend\templates\product\view\addtocart.phtml

Here the fix:

<script type="text/x-magento-init">
    {
        "#product_addtocart_form": {
            "Magento_Catalog/product/view/validation": {
                "radioCheckboxClosest": ".nested"
            }
        }
    }
</script>
<?php if (!$block->isRedirectToCartEnabled()) : ?>
<script type="text/x-magento-init">
    {
        "#product_addtocart_form": {
            "catalogAddToCart": {
                "bindSubmit": false
            }
        }
    }
</script>
<?php endif; ?>

Change to

<?php if (!$block->isRedirectToCartEnabled()) : ?>
<script>
    require([
        'jquery',
        'mage/mage',
        'Magento_Catalog/product/view/validation',
        'Magento_Catalog/js/catalog-add-to-cart'
    ], function ($) {
        'use strict';

        $('#product_addtocart_form').mage('validation', {
            radioCheckboxClosest: '.nested',
            submitHandler: function (form) {
                var widget = $(form).catalogAddToCart({
                    bindSubmit: false
                });

                widget.catalogAddToCart('submitForm', $(form));

                return false;
            }
        });
    });
</script>
<?php else : ?>
<script type="text/x-magento-init">
    {
        "#product_addtocart_form": {
            "Magento_Catalog/product/view/validation": {
                "radioCheckboxClosest": ".nested"
            }
        }
    }
</script>
<?php endif; ?>

[EugeneAinstainer]

I have the same issue with magento 2.1. @minhluan259 thanks for fix, but does somebody know about the status of this issue?

[Zaylril]

@EugeneAinstainer @asemenenko @minhluan259

vendor\magento\module-catalog\view\frontend\templates\product\view\addtocart.phtml

You simply need to change

"bindSubmit": false

to

"bindSubmit": true

The initial value in the old code was overridden by the code in the inline script. However if you actually look at the widget itself you will see nothing happens if bind is set to false. NOTHING it's like the widget doesn't exist. How this was missed is just beyond comprehension. Unbelievable

Hopefully the above fix is a much better one than simply adding in the old code.

Cheers

[minhluan259]

@Zaylril
"bindSubmit": true
only work for simple product (hasn't option).
If product has an option required, it need validate before send request ajax.

[Zaylril]

@minhluan259 yes you are correct because the validation is not called. So this needs to be factored into the addToCart Widget.

So a quick 2 liner update to the widget, need to modify the bindSubmit function

   _bindSubmit: function() {
            var self = this;
           this.element.mage('validation');
            this.element.on('submit', function(e) {
                e.preventDefault();
                if(self.element.valid()) {
                    self.submitForm($(this));
                }
            });
        }

[kfaer]

It is bug sirs, there is an Ajax issue in M2.1, when adding an item to the cart "Adding.." sign is not showing in the box of add to cart

[davidbilly]

@Zaylril Hi, May i know where this _bindSubmit: function() { code locate? Thanks :D

Never mind, i found it : ./vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.js

I edited : 
    {
        "#product_addtocart_form": {
            "catalogAddToCart": {
                "bindSubmit": true
            }
        }
    }

at ./vendor/magento/module-catalog/view/frontend/templates/product/view/addtocart.phtml 

And 

_bindSubmit: function() {
            var self = this;
        this.element.mage('validation');
            this.element.on('submit', function(e) {
                e.preventDefault();
        if(self.element.valid()) {
                   self.submitForm($(this));
        }
            });
        },

at ./vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.js 

After that, do bin/magento setup:static-content:deploy and clean web browser cache.
The mini cart still show empty :(

Please help on this #5426 (comment) :(

Update : Mini cart empty issue fixed with #5003