Skip to content

Instantly share code, notes, and snippets.

@zakhardage
Last active April 19, 2022 10:53
Show Gist options
  • Save zakhardage/7261874 to your computer and use it in GitHub Desktop.
Save zakhardage/7261874 to your computer and use it in GitHub Desktop.
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>
@shkoober
Copy link

I'm not sure how to 'wrap' in the code, do I just paste in the segment ?

@shkoober
Copy link

has anyone successfully implemented this? it seems to me to just be a variant...doesn't actually pull from the same inventory entry...

@leezimu516
Copy link

Does Anyone know how to implement this. I follow the steps, it seems like adding a variant which can't update the price automatically?

@aaliyan111
Copy link

aaliyan111 commented May 10, 2017

@abhishekj
Copy link

Any one has a solution without creating a variant per rate?

Let us know too,
thanks

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