Plus and minus icons on quantity selector not working

Highlighted
New Member
2 0 0

Hello,

 

I have seen several threads similar to this, but have not found a solution.  Ware are using a third-party theme, but I have often added a quantity selector to various themes that worked fine with arrows to add and remove quantity.  I have copied the theme's quantity selector on our collections page, and it will add the number to the cart if the number is typed in.  However, we need the plus and minus to add and remove the quantity.  I am sure I am missing something, but I have copied the same script, etc. from the functioning quantity selector on the product page.  Any suggestions would be greatly appreciated.  

 

This is a link to the staging site:

 

https://ck4x1qqbfxq811gz-18332090432.shopifypreview.com

 

The Shop page is what I am working on.  The form code for the quantity selector and button is:

 

   <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">

          <span id="ProductPrice" class="h1 price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
            {{ current_variant.price | money }}
          </span>

          {% if product.compare_at_price_max > product.price %}
            <p id="ComparePrice" class="h3 price">
              {{ current_variant.compare_at_price | money }}
            </p>
          {% endif %}

          <div class="center-div">
          <div class="form__row" style="margin-top: 10px; max-width: 200px;">

      {% if product.variants.size >= 1 %}
        <input type="hidden" name="id" value="{{ product.variants.first.id }}" id="variant-{{ variant.id }}" />
      {% else %}
        <select name="id">
      {% for variant in product.variants %}
        {% if variant.available %}
        <option value="{{ variant.id }}" id="variant-{{ variant.id }}">   
          {{ variant.title | escape }} for {{ variant.price | money }}
        </option>
        {% else %}
          <option value="{{ variant.id }}" id="variant-{{ variant.id }}" disabled="disabled" class="disabled">   
          {{ variant.title | escape }} &mdash; OUT OF STOCK
        </option>
        {% endif %}
    {% endfor %}
    </select>
    {% endif %}
        
         <div id="infiniteoptions-container"></div>
             <div id="uploadery-container"></div>
         
            <div style="float:left;margin:10px 0px 5px 25px;" class="number-input-wrapper product-quantity clearfix">
               <div style="width:60px;" class="number-input-field">
                 <input min="1" type="number" name="quantity" id="quantity" value="1" />
                 <label class="number-input-label" for="quantity">{{ 'general.general.quantity' | t }}</label>
               </div>
               <div class="number-input-nav">
                 <div class="number-input-nav-item icon icon-plus"></div>
                 <div class="number-input-nav-item icon icon-minus"></div>
               </div>
             </div>

      <input type="submit" href="{{ product.url }}" class="orange-button" name="add" value="Add to Cart" />
          </div></div>     

        </form>   
 
I've never posted on the Shopify forums before, so I hope I am doing this right.
 
Thanks!
0 Likes
Shopify Expert
9778 86 1525

First off, You've added a link to the shop, noted it's a custom third part theme, and provided some code with in code formatted block. All lovely things, and very helpful.

 

Now if you code didn't come with those selectors you've done a good job of getting them in so far. However, there are some JavaScript errors on the page that would be worth you looking at resolving first. Those errors could be related to what you're seeing or at least stopping your code that drives those plus and minus buttons.

I've not looked at the JavaScript code in detail so it is possible it needs to be adapted to work on the collection page if you've just pulled it from the product page.

 

Have you looked at your browser console logs and spotted those errors? Also making a bold assumption you know you way around some code given you got this far but if I need to backtrack/explain more that's cool too.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
New Member
2 0 0

Hi Jason,

 

Thank you so much for your reply.  I've since looked at the errors you mentioned and found them to be unrelated to the issue.  I've also found using the quantity selector on that page causes additional issues with the selector on the single product page in mobile.  I am giving up on the issue after wasting many, many hours trying to get the icons to work.  Thanks for the advice regarding the errors.   I appreciate it!

0 Likes