Order form to use in a page or collection template.

gistfile1.html

{% comment %}
Source: https://gist.github.com/davelowensohn/98b386c58ba09c00fa552e00a47d93ab
Forked from: 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" class="add-or-update-button" /><br>
    </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: 'grande' }}" 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 }}]" id="{{ 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>
      <input type="submit" value="Add to the cart" class="add-or-update-button" />
    </div>

  {% else %}
    <p>There are no products in this view.</p>
  {% endif %}

</form>

{% endpaginate %}

{% if collection.products_count > 0 %}
<script>
jQuery(function($) {

  // Prevent zeroing out of existing cart quantities:
  $.getJSON('/cart.js', response => {

    // Get list of items currently in cart, initialize updateFlag
    var items = response.items,
        updateFlag = null;

    // Cycle through cart items
    for (var i = 0; i < items.length; i++) {
      let thisItem = items[i],
          thisQty = thisItem.quantity,
          thisId = thisItem.id,
          targetInput = $(`input#${thisId}`) || null;

      // If current cart item has a qty picker on this page,
      // update picker to match cart qty & set updateFlag
      if (targetInput.length) {
        targetInput.val(thisQty);
        updateFlag = true;
      }

      // Otherwise, qty picker for that item stays at 0
    }

    // If one or more visible items is already in the cart, disambiguate
    // by changing button text from "Add..." to "Update..."
    if (updateFlag) {
      $('.add-or-update-button').val('Update cart');
    }

    return;
  });

  $('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 %}

Added some jQuery to prevent zeroing out of variant quantities that are already in cart & change button text from "Add..." to "Update..." when that's the case.

This was super helpful. Just one thing, each product line takes up more than half of my screen, which wasn't an issue I had when I originally copy and pasted Carolines code, Any fixes? Just trying to zoom out so at least 10 products lines can fit into the screen, if not more.

Oh nevermind, figured it out. Needed to change img_url: 'grande' to 'medium' or whatever size you want. Thank you, the updating cart feature totally works perfectly!!

Great update Dave! I have a collection with 500+ items in it. When add an item on page 1 to the cart, then return to page 2 of the collection, my stated quantity for that item is not there. Any ideas?

HI i was having the issue of it replacing my cart with new items so i came here. Now i get Uncaught ReferenceError: jQuery is not defined
at California-Naturals:1208

says jquery not defined.

'''

<script> jQuery(function($) { // Prevent zeroing out of existing cart quantities: $.getJSON('/cart.js', response => { // Get list of items currently in cart, initialize updateFlag var items = response.items, updateFlag = null; // Cycle through cart items for (var i = 0; i < items.length; i++) { let thisItem = items[i], thisQty = thisItem.quantity, thisId = thisItem.id, targetInput = $(`input#${thisId}`) || null; // If current cart item has a qty picker on this page, // update picker to match cart qty & set updateFlag if (targetInput.length) { targetInput.val(thisQty); updateFlag = true; } // Otherwise, qty picker for that item stays at 0 } // If one or more visible items is already in the cart, disambiguate // by changing button text from "Add..." to "Update..." if (updateFlag) { $('.add-or-update-button').val('Update cart'); } return; }); $('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>

'''

Great update Dave! I have a collection with 500+ items in it. When add an item on page 1 to the cart, then return to page 2 of the collection, my stated quantity for that item is not there. Any ideas?

Did you ever get that figured out?

I am not getting pagination, and my list is limited to 500 items. I need to get over the 500 item limit.

Added some jQuery to prevent zeroing out of variant quantities that are already in cart & change button text from "Add..." to "Update..." when that's the case.

Hi Dave, or anyone else. Is there a way to not add items with zero quantity to the cart? I am having an issue with a list of 1000 products, and only selected a few items to add to an order. Shopify alerts that the cart is limited to 500 items.

Any suggestions from anyone would be appreciated!

Hi @davelowensohn,

Thank you but it doesn't seem to be working on Dawn 6.0.2.
(I tested it on previous Minimal theme and it did work.)
Any chance of a 2.0 theme update? 🙏
I feel so bad about what my customers were going through with items disappearing - and I don't want to go back to my old theme;)

Cheers

Hi @davelowensohn,
Checking in to say that I am still looking for a solution for the form overwriting and removing items previously added to the cart. I'm using Dawn 2.0.
Thanks!

Hi @davelowensohn,
Yes, I am still looking for a solution for the form overwriting and removing items previously added to the cart. I'm using Dawn 6.0.
Thanks!

Apologies @lcools – I haven't touched this in years & have turned into one of those "no longer maintaining this" guys! Please do share if you get it figured out, since this seems to come up enough in Google. 🙏