Order form to use in a page or collection template.

gistfile1.html

{% 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 %}
              {% unless variant.requires_selling_plan %}
              <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>
              {% endunless %}
            {% endif %}
          {% endfor %}
        {% endif %}
      {% endfor %}
      </tbody>
    </table>
    
    <div>
      <input type="submit" value="Add to the cart" />
    </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 %}

When I click add to cart items are not adding to cart I get a blank cart. No Console errors on the order form page

Liquid error: Array 'collection.products' is not paginateable.

I see the same error posted at least twice with no apparent follow-ups. Is this tutorial orphaned?

Liquid error: Array 'collection.products' is not paginateable.

I see the same error posted at least twice with no apparent follow-ups. Is this tutorial orphaned?

If you are using this outside of a collection page, you have to move this statement out of the comments to the top of the code, and assign a collection to it for this code to work.

{% assign collection = collections.your-collection-handle-here %}

It took me a couple days to figure out so I thought I might save anyone who is trying to create a fillable order form some time. If you add an input box with the variant.id and create an ajax call you can have the order form create line items, like this fork. Really handy if you need to create an RFQ section for a business.

I've been using this form for some time. It's great!
However, I now have an issue now where I want to use a Low Stock Counter from Fera but it's not recognizing the stock amount for each single variant. Instead it only recognizes the total stock of the variants combined. I was told to add {{variant.stock}} to the form but I have no idea how to implement that. Can anyone steer me in the right direction? Thanks!

I fixed this by adding
{% if variant.inventory_quantity < 4 %} Only
{{ variant.inventory_quantity }} left
{% else %}
{% endif %}

Hi Caroline, 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, Does anyone know how I can remove the border?

this is probably a super silly question, but I have assigned the form to ONE collection and it works great. But what if I want to assign the form to one or more other collections?

What would the necessary code to assign to other collections? basically, I would need to do something like this:

{% assign collection = collections.your-collection-handle-here OR collections.second-collection OR collections.third-collection %}

It works great if only one collection assigned, but I can't get it to work for any additional/other collections.

thanks in advance!

this is probably a super silly question, but I have assigned the form to ONE collection and it works great. But what if I want to assign the form to one or more other collections?

What would the necessary code to assign to other collections? basically, I would need to do something like this:

{% assign collection = collections.your-collection-handle-here OR collections.second-collection OR collections.third-collection %}

It works great if only one collection assigned, but I can't get it to work for any additional/other collections.

thanks in advance!

I MacGyvered a way to make it work for the second collection page that required the form with an { % if collection.handle == } statement on the original collections.liquid page, but it will get very messy if I wanted to do this on multiple collections. Hoping there's a way to reuse/distribute the same form code to different collections just based on whatever variation of {%assign collection = } is required to assign to collection1 or collection2 or collection3 etc etc...

thanks for any help!

Is there a way to have my variants listed in a drop down menu in a column on the default product instead of listed out as individual products?

and interested if this was answered as well! thx!

Is this still actively being developed? I have an issue with it not paginating products.

Is there a way to have my variants listed in a drop down menu in a column on the default product instead of listed out as individual products?

and interested if this was answered as well! thx!

same here

Still using this form - it's awesome, except that if the customer goes back to add more items, or if they already had items in the cart, these are rewritten/deleted. I haven't found a better solution. Crossing my fingers that someone will pick this back up.