2 different Add To Cart Buttons depending on viewport size?

Hello,

I'm currently making my template responsive and have come across something very strange.

When my site is viewed in a viewport above 1024 pixels the cart quantity updates accordingly without having to refresh the page.

When the page is below 1024 I get a completely different button and it doesn't update the quantity. I just get the bar at the top of the page notifying its been added to the cart.

This is the button I get when the page is above 1024:

<input type="button" value="Add to cart" class="button-1 add-to-cart-button nopAjaxCartProductVariantAddToCartButton" data-productid="64452">

Below 1024:

<input type="button" id="add-to-cart-button-64452" class="add-to-cart-button" value="Add to cart" data-productid="64452" onclick="AjaxCart.addproducttocart_details('/addproducttocart/details/64452/1', '#product-details-form');return false;">

Thank you :)

Hi Jhopper,

on mobile devices it is bad practice to have pop-up/modal windows. That's why, in AjaxCart, there are different functionality depending on the viewport/device.

Please let us know if you have any other questions!

Thank you for the reply.

The only real issue with this is it does not update the cart quantity when its in a smaller viewport, is there a way to correct this?

Hi,

We tried it on lower resolutions and it seems to work fine. Can you provide us with more information about the exact conditions you are testing it on (device, theme, etc.). 
Also can we get a link to your site or test environment so we can try it there as well ? 

Hello,

It seems to be working okay on another site I have using ajax cart, so I think I must have changed something within the code.

I did compare the two and I can't see any differences so it's quite annoying!

I haven't made any direct changes to the ajax cart plugin or files other than the CSS.

Here is a link to a product page where you can have a look http://88.208.235.91/abstract-lime-dream-canvas-art#.VYkZlPlVhBc

Thank you

Hi,

Could you double check the url, because we can not access it.

Hello,

Sorry the link should be working now.

I guess there must be something in a script that will need changing, I took a look at the public.ajaxcart.js but to no avail.

Hi,

We just expected your site and we noticed that in some cases the the quantity is becoming 0, but we can't figure out what is causing this. Could you turn off your bundling so we can debug AjaxCart.js and find out if it causes the problem ? 

Okay that should be off now.

Thank you for the help so far :)

Hi,

I think it is some kind of browser caching. 

You can use the DOMSubtreeModified event. The idea is to target the mini shopping cart quantity and every time it is changed the event will be triggered and the value will be stored in the localStorage.

$(selector).bind("DOMSubtreeModified",function(){
   var value = $(selector).text();
   localStorage.setItem("numberOfItemsString", value);
});

$(document).ready(function() {
 if (localStorage.numberOfItemsString) {
   var shoppingCartMenuLinkSelectorElementVal = $.getHiddenValFromDom("#shoppingCartMenuLinkSelector");

   if ($(shoppingCartMenuLinkSelectorElementVal).length > 0 && localStorage.numberOfItemsString) {
      $(shoppingCartMenuLinkSelectorElementVal).text(localStorage.numberOfItemsString);
   }
}
});