Skip to content

Instantly share code, notes, and snippets.

@carolineschnapp
Last active March 7, 2024 08:53
Show Gist options
  • Star 48 You must be signed in to star a gist
  • Fork 18 You must be signed in to fork a gist
  • Save carolineschnapp/9122054 to your computer and use it in GitHub Desktop.
Save carolineschnapp/9122054 to your computer and use it in GitHub Desktop.
Order form to use in a page or collection template.
{% 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 %}
@lcools
Copy link

lcools commented Jan 28, 2020

Hi, Does anyone know how I can remove the border?

@tavisy
Copy link

tavisy commented Mar 29, 2020

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!

@tavisy
Copy link

tavisy commented Mar 29, 2020

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!

@tavisy
Copy link

tavisy commented Mar 29, 2020

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!

@rmanke
Copy link

rmanke commented Mar 30, 2020

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

@mhaseeb07
Copy link

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

@lcools
Copy link

lcools commented Jul 26, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment