Mini Basket Not Automatically Updating in Mobile Mode

[onebrowncow]

Anyone else encountered this one?

When using CC6 on a mobile phone, in this case an iPhone (or in the mobile dimensions in Firefox developer tools) the toggled mini basket which appears top right does not auto increase products in the basket. If you add one product it shows the first product, if you add a second product it fails to show the added product. Large formats for tablet, laptop and desktop not affected, they seem to add products correct as each item is added.

I can replicate this problem on the CC6 demo store http://demo.cubecart.com/cc6/ as well as my own development store.

[Dirty Butter]

I have this issue on my Kindle, plus other what appear to be cache issues.

[bsmither]

I can also confirm (on CC605 as well)

But, watching the network traffic, I see CubeCart answering the ajaxadd with updated HTML for the "mini-basket". That is, add items are added, the HTML sent back to the browser does list all items.

So, why does the browser not actually update that HTML? Looking....

[bsmither]

I'm not an expert at javascript, so I have no 100% idea why the existing code was not working, but try this - and experiment with other viewport sizes!:

In 2.cubecart.js, lines 360-366:
Was:
} else {
    on_canvas_basket.replaceWith(returned.responseText);
    on_canvas_basket_content = $('#mini-basket .box-basket-content').html();
    off_canvas_basket_content.replaceWith(on_canvas_basket_content);
    $(".alert-box").slideUp();
    mini_basket_action();
}

Now:
} else {
    $('#mini-basket').replaceWith(returned.responseText);
    on_canvas_basket_content = $('#mini-basket .box-basket-content').html();
    $(".right-off-canvas-menu .box-basket-content").html(on_canvas_basket_content);
    $(".alert-box").slideUp();
    mini_basket_action();
}

 

[onebrowncow]

Trying this as a possible workaround which may be interesting to some anyway. Making the following changes to box.basket.php removes the need to toggle to view the basket in mobile view taking the mobile user direct to the basket page instead.

<!-- box.basket.php -->

<!-- replace: -->

      <div class="show-for-small-only"><a class="right-off-canvas-toggle button 
      white tiny" href="#">
      <i class="fa fa-shopping-cart fa-2x"></i></a></div>

<!-- with: -->

      <div class="show-for-small-only"><a  class="button white tiny" href="
      {$STORE_URL}/index.php?_a=basket">
      <i class="fa fa-shopping-cart fa-2x"></i></a></div>

 

Edited July 8, 2015 by onebrowncow

[Dirty Butter]

I don't think using the Responsive Design View on FireFox is going to be sufficient to sleuth this issue. I took the Checkout Button off the mini-basket last night, and sure enough today we had a customer write who has the empty basket issue. I had no problem at all taking her order to Pending, logging in as the customer. I've asked her to tell me what she was on - phone, etc., but who knows if I'll get an answer or not - or an order for that matter. All I'm saying is, testing on actual phones is needed here IMHO.

[bsmither]

Firefox's RDV is all I have to test Foundation.

"today we had a customer write who has the empty basket issue."

I think the empty basket issue is not related to how @onebrowncow described this mini-basket not updating issue.

Along with Firefox's RDV, I have a "Go-Mobile" addon that uses a typical mobile device user-agent string. Thus, when CubeCart is using a non-responsive skin (i.e., Kurouto) and has available the Mobile skin, CubeCart will use the Mobile skin. But CubeCart will not use the Mobile skin if settings say to use a responsive skin (i.e., Foundation).

So, even if I set Firefox to say I am using an Android-based phone, Foundation will show at the "large" configuration because the viewport still reports to the javascript that X-number of 'EMs' can fit across the screen. So, the RDV takes care of that.

I can see a problem with a responsive skin's behavior if the browser on the device does not correctly report it's viewport size to the javascript. And if there is a device/browser that fails to do so, I have no idea what can be done about it.

[onebrowncow]

There's also a developer view in Google Chrome browser which renders by a device type choice. Find it in Chrome under view -> developer -> developer tools and when it opens a panel of code etc look for the little mobile phone icon across the top, just a small open rectangle next to the search magnifying glass.

I agree with bsmiter. We are talking crossed paths. Regardless of the mini basket showing the view basket with the checkout button or without the checkout button showing the basket fails to accumulate an order until the browser is refreshed, after a refresh the basket seems to function correctly.

My development site (still at the same location as in my show off post) has been running with me testing for a couple of days with the mini basket checkout button disabled and with the code modification posted above, and so far over multiple devices I have been unable to replicate the problem Dirty Butter says his customers are experiencing so to that end we really need more information on the actual devices the customers are experiencing the problem on.

If this is a mobile skin issue the only other way we can deal with this is to actually target the device rather than the viewpoint.

Just as an additional thought, I noticed that in many mobile views of carts the view basket icon will show that something has been added. Adding something to the basket and heading to the top of the page I would expect to see an indication that a product had been added to the basket without having to click the basket icon to see it and to that end I have modified my site to indicate an item in the cart without the customer having to enter view basket mode.

Edited July 8, 2015 by onebrowncow

[onebrowncow]

Issue now posted on Github https://github.com/cubecart/v6/issues/675

[Robin Somes]

Just to confirm I've seen the same issue here, using a Windows phone; 2 items added to the basket, only one appears in the toggled basket. If I click on 'View Basket', then both items are shown. CC6.06, Foundation skin.