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 %}

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. 🙏