Skip to content

Instantly share code, notes, and snippets.

@drabbytux
Forked from carolineschnapp/pick-an-option.liquid
Created December 10, 2016 21:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save drabbytux/5900faeadebf84080cb562614ecc174a to your computer and use it in GitHub Desktop.
Save drabbytux/5900faeadebf84080cb562614ecc174a to your computer and use it in GitHub Desktop.
Make 'Pick an option' the default choice in product drop-down menus
{% comment %}
See https://docs.shopify.com/themes/customization/products/how-to-add-a-pick-an-option-to-drop-downs
{% endcomment %}
{% unless product.selected_variant %}
{% if product.variants.size > 1 %}
<script>
var $addToCartForm = $('form[action="/cart/add"]');
if (window.MutationObserver && $addToCartForm.length) {
if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
observer.disconnect();
}
var config = { childList: true, subtree: true };
var observer = new MutationObserver(function() {
{% for option in product.options %}
$('.single-option-selector:eq({{ forloop.index0 }})')
.filter(function() {
return $(this).find('option').size() > 1
})
.prepend('<option value="">Pick a ' + {{ product.options[forloop.index0] | json }} + '</option>')
.val('')
.trigger('change');
{% endfor %}
observer.disconnect();
});
observer.observe($addToCartForm[0], config);
}
</script>
{% endif %}
{% endunless %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment