Magento2: When adding a product to shopping cart, it is not added to mini cart, but it is in /checkout/cart/

[jaimestuardo]

1. Magento 2.1.0
2. PHP 5.6.23

Steps to reproduce

1. Load the catalog in frontend and add a product to shopping cart. No product are actually added to minicart
2. If loading /checkout/cart/, products added are there.

Expected result

1. To increase number in mini cart and when click on it, shopping cart layer should be displayed

Actual result

1. Nothing displayed in mini cart and when clicked on it, a blank layer is shown

When inspecting JavaScript in Google Chrome developer tools, I found this when I load the catalog:

Uncaught TypeError: Unable to process binding "css: function (){return { empty:cart().summary_count == 0} }" Message: cart is not a function

in knockout.js.

[duhon]

@jaimestuardo Thanks for reporting.
Unfortunately, I was not able to reproduce the issue you described.
Try to reproduce in incognito mode for your browser. If that doesn't help, please provide more detail steps to reproduce the bug. Also, it can be helpful if you describe settings of your Magento instance: was it the fresh install or upgrade from the previous version? Do you have many store views? Maybe some other settings.

[jaimestuardo]

Hello,

problem started happening after last update. The problem that existed before was that the cart items indicator always was present in mini cart even when no items are in it. After upgrade to 2.1.0, this new problem happened.

I have only 1 store view.

This problem happens when trying to add a product to cart in both logged in or not logged in.

If you need to see the problem in action, just load: http://qa2016.depasa.cl/productos.html

After loaging that page, this JavaScript error is shown in console_

I don't know why that error is produced now, because other times, a JavaScript error concerning cart were shown.

[jaimestuardo]

Any solution?

[sylvainraye]

I confirm the bug. Check the screenshot. version 2.1 of Magento. Additionally, the successful added product to cart message stay stuck on all pages.

All cache are active, except the full page cache.

However after i have visited the checkout/cart page, the mini cart works better

[andimov]

@jaimestuardo @diglin
Could you please provide more details about Magento installation and environment?
Was it upgrade or clean install, do you use Varnish, etc.

[jaimestuardo]

I was using Magento 2.0.x and it had another problems that I needed to have fixed. So, when 2.1.0 version was released, I have upgraded. Most problems were solved, however, this another problem started happening. This is crucial to be solved as soon as possible.

[sylvainraye]

Same as @jaimestuardo except that issues are still on 2.1.0. No varnish. PHP 7 installed on a vagrant VM

[jaimestuardo]

Any update on this?

[jaimestuardo]

Finally I could know what was happening. The problem was strange, however.

I have a custom template. That custom template had minicart.phtml in its design folder. Well, the only difference between this phtml and the default phtml is that I had added a new style class in the outer div.

To test I have deleted that new class from the div and the page still did not work. So, finally, I deleted the minicart.phtml from my custom template, and magically it started working.

Therefore, the solution was to change my custom css file to change the minicart style, instead of adding a new class and customizing the minicart.phtml template.

Why was this? I don't know, but it did work, at least.

Thanks
Jaime

[sweikenb]

Same Issue here:

• PHP 7
• no Varnish
• no Page Cache enabeled
• Magento 2.1.0

Solution of @jaimestuardo is not working for me

[SerhiyShkolyarenko]

@sweikenb what are the steps after the installation? Which theme do you use? Are there any errors in browser console? What is server response on "add to cart" click, when request is sent?

[Kdtv1977]

Same Issue here:

PHP 7
no Varnish
no Page Cache enabled
Magento 2.1.0

Standard template Magento/luma

Any solution?

[immist]

Same Issue here:

PHP 7
no Varnish
no Page Cache enabled
Magento 2.1.1

Standard template Magento/luma

[treestonemedia]

Any update?

Same Issue here:

PHP 7
no Varnish
no Page Cache enabled
Magento 2.1.1

Standard template Magento/luma

[sylvainraye]

The issue can be temporary fixed by enabling the full page cache even without using Varnish
But in development phase it's a pain

[treestonemedia]

@diglin How can Magento2 live with such a nasty bug? don't they have Q&A testing before they release?

