Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save skillmatic-co/37236478ce5dfd1a1c87deae56443c45 to your computer and use it in GitHub Desktop.
Save skillmatic-co/37236478ce5dfd1a1c87deae56443c45 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] %}
<label for="select-one">{{ product.options[0] }}</label>
<select id="select-one" onchange="letsDoThis()">
{% for value in product.options_with_values[0].values %}
<option value="{{ value }}" {% if product.options_with_values[0].selected_value == value %}selected{% endif %}>
{{ value }}
</option>
{% endfor %}
</select>
{% endif %}
{% if product.options[1] %}
<label for="select-two">{{ product.options[1] }}</label>
<select id="select-two" onchange="letsDoThis()">
{% for value in product.options_with_values[1].values %}
<option value="{{ value }}" {% if product.options_with_values[1].selected_value == value %}selected{% endif %}>
{{ value }}
</option>
{% endfor %}
</select>
{% endif %}
{% if product.options[2] %}
<label for="select-three">{{ product.options[2] }}</label>
<select id="select-three" onchange="letsDoThis()">
{% for value in product.options_with_values[2].values %}
<option value="{{ value }}" {% if product.options_with_values[2].selected_value == value %}selected{% endif %}>
{{ value }}
</option>
{% endfor %}
</select>
{% endif %}
{% endif %}
<select name="id" id="product-select">
{% for variant in product.variants %}
<option
{% if variant == current_variant %}selected="selected"{% endif %}
{% unless variant.available %}disabled="disabled"{% endunless %}
value="{{ variant.id }}">
{{ variant.title }}
</option>
{% endfor %}
</select>
</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 == '') {
// Variant Not Found / Unavailable
document.getElementById('product-select').value = '';
document.getElementById('price').innerHTML = 'Unavailable';
history.pushState(null, null, '/products/{{ product.handle }}');
// Disable Add To Cart Button Here
} else if ($('#product-select option[value="' + id + '"]').prop('disabled') == true) {
// Sold Out
document.getElementById('product-select').value = id;
document.getElementById('price').innerHTML = 'Sold Out';
history.pushState(null, null, '/products/{{ product.handle }}?variant=' + id);
// Disable Add To Cart Button Here
} else {
document.getElementById('product-select').value = id;
document.getElementById('price').innerHTML = price;
history.pushState(null, null, '/products/{{ product.handle }}?variant=' + id);
// Enable Add To Cart Button Here
}
}
</script>
@Enz000
Copy link

Enz000 commented Nov 25, 2021

Hello,

Your piece of code doesn't work ^^

He don't check if the variant are available or not.

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