Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
{% 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 %}
{% if collection.products_count > 0 %}
<div class="action-bar top clearfix">
<h1 class="left">{% if template contains 'page' %}{{ page.title }}{% else %}{{ collection.title }}{% endif %}</h1>
<input class="action-button submit button btn right add-to-cart-order-form" type="button" 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 %}
{{ 'http://yui.yahooapis.com/pure/0.4.2/tables-min.css' | stylesheet_tag }}
<table class="pure-table pure-table-bordered">
<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="{{ product.url | collection }}">
<img src="{{ product.featured_image.src | product_img_url: 'thumb' }}" alt="{{ product.featured_image.alt | escape }}" />
</a>
</td>
<td>
<a href="{{ product.url | collection }}">
{{ product.title }}{% unless variant.title contains 'Default' %} - {{ variant.title }}{% endunless %}{% unless variant.sku == '' %} - {{ variant.sku }}{% endunless %}
</a>
</td>
<td>
{{ variant.price | money }}
</td>
<td style="text-align:right;">
<input onfocus="this.select()" class="quantity field" data-id="{{ variant.id }}" min="0" {% unless item.variant.inventory_management == blank or item.variant.inventory_policy == 'continue' %}{% assign max = variant.inventory_quantity %}{% for item in cart.items %}{% if item.id == variant.id %}{% assign max = max | minus: item.quantity %}{% endif %}{% endfor %} max="{{ max }}" {% endunless %} type="text" value="0" tabindex="1" />
</td>
</tr>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</tbody>
</table>
<div class="action-bar clearfix">
<input class="action-button submit button btn right add-to-cart-order-form" type="button" value="Add to the cart" />
</div>
{% else %}
<p>There are no products in this view.</p>
{% endif %}
{% endpaginate %}
{% if collection.products_count > 0 %}
<script>
Shopify.itemsToAdd = [];
Shopify.addItemstoTheCart = function() {
if (Shopify.itemsToAdd.length) {
var item = Shopify.itemsToAdd.pop();
$.ajax({
url: '/cart/add',
dataType: 'json',
type: 'post',
data: item,
success: Shopify.addItemstoTheCart,
error: Shopify.addItemstoTheCart
});
}
else {
window.location.href = '/cart';
}
};
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);
}
});
$('.add-to-cart-order-form').click(function() {
$('.add-to-cart-order-form').addClass('disabled').attr('disabled','disabled');
// Resetting.
Shopify.itemsToAdd = [];
$('.quantity').each(function() {
var quantity = parseInt($(this).val(), 10);
if (quantity) {
Shopify.itemsToAdd.push( { id: $(this).attr('data-id'), quantity: quantity } );
}
});
if (Shopify.itemsToAdd.length) {
Shopify.addItemstoTheCart();
}
else {
alert('All quantities are set to zero.');
$('.add-to-cart-order-form').removeAttr('disabled').removeClass('disabled');
}
});
});
</script>
{% endif %}
<style>
.action-bar { margin: 15px 0; }
.action-bar.top { margin: 30px 0 0; }
.action-bar h1 { margin:0; padding: 0; line-height:1 }
.left { float: left; }
.right { float: right; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* Additional styles for table */
table.pure-table { margin: 15px 0; width: 100%; }
table.pure-table tr td:first-child, table.pure-table tr th:first-child { padding-left: 12px; }
table.pure-table tr td:last-child, table.pure-table tr th:last-child { padding-right: 12px; }
table.pure-table img { float:left; padding: 5px 0; }
table.pure-table td { vertical-align: middle; }
.quantity { text-align: center; width: 60px !important; margin: 0 !important; }
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.