[sylvainraye]

@treestonemedia there are tons of unit testing on PHP side. I don't know how they handle testing on frontend side part. It's quite a complex software with tons of possible combination, so I find difficult to test all of them. The worse is not that, we provide feedbacks and the issue in the latest release is still there.

[treestonemedia]

@diglin Is there a way to prioritize issues? we cannot "Sell" Magento2 when basic things like this don't work.
look @ the sites here, they all have bugs (some of them are really slow) https://trends.builtwith.com/websitelist/Magento-2
Either Magento2 gets their act together or...

[sylvainraye]

@treestonemedia I don't know, Magento people decides themselves, which makes more or less sense.
The public release was published before one year. It's since a long time but there are still young problems. That's why I still develop 1.x projects. I just do module for 2.x to get experience. 1.x is stable and good enough to do everything you need. Magento 1.x needed also several years until lots of bugs were resolved. Magento 2.x became really complex, I'm not surprised to see so many important bugs.

[patrick-bigbridge]

This bug still appears in a fresh install of Magento 2.1.2. Some details:

Magento: 2.1.2
PHP Version: 7.0.9-1+deb.sury.org~wily+1

virtual host:

<VirtualHost *:80>
    ServerName mage212.bigbridgedev.nl
    DocumentRoot /var/www/mage212.bigbridgedev.nl/pub
    <Directory "/var/www/mage212.bigbridgedev.nl/pub">
        AllowOverride All
    </Directory>
</VirtualHost>

clean install
developer mode
sample data installed
all caches disabled
Browser client: Chrome version: 49.0.2623.110 / Linux: 4.4.0-45-generic
Not logged in

Steps to repeat:
Start at homepage
Click below "Hero Hoodie" "Add to Cart"
Color: green, size: XS
Click: "Add to Cart"

The minicart shows "You have no items in your shopping cart." See screenshot:

Magento, please try to fix this problem, I have spent some considerable amount of time trying to fix it myself, but minicart code is complex.

system.log:

[2016-11-07 10:35:16] main.INFO: Cache file with merged layout: LAYOUT_frontend_STORE1_237e5439944229443563a2179ae651c07 and handles default, catalog_product_view, catalog_product_view_id_163, catalog_product_view_sku_MH07, catalog_product_view_type_configurable: Please correct the XML data and try again.  [] []
[2016-11-07 10:35:16] main.INFO: Cache file with merged layout: LAYOUT_frontend_STORE1_20a98983867a1770682b48d9a0ad63441 and handles 1column: Please correct the XML data and try again.  [] []
[2016-11-07 10:35:16] main.CRITICAL: Broken reference: the 'catalog.compare.sidebar' element cannot be added as child to 'sidebar.additional', because the latter doesn't exist [] []
[2016-11-07 10:35:16] main.CRITICAL: Broken reference: the 'sale.reorder.sidebar' element cannot be added as child to 'sidebar.additional', because the latter doesn't exist [] []
[2016-11-07 10:35:16] main.CRITICAL: Broken reference: the 'wishlist_sidebar' element cannot be added as child to 'sidebar.additional', because the latter doesn't exist [] []
[2016-11-07 10:35:16] main.CRITICAL: Broken reference: the 'product.info.price' tries to reorder itself towards 'product.info.review', but their parents are different: 'product.info.main' and 'product.info.price' respectively. [] []
[2016-11-07 10:35:16] main.CRITICAL: Broken reference: the 'product.price.final' tries to reorder itself towards 'product.info.sku', but their parents are different: 'product.info.price' and 'product.info.stock.sku' respectively. [] []
[2016-11-07 10:35:16] main.CRITICAL: Broken reference: the 'product.info.social' tries to reorder itself towards 'product.info.overview', but their parents are different: 'product.info.extrahint' and 'product.info.main' respectively. [] []
[2016-11-07 10:35:16] main.CRITICAL: Broken reference: the 'view.addto.wishlist' tries to reorder itself towards 'view.addto.requisition', but their parents are different: 'product.info.addto' and '' respectively. [] []
[2016-11-07 10:35:16] main.CRITICAL: Broken reference: the 'bml.right.logo' tries to reorder itself towards 'product.info.addtocart.paypal', but their parents are different: 'product.info.addtocart' and '' respectively. [] []
[2016-11-07 10:35:16] main.INFO: Cache file with merged layout: LAYOUT_frontend_STORE1_26f1b068ec7ccf4878f9284dd1137afd1 and handles catalog_product_prices: Please correct the XML data and try again.  [] []
[2016-11-07 10:35:20] main.INFO: Cache file with merged layout: LAYOUT_frontend_STORE1_2c7dd4384a0ea945ae0d791fa12c5fba3 and handles review_product_listajax: Please correct the XML data and try again.  [] []
[2016-11-07 10:35:20] main.INFO: Cache file with merged layout: LAYOUT_frontend_STORE1_2c7dd4384a0ea945ae0d791fa12c5fba3 and handles review_product_listajax: Please correct the XML data and try again.  [] []

