geoff-p
11/1/2013 - 7:12 AM

Shopify tiered pricing using javascript (non-app). This example has the quantity breaks controlled by theme settings.

Shopify tiered pricing using javascript (non-app). This example has the quantity breaks controlled by theme settings.

// config -> settings.html
// Make sure you have the same number of quantity breaks as product variants
<fieldset>
	<legend>Quantity Breaks</legend>
	<table class="standard-table">
		<tr><td>Enter quantity breaks in ascending order separated by a comma (e.g. 5, 10, 20, 50)</td><td><input type="text" name="breaks" size="50" /></td></tr>
	</table>
</fieldset>



// templates -> product.liquid
<table>
	<tr><th>QTY</th><th>PRICE PER {{ product.options[0] }}</th></tr>
	{% for variant in product.variants %}
		<tr><td>{{ variant.title }}</td><td>{{ variant.price | money }}</td></tr>
	{% endfor %}
</table>

<form action="/cart/add" method="post">
	<label>Quantity: </label>
	<input type="text" id="quantity" name="quantity" onkeyup="quantityUpdate(this.value)" value="1" onclick="this.select()" />
	<input type="hidden" name="id" id="product-select" value="{{ product.variants[0].id }}" />
	<button type="submit"></button>
</form>

{% assign breaks = settings.breaks | split:', ' %}
<script type="text/javascript">
	function quantityUpdate(quantity){
		var qty = parseInt(quantity);
		var break;
		var variant = new Array();
		{% for variant in product.variants %}
			variant[{{ forloop.index | minus:1 }}] = "{{ variant.id }}";
		{% endfor %}
		{% for break in breaks reversed %}
			break = parseInt({{ break }});
			if(qty < break) {document.getElementById("product-select").value = variant[{{ forloop.index | minus:1 }}];}
		{% endfor %}
	}
</script>