Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save zakhardage/6505030 to your computer and use it in GitHub Desktop.
Save zakhardage/6505030 to your computer and use it in GitHub Desktop.
Much simpler version of Shopify's option_selection.js for separating product options into their own dropdown menus.
<form action="/cart/add" method="post">
{% if product.variants.size > 1 %}
{% if product.options[0] %}
{% assign used = '' %}
<label for="select-one">{{ product.options[0] }}</label>
<select id='select-one' onchange="letsDoThis()">
{% for variant in product.variants %}
{% unless used contains variant.option1 %}
<option value="{{ variant.option1 }}">{{ variant.option1 }}</option>
{% capture used %}{{ used }} {{ variant.option1 }}{% endcapture %}
{% endunless %}
{% endfor %}
</select>
{% endif %}
{% if product.options[1] %}
{% assign used = '' %}
<label for="select-one">{{ product.options[1] }}</label>
<select id='select-two' onchange="letsDoThis()">
{% for variant in product.variants %}
{% unless used contains variant.option2 %}
<option value="{{ variant.option2 }}">{{ variant.option2 }}</option>
{% capture used %}{{ used }} {{ variant.option2 }}{% endcapture %}
{% endunless %}
{% endfor %}
</select>
{% endif %}
{% if product.options[2] %}
{% assign used = '' %}
<label for="select-one">{{ product.options[2] }}</label>
<select id='select-three' onchange="letsDoThis()">
{% for variant in product.variants %}
{% unless used contains variant.option3 %}
<option value="{{ variant.option3 }}">{{ variant.option3 }}</option>
{% capture used %}{{ used }} {{ variant.option3 }}{% endcapture %}
{% endunless %}
{% endfor %}
</select>
{% endif %}
{% endif %}
<input type="hidden"name="id" id="product-select" value="{{ product.variants.first.id }}" />
</form>
<script>
function letsDoThis() {
{% if product.options[0] %}var opt1 = document.getElementById('select-one').value;{% endif %}
{% if product.options[1] %}var opt2 = document.getElementById('select-two').value;{% endif %}
{% if product.options[2] %}var opt3 = document.getElementById('select-three').value;{% endif %}
var id = '';
{% for v in product.variants %}
if(opt1=="{{ v.option1 }}"{% if product.options[1] %} && opt2=="{{ v.option2 }}"{% endif %}{% if product.options[2] %} && opt3=="{{ v.option3 }}"{% endif %}) {
var id = {{ v.id }};
var price = "{{ v.price | money }}";
}
{% endfor %}
if(id!='') {
document.getElementById('product-select').value = id;
document.getElementById('price').innerHTML = price;
} else {
document.getElementById('product-select').value = '';
document.getElementById('price').innerHTML = 'Unavailable';
}
}
</script>
@skillmatic-co
Copy link

This doesn't seem to check inventory availability with multiple variant options.

@zakhardage
Copy link
Author

This doesn't seem to check inventory availability with multiple variant options.

What this doesn't do is a lot.

@skillmatic-co
Copy link

skillmatic-co commented Sep 9, 2020

This doesn't seem to check inventory availability with multiple variant options.

What this doesn't do is a lot.

What? Just wanted to comment because I used this method, but realized that it was allowing customers to choose sold out options. Unavailable options (where the variant doesn't exist given the options selections) works fine. I just modified the code a little bit to enable letsDoThis() to check for variant availability.

Edit: If anyone is interested to see what I did, view my fork here.

@Janak29
Copy link

Janak29 commented Jul 8, 2022

This is so great. Helped a lot in a recent project.

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