Close

2 different Add To Cart Buttons depending on viewport size?

Jhopper
8 years ago
#9356 Quote
Avatar
  • 23
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 :)
Aleks
8 years ago
#9357 Quote
Avatar
  • Moderator
  • 70
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!
Regards,
Aleksandar Ivanov
Nop-Templates.com
Jhopper
8 years ago
#9363 Quote
Avatar
  • 23
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?
iliyan.tanev
8 years ago
#9372 Quote
Avatar
  • Moderator
  • 347
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 ? 
Regards,
Iliyan Tanev
Nop-Templates Dev Team
Jhopper
8 years ago
#9374 Quote
Avatar
  • 23
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
iliyan.tanev
8 years ago
#9384 Quote
Avatar
  • Moderator
  • 347
Hi,

Could you double check the url, because we can not access it.
Regards,
Iliyan Tanev
Nop-Templates Dev Team
Jhopper
8 years ago
#9387 Quote
Avatar
  • 23
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.
iliyan.tanev
8 years ago
#9388 Quote
Avatar
  • Moderator
  • 347
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 ? 
Regards,
Iliyan Tanev
Nop-Templates Dev Team
Jhopper
8 years ago
#9393 Quote
Avatar
  • 23
Okay that should be off now.

Thank you for the help so far :)
iliyan.tanev
8 years ago
#9398 Quote
Avatar
  • Moderator
  • 347
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);
   }
}
});
Regards,
Iliyan Tanev
Nop-Templates Dev Team