"Add to cart" button overrides cart items

New Member
2 0 0

Hi,

 

i followed the tutorial "Add an order form to your store" https://help.shopify.com/en/themes/customization/forms/add-order-form#add-an-order-form-to-a-regular...

 

from Shopify and i am stuck with a bug. The form works great except that when i hit the "Add to cart" button it overrides the items that the cart already has. For example if i had 2 batteries in my cart and i go to the form and i select 2 cookies, the button "Add to cart" removes the two batteries and i have only 2 cookies in the cart. 

 

The code of the form is relatively simple and i cannot understand why i have this problem. I use the Debut theme.

 

Order form code:

 

{% assign collection = collections.all %}

{% comment %}
Source: https://gist.github.com/carolineschnapp/9122054
If you are not on a collection page, do define which collection to use in the order form.
Use the following assign statement, replace 'your-collection-handle-here' with your collection handle.
{% assign collection = collections.your-collection-handle-here %}
Use the assign statement outside of this comment block at the top of your template.
{% endcomment %}

{% paginate collection.products by 100 %}

<form action="/cart" method="post">
  
  {% if collection.products_count > 0 %}
    <div>
      <h1>{% if template contains 'page' %}{{ page.title }}{% else %}{{ collection.title }}{% endif %}</h1>
<!--       <input type="submit" value="Add to the cart" /> -->
    </div>
  {% else %}
    <h1>{% if template contains 'page' %}{{ page.title }}{% else %}{{ collection.title }}{% endif %}</h1>
  {% endif %}

  {% if template contains 'page' and page.content.size > 0 %}
    <div class="rte">
      {{ page.content }}
    </div>  
  {% elsif collection.description.size > 0 %}
    <div class="rte">
      {{ collection.description }}
    </div>
  {% endif %}

  {% if collection.products_count > 0 %}

    <table>
      <tbody>
      {% for product in collection.products %}
        {% if product.available %}
          {% for variant in product.variants %}
            {% if variant.available %}
              <tr class="{% cycle 'pure-table-odd', '' %}">
                <td>
                  <a href="{{ variant.url | collection }}">
                    <img src="{{ variant.image | default: product.featured_image | img_url: 'small' }}" alt="{{ variant.title | escape }}" />
                  </a>
                </td>
                <td>
                  <a href="{{ variant.url | collection }}">
                   {{ product.title }}{% unless variant.title contains 'Default' %} - {{ variant.title }}{% endunless %}{% unless variant.sku == blank %} - {{ variant.sku }}{% endunless %}
                  </a>
                </td>
                <td>
                   {{ variant.price | money }}
                </td>
                <td style="text-align:right;">
                  <input name="updates[{{ variant.id }}]" onfocus="this.select()" class="quantity field" min="0" {% unless variant.inventory_management == blank or variant.inventory_policy == 'continue' %} max="{{ variant.inventory_quantity }}" {% endunless %} type="text" value="0" tabindex="1" />
                </td>
              </tr>
            {% endif %}
          {% endfor %}
        {% endif %}
      {% endfor %}
      </tbody>
    </table>
    
    <div style="float: right;">
      <input class="btn" type="submit" value="Add to the cart" style="margin-right: 20px;"/>
    </div>
  
 
  {% else %}
    <p>There are no products in this view.</p>
  {% endif %}
  

</form>

{% endpaginate %}

{% if collection.products_count > 0 %}
<script>
jQuery(function($) {
  $('table .quantity:first').focus();
  $('[max]').change(function() {
    var max = parseInt($(this).attr('max'), 10);
    var value = parseInt($(this).val(), 10) || 0;
    if (value > max) { 
      alert('We only have ' + max + ' of this item in stock');
      $(this).val(max); 
    }    
  });
});
</script>
{% endif %}

 

0 Likes
Shopify Partner
2522 25 549

The code uses update endpoint instead of add as this is the only one which can change/add multiple items in cart.

By default your form has 0 quantity for each item. When you submit it second time it changes the quantity of all items to what is set in form, and if any item in cart is in the form, its quantity is set to 0 unless form quantity was non-zero.

 

You have these options: 

1) When creating form, check each item and if it's already in cart, set it's quantity to cart quantity and warn visitors, that the form updates cart, not adds;

2) Use some javascript and remove/hide all lines where quantity is zero. But then again, if cart quantity of an item is 3 and form quantity is 1, it will update cart quantity to 1, so not quite a solution.

3) Make the javascript to update the form quantity by adding cart quantities on submit -- probably the best option.

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
1 Like
Highlighted
New Member
2 0 0

Hi Tim,

 

thank you. I know javascript, html, css but i am new to shopify's structure and liquid.

 

I would also like to go with the third option. How do i find the javascript code that runs when i press the button? And propably i should make another button that runs the modified code instead of using the standard call to "Add to cart"?

0 Likes