Magento 2.1 Ad product to cart reloads page --> Webanalytics and page load time

[andidhouse]

Steps to reproduce

1. Magento 2.1
2. Move a product to cart from the product page

Expected result

1. Have the product in the cart without reloading the page completely
2. Show the "Success message" without reloading the page

Actual result

1. Product page is reloaded completely after adding product to cart and showing the "Success message"

This causes two problems:

1. The webanalytics gets destroyed by reloading the page completely meaning the webanyltics like google analytics will show the product site as two time visited which destroys the analytics completely when adding a product to cart.
2. On desktop it might be ok by performance to reload the product page but on mobile it is very slow to reload the product page completely just for the success message.

The best solution would be to have this behavior like in former m2 versions by adding the product to cart without reloading the page. I know that there was a bug that the site was not scrolling to top after putting a product to cart so the success message was not visible. I think the best solution would be to have this behavior like in former m2 versions without reloading the product page but scroll to top after adding product to cart.

[Raysharr]

I have noticed the same issue as well.

I am hooking in to Magento_Catalog/js/catalog-add-to-cart.js module with my custom code and now in version 2.1 this javascript module doesn't run on product page any more. Please, you guys (Magento developers), provide me a solution how to proceed with this issue. Do I have to create custom javascript which will be reacting on click on add to cart button or wait for fix or something else?

Thank for the help in advance.

[0m3r]

In order to restore old behavior (ajax add product to cart without page reload), I found and used the old code :

magento2/app/code/Magento/Catalog/view/frontend/templates/product/view/addtocart.phtml

Lines 54 to 76 in a5fa3af

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

that code was removed in commit MAGETWO-53439: [Github][PR] Removed inline JavaScript from template d608f9e
#4141

[Zaylril]

@0m3r @andidhouse @Raysharr As i posted in another thread on this issue.

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

[Zaylril]

Just a quick update as well (for validation)

So a quick 2 liner update to the widget:

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

[erikhansen]

I've noticed this behavior on all 2.1 sites I've been working on, both new installs and upgrades. @Zaylril's suggested change fixed the issue for me.

[veloraven]

This issue is already fixed in develop.
Internal ticket for 2.1 - MAGETWO-56950

[cefrigo]

i have tried this fix (putting bindSubmit to true) so i can have ajax add to cart working, but i am having another issue, Error messages are not showing ( success message are ), for example i try to purchase more qty than the product has, it wont tell me anything, no message error at all. Anyone else ?