There are no javascript errors.

The error also occurs _sometimes_ when the user is logged in. It happens _always_ when a logged in user adds items to his cart, logs out, and then logs in again. The items are still there, as witnessed by the checkout page, but the mini-cart says there's no items.

[jlexposito]

I'm facing the same bug on local:

• Magento 2.1.2
• PHP 7.0.8-0
• Ubuntu 16.04LTS
• All caches disabled
• Virtualhost
• No javascript errors
• Developer mode

Empty minicart until checkout is reached. Steps to reproduce:

1. Visit product view
2. Add product to cart. Expect products on minicart but anything displayed.
3. Visit domain/checkout and minicart is updated.

[hamdansalik]

I have the same issue

Magento ver. 2.1.1

its default magento bug??

[aaronsturm]

Hi all, this solution worked for me.
https://github.com/magento/magento2/issues/5144#issuecomment-230257842

[aaronsturm]

After additional comparison, I realized I had made updates to
vendor/magento/module-catalog/view/frontend/templates/product/view/addto.phtml
in my theme. The file had changed dramatically in the latest version of Magento. After deleting my theme's version, the cart worked as expected.

[TGWS2016]

This is occurring with me too.

See the view here with the js error showing from customer-data.js when adding an item to the basket - the minicart isn't correct, but the items are there when we visit the actual checkout url.
http://prnt.sc/d9eprx

Magento 2.1.2 & luma theme.

[tjons]

Same issue here. No errors in the console - the minicart just doesn't update.

[ReadySteadyFlow]

Enabling the full-page cache, even on the community edition, solved the problem for me (Magento 2.1.2 in Dev mode)

Source: https://community.magento.com/t5/Technical-Issues/Shopping-Cart-doesn-t-load-in-Magento-2-1-0/td-p/41767

[ShubhSikarwar]

Change the URL of your magento fromlocalhost to 127.0.0.1 in core_config_data table in DB and clear cache. It will work for you.

[srokatonie]

@ShubhSikarwar Which setting exactly do you have in mind?

[nathanjosiah]

@ShubhSikarwar It doesn't matter what I change the base URL to, I still have the issue. Frustrating that this has been open for 6 months and there has no progress or updates.

[srokatonie]

@nathanjosiah Have you tried turning on full page cache like @ReadySteadyFlow suggests? It looks like it's solved the issue for me (possibly along with the base URL change)

[tsauerwein]

In my case the override files Magento_Checkout/templates/cart/minicart.phtml and Magento_Checkout/web/template/minicart/content.html of my theme (Porto) were using cart().summary_count, whereas the original files are accessing the properties with getCartParam('summary_count')

//edit: The function cart() no longer exists in 2.1.5, see: https://github.com/magento/magento2/commit/eec3cf17bc5deae71c83c797d1339de46cf6905f

[malachy-mcconnell]

Dear Magento Core Team, Please can we have an update on this thread?

Here is my suggested solution (I think other solutions are possible, see analysis below):

Proposed solution

In file:

app\code\Magento\Customer\view\frontend\web\js\customer-data.js
in function:
customerData.init()
[defined on line 187 of this M2CE develop branch]

Code change:

