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 ?

[andidhouse]

Hi there,

tested on 2.1 one thing is fixed:

• If a product is in stock and added to cart the page is not reloaded

ok so far BUT... and the BUT is big "BUT" every time here... it is just half the way...

• If a product is out of stock and out to cart - site reloads again for the message that the product is out of stock
• site does not scroll to top to view the message in both ways (in stock/out of stock)

Also the behaviour is completely frustrating that the out of stock products are not marked somehow at configurable products AND simple products you ad more then once to the cart... This is another topic but my team is really tired of reporting bugs here as - if you are lucky - the bug is fixed half way after month but in most cases some things are missing or another bug appears.

Any feedback on this from the magento team pls.

Thanks!

[andidhouse]

AND another bug reported also moth ago is also not solved:

If a product is out of stock and the info here is shown on top in "page messages" and now go to another page each page has the this info notice :-/ ....

[andidhouse]

Varnish and Redis installed.

[vicrazumov]

@andidhouse I managed to solve this by removing $url from return $this->goBack($url); in the execute function of /vendor/magento/module-checkout/Controller/Cart/Add.php

[PaperDS]

So will this fix be included in upcoming v2.1.3 expected in next two weeks I wonder.
Tired of seeing 3 month old statements:
"This issue is already fixed in develop.Internal ticket for 2.1 - MAGETWO-xxxxx"
on every major bug here.

[danielneu]

was this fixed in 2.1.3 or can we expect the fix to be in 2.1.4?

[jmtakahashi]

@veloraven can you tell us if this will be in an upcoming release? The success AND failure messages need to show up where users see them without reloading the page. Thanks in advance.

[magento-engcom-team]

@andidhouse, thank you for your report.
The issue is already fixed in 2.2.0

[OZZlE]

I made a patch for it: https://gist.github.com/OZZlE/67db00264ebfd94ea1f35e3998aa1c16