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

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