Product in Cart have different quantity stylings

14 0 2

Hello, I'm working as a developer for Wolf and Grizzly and this is the website for reference to this bug:

You can view the bug by adding a "Grill M1" to the cart and viewing the quantity styling change (found in image 1). 

(Image 1)Screen Shot 2019-09-18 at 11.51.04 AM.png
It is styled with a "-" and "+" button which I created in the ajax-cart. 

Having JUST the Fire Safe, it changes to a styling that is hosted on the cart page (found in image 2).
(Image 2)Screen Shot 2019-09-18 at 11.53.13 AM.png

Whenever the Grill M1 is in the cart with the Fire Safe, they both share the correct styling. The Grill M1 alone also has the correct styling, it is only isolated to the Fire Safe being alone. I'm not sure how to even approach this bug or whats happening.

Shopify Expert
1381 111 200

Hi @robstao,


Hope you are doing well!

I came across your post and tried finding solution to the bug.

I  would like to confirm if any of these products would be coming via any app. Please confirm.

I need to dig in further to check the issue.

51 6 29

This is an accepted solution.

So the first thing I am noticing is that when I just add the fire safe product to the cart I see this error in the console:

error fire safe.PNG

So it looks like there is some javascript error when trying to find a specific element. When I search for where the error occurred it takes me to this line of code:

  var quantityAmount = document.getElementById("updates_13400659984439");
  quantityAmount.addEventListener("change", function () {
    var quanityValue = +quantityAmount.value;
    if (quanityValue === 1) {
    } else if (quanityValue >= 2) {

Does that look familiar to you? When I search for the updates_13400659984439 in the HTML on the fire safe product I am unable to find any elements. If I go to that code with just the m1 product in it I find this element:

<div class="medium-down--floatL">
    <div class="js-qty">
      <button onblur="this.form.submit()" type="button" class="js-qty__adjust js-qty__adjust--minus" data-id="13400659984439" data-line="" data-qty="0">−</button>
As you can see this element seems to be what that js code is looking for
Also the class of this div says js-qty so I am guessing there is some JS somewhere in your theme that is adding this specific element
      <input onchange="this.form.submit()" type="text" class="js-qty__num" value="1" min="1" data-id="13400659984439" data-line="" aria-label="quantity" pattern="[0-9]*" name="updates[]" id="updates_13400659984439">
      <button onblur="this.form.submit()" type="button" class="js-qty__adjust js-qty__adjust--plus" data-id="13400659984439" data-line="" data-qty="11">+</button>

So on the successful product it has that element and is able to continue with the correct select style. I am guessing there is something adding in that JS to your page and for whatever reason it is not adding in that JS. I believe this because if it was being added by liquid they would all be the same since that is handled server side. I would start by trying to figure out what code is adding in that specific element and start adding some console.logs in there to figure out what is going on. Let me know if you need any more assistance! You can always DM me if you want to go more in depth.

14 0 2

That was much easier to fix than expected. I always found the simplest bugs end up taking me the most time. That snipped of code you isolated out (produced in the consol) was the cause of the headache. Thanks for your support!  

1 Like
51 6 29

Awesome glad it helped you figure out the issue! Honestly most bugs are usually easy fixes it's just finding what is blowing everything up that is the issue, trust me I have spent many hours racking my brain for solutions only to find out I had a typo or referenced something wrong.