Last active
March 7, 2024 08:53
-
-
Save carolineschnapp/9122054 to your computer and use it in GitHub Desktop.
Order form to use in a page or collection template.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% 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 %} |
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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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!