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

I am using the minimal theme. Is there a way I can get the list view as in your Demo rather than the minimal theme tiled view?

Thank you so much for this. I am trying to add order forms to a few different pages, using collections, and I thought that it made sense to add "page.order-form-two" and then copy-paste your above code, and name the second collection to draw from in here: {% assign collection = collections.your-collection-handle-here %} - however it's not working. I am new to shop building, and new to code (and surprised that I managed to implement what you've explained above!). I am using minimal theme. Can anyone point me in the right direction, please?! :)

The cart resets every time the form is submitted for me. If I have a customer that forgot to add a product to their cart from a certain collection, is there a way to not reset the cart when the form is submitted?

Hi , I really appreciate all your work. Quick question, can you add a search form in order to select the products easily, in my case we have like 180 products and it would be better to look for the product by name. Thanks!

Thanks for this Caroline, works great!

Quick question, how can I change how the products are sorted? I would like to display them in alphabetical order

Hi Caroline,

I have the same issue as @nwlemmer, When adding to cart from two different collection it works but when adding to cart from same collection it reset the cart.

Do you have any idea what could cause this issue?

Kind regards,

Form works great - but is there a way to set a minimum quantity total for the items added? I need to have a minimum of 6 total items (can be 1 of each line-item, or 6 of one line-item) before they can add to the cart (preferably with a message that will display "you need a minimum of 6 total items before you can add to cart).

any help appreciated!!
thanks

How can this be altered to add a dropdown menu to select the desired variant rather than listing each variant individually? Thanks for posting this code!

I'd love to see a version with a dropdown menu to select variants (rather than listing variants individually), too. Thanks!

Has a resolution been found the the problem @mwlemmer and @Sayukat were having in 2016 where cart resets every time form is submitted? I am having the same trouble. Customer adds one piece from a collection, goes back later if they want another piece from the collection, anything they add on the second round supercedes what was in the car previously. Would love some help with this. Used the code exactly as provided.

@nwlemmer @Sayukat @Bandiwear - probably too late to be helpful, but check out my fork of this gist, it uses some simple AJAX + jQuery to populate the inputs with existing cart quantities & change the button from "Add..." to "Update..." when that's the case.

Hi Caroline, this order form is exactly what I needed! I have managed to add another column so I have original price and sale price but I need to make my sale price red, any help with this would be great! Thanks

Hi caroline, How can I apply a discount to this order form??? Any help with this would be great! Thanks

Hi, caroline, can you help me to, how i display some products below a product. After that i want add all to cart button. to add all to cart.

It looks great and is exactly what I need save for a couple of... vittles, but when I go to add items to the cart, even selecting just one, clicking "add to cart" leads to "Cart Error: Your cart can't contain more than 500 items." Do I just have too many variants or what can I do? Any help would be massively appreciated.

Did you ever get this fixed? Has anyone else run into this issue?

Hello Caroline, thank you for this great tutorial. I wonder what this name="updates[{{ variant.id }}]" attribute do? I want to make it a radio type input because I have two group of products and I only want to select one of each product, like a bundle.

Thanks

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

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.