move

                if (!_.isEmpty(storageInvalidation.keys())) {
                    this.reload(storageInvalidation.keys(), false);
                }

outside of its enclosing else{}

so that storage invalidation keys are always tested and reloaded if non-empty

So now the psuedo code looks like this:

if(some conditions that sometimes result in the cart not updating)
{
  then the cart is not always updated
}

if(has invalid storage keys listed in browser local storage)
{
  then reload those keys ('cart' in our case; it is set as 'invalid' by a before-ajax-post listener triggered by the add-to-cart button )
}

if(page cache is turned on)
{
  then consider reloading the country data
}

That is, change the code to look like this:

        /**
         * Customer data initialization
         */
        init: function() {
            var countryData,
                privateContent = $.cookieStorage.get('private_content_version');

            if (_.isEmpty(storage.keys())) {
                if (!_.isEmpty(privateContent)) {
                    this.reload([], false);
                }
            } else if (this.needReload()) {
                _.each(dataProvider.getFromStorage(storage.keys()), function (sectionData, sectionName) {
                    buffer.notify(sectionName, sectionData);
                });
                this.reload(this.getExpiredKeys(), false);
            } else {
                _.each(dataProvider.getFromStorage(storage.keys()), function (sectionData, sectionName) {
                    buffer.notify(sectionName, sectionData);
                });
            }

            if (!_.isEmpty(storageInvalidation.keys())) {            
        this.reload(storageInvalidation.keys(), false);
            }

            if (!_.isEmpty(privateContent)) {
                countryData = this.get('directory-data');
                if (_.isEmpty(countryData())) {
                    customerData.reload(['directory-data'], false);
                }
            }
        },

Here is my analysis

This is a long and confusing bug report trail. I think that is because it is not an easy bug to understand and it changes depending on a number of things.

In particular many people suggest turning the page cache on solves this problem. I agree that solves the problem because if the page cache is turned on then in the function customerData.init() the variable privateContent is always true. In other words var privateContent can be called var pageCacheIsOn now when we follow the logic of function customerData.init() :

//on page load storage.keys() is most likely empty so we enter the first if statement:
            if (_.isEmpty(storage.keys())) {
                if (!_.isEmpty(privateContent)) {
                    //Always load everything if page cache is turned on
                    this.reload([], false);
                }
            } else if (this.needReload()) {
                //Sometimes storage.keys() is not empty (depends on what pages you visited in the past and also even if you refreshed the page because these are in browser local storage)
                //So notify (I think it means load later, or load into JS object from local storage)
                //BUT this is only loading keys in storage.keys()
                _.each(dataProvider.getFromStorage(storage.keys()), function (sectionData, sectionName) {
                    buffer.notify(sectionName, sectionData);
                });
                //fetch expired keys from the server instead of from local storage.
                //okay, but why only here? and what about invalid storage keys?
                this.reload(this.getExpiredKeys(), false);
            } else {

                //we arrive here if there are storage.keys() and this.needReload() returns false
                _.each(dataProvider.getFromStorage(storage.keys()), function (sectionData, sectionName) {
                    buffer.notify(sectionName, sectionData);
                });

                //you might think we can only have invalid keys in storage if we also have storage.keys() but that is not the case, so please move this outside so it always executes.
                if (!_.isEmpty(storageInvalidation.keys())) {
                    this.reload(storageInvalidation.keys(), false);
                }
            }

How to repeat this bug:

Standard M2 install. Disable all caches. In the Magento Admin set 'sales->checkout->shopping cart->after adding a product redirect to the shopping cart' to yes.

Now visit the front end. Navigate to a product view page, clear your cookies. Refresh the page. Now press the 'add to cart button'. Here is what I observe:

Listener sets browser local storage key mage-cache-storage-section-invalidation to {"cart":true,"messages":true}
Ajax post to add/cart/ executes and returns a back_url
Something triggers an in-browser redirect to back_url ( edirect to the cart page, as we set in the admin)
The browser loads the page /checkout/cart
via <script type="text/x-magento-init"> the object Magento_Customer/js/customer-data is instantiated and function customerData.init() is run.

