roodesign Shopify Partner roodesign.co.uk
February 14, 2012

force option_selections js to return new results This post is outdated

Hey all,

Please see my shopify product at : http://clairejones.myshopify.com/products/heart-sign

I'm using the (brilliant) option_selections.js (thanks Shopify!) to break out my multiple options into separate drop downs. However, I need to add the following functionality:

  • Add in a "Please select" to the top of all dropdowns
  • Initially disable the checkout button.
  • When the user selects any option from ANY of the drop-downs, have the script select the first "real" option in all the other drop-downs. It should do this ONLY  the first time anything is selected.

SO, I've got the following code:

var virginSelect = false;
var selectCallback = function(variant, selector) {
		if(virginSelect) {
			$('.single-option-selector').each(function() {
				if($(this).val != "_none_") {
					$('option', this).removeAttr('selected');
					$('option:eq(1)', this).attr('selected','selected');
			virginSelect = false;
		if (variant && variant.available == true) {
		    // selected a valid variant
		    jQuery('#price-field').html(Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}")); 
		  } else {
		    // variant doesn't exist
		    jQuery('#purchase').addClass('disabled').attr('disabled', 'disabled');
		    var message = variant ? "Sold Out" : "Unavailable";
		    jQuery('#price-field').text(message); // update price-field message

// initialize multi selector for product
jQuery(function() {
  	new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback });
	//replace the first option with a "please choose"
	$('.single-option-selector').each(function() {
		$(this).prepend('<option value="_none_" selected="selected">Please choose</option>');
		jQuery('#purchase').addClass('disabled').attr('disabled', 'disabled');
		$('#price-field').text('Select options'); // update price-field message
	window.virginSelect = true;

But after auto-selecting all other 1st options, I need to force the options_selctions js to bring back the correct results. Any ideas?


Hope this makes sense! Thanks.

Jon Roobottom | http://roodesign.co.uk