Let's step through the logic of that function customerData.init():

if (_.isEmpty(storage.keys())) //TRUE because browser local storage key 'mage-cache-storage' has value "{}"
    if (!_.isEmpty(privateContent)) //FALSE because we turned pagecache off
        //noting now we missed this.reload([],flase); //ie load everything

//Without modification, the code jumps out of the if-elseif-else and goes on to the next test:
if (!_.isEmpty(privateContent)) {
  countryData = ... //we don't care        
}

And hence the cart section data is not loaded and mini-cart does not update.

---o0o---

Now refresh the page:

And let's step through the logic of that function customerData.init() again:

if (_.isEmpty(storage.keys())) //FALSE because previously the cart page added 'checkout-data' 'storage key' into  browser local storage key 'mage-cache-storage'

//next test:
} else if (this.needReload()) { //FALSE because the browser cookie jar does not have a cookie called 'section_data_ids' (and because typeof null === 'object'), so we do not reload (but reload doesn't help us load invalid storage keys)

//next test:
else { //TRUE
  //notify the buffers of storage.keys() 'checkout-data'
  //NOW load the invalidated storage keys 'cart' and 'messages'
  //Hoorah! By some luck this is what we want but we had to refresh the page to get it
}  

---o0o---

Recap:

1. Caches = off, redirect-to-cart-after-add-product = yes, not logged in.
2. Add to basket.
3. Redirect to cart: Mini cart does not update.
4. Refresh cart page: Mini cart updates.
5. Tear out hair: nasty nasty sometimes-mini-cart-does-not-update bug.

Proposed solution:

customerData.init() should always run conditional test

            if (!_.isEmpty(storageInvalidation.keys())) {
                this.reload(storageInvalidation.keys(), false);
            }

Logical argument for proposed solution:

If there are any invalid storage keys at any time, why not reload them from the server?

Final summary:

Please review the intended logic of customerData and in particular customerData.init() because there are some scenarios where it does not initialise the 'cart' storage-data and hence the mini-cart fails to update.

Note:

This may relate to issue #5144

Some pedantry if you got this far:

The object customerData uses this syntax in a couple of places:

if(typeof cookieSections != 'object')

But often cookieSections is null which is an object so for example this.needsReload() returns false if cookieSections is null. I think that might be okay because the default is return false but I can't really follow the original intended logic. (I mean, what application state causes cookieSections to be something other than an object?)

[malachy-mcconnell]

I have more to add on repeating the problem of mini-cart not updating.

Another way to replicate the problem:

a) Standard M2CE install
b) Set all caches disabled, especially the page cache
c) On the front-end, clear cookies and refresh the page
d) Click sign-in
e) Enter a customer username and password and press login button in the normal way
f) Note that the customerData object's listener on('submit') adds the values cart, messages, compare-products, and customer to the local browser storage key 'mage-cache-storage-section-invalidation' before the login data is submitted.
e) Presently the browser is redirected to /customer/account and we may inspect the running of customerData.init() where we see:

            if (_.isEmpty(storage.keys())) { //TRUE : there are no keys in the local storage yet
                if (!_.isEmpty(privateContent)) { //FALSE : because the page cache is off
                    this.reload([], false); //never run
                }
           //falls out of if-elseif-else without doing anything.

          //so unfortunately the code
                if (!_.isEmpty(storageInvalidation.keys())) { //NEVER TESTED
                    this.reload(storageInvalidation.keys(), false);
                }
          //is never run
         //even though storageInvalidation.keys() is not empty (it is cart, messages, compare-products, customer).

f) The mini-cart does not update. I suspect product comparison and customer data and any messages don't update either. (all because the page cache is off AND this.reload(storageInvalidation.keys(), false) is never called)

So you can remedy this by turning pageCache on or, better, moving the lines of customerData.init() outside the else{} as described above. Like this:

        /**
         * Customer data initialization
         */
        init: function() {
            var countryData,
                privateContent = $.cookieStorage.get('private_content_version');

            if (_.isEmpty(storage.keys())) {
                if (!_.isEmpty(privateContent)) {
                    this.reload([], false);
                }
            } else if (this.needReload()) {
                _.each(dataProvider.getFromStorage(storage.keys()), function (sectionData, sectionName) {
                    buffer.notify(sectionName, sectionData);
                });
                this.reload(this.getExpiredKeys(), false);
            } else {
                _.each(dataProvider.getFromStorage(storage.keys()), function (sectionData, sectionName) {
                    buffer.notify(sectionName, sectionData);
                });

                //moved. see below.
                //if (!_.isEmpty(storageInvalidation.keys())) {
                //    this.reload(storageInvalidation.keys(), false);
                //}
            }

            //ALWAYS RELOAD INVALIDATED KEYS
            if (!_.isEmpty(storageInvalidation.keys())) {
                this.reload(storageInvalidation.keys(), false);
            }

            if (!_.isEmpty(privateContent)) {
                countryData = this.get('directory-data');
                if (_.isEmpty(countryData())) {
                    customerData.reload(['directory-data'], false);
                }
            }
        },

I think that is the best way to fix this bug in the core file.

Meanwhile I am using require-config.js to map 'Magento_Customer/js/customer-data' onto my module's '\app\code\Mymodule\Customer\view\frontend\web\js\customer-data-total-replacement.js' so I can haz define my own object and make init() always test if (!_.isEmpty(storageInvalidation.keys()))

//file app\code\Mymodule\Customer\view\frontend\requirejs-config.js

var config = {
    map: {
        '*': {
            'Magento_Customer/js/customer-data': 'Mymodule_Customer/js/customer-data-total-replacement'
        }
    }
};

[winds1983]

Still happens on 2.1.6, how to fix this?

[Tonop]

The same problem on 2.1.6.

[Tonop]

Found this solution. Please check if it helps.

[malachy-mcconnell]

@Tonop if you want to experiment please edit the core file module-customer\view\frontend\web\jscustomer-data.js

and move lines 207, 208, 209 to be outside that block to line 211 so that the invalid storage keys are are always reloaded. (as per my comments above)

                if (!_.isEmpty(storageInvalidation.keys())) {
                    this.reload(storageInvalidation.keys(), false);
                }

I would be interested if this solves the problem of the mini cart not updating. If it does I will make a pull request for that code change. If it does not, please explain your situation in some detail. Particularly any theme customisations.

[Tonop]

@malachy-mcconnnell
Didn help. Minicart is still empty.

Do you want to elaborate with some details:

Magento version: 2.1.6
Mode (developer or production): Development
Caches on or caches off: On
Theme used: Luma
Is your theme using cart().summary_count or any other things mentioned in this thread? Default theme
Anything else you can say about your observation of this bug:
First time it works, but then I found it doesnt. I did install only several modules but then I disabled them it didn affect on Minicart.

[malachy-mcconnell]

Do you want to elaborate with some details:

Magento version:
Mode (developer or production):
Caches on or caches off:
Theme used:
Is your theme using cart().summary_count or any other things mentioned in this thread?
Anything else you can say about your observation of this bug:

[nntoan]

@malachy-mcconnnell I tried your workaround, not work for me (2.1.6)

[jerryvasoya338]

Similar type of issue create new or old any type of magneto 2.0.16 install and new product add to cart but its directly 302 not found error generate in network indicate other wise Adding... button show in long time.
How To Solved This Type Of Problem ??????

[magento-engcom-team]

@jaimestuardo, thank you for your report.
The issue is already fixed in develop branch, 2.2.0, 2.1.9

[likemusic]

Issue with 302 redirect like in https://github.com/magento/magento2/issues/5946#issuecomment-331776723 still happens in v2.2.2. Change domain from top-level to second-level fixes it (in my case from mg2cc to mg2cc.loc).

[wajahatbashir]

@jaimestuardo, thank you for your report.
The issue is already fixed in develop branch, 2.2.0, 2.1.9

@magento-engcom-team,

I'm facing same issue on my live website, after adding product mini cart, cart and checkout all pages are showing empty. Can you help me regarding about this issue. I'm using magento 2.3.0
Please check below screenshot.

https://prnt.sc/qmkcey

Thanks