Shopify Option Selectors Issue

CelinaFregoso
New Member
3 0 0

I am literally stuck on something which you would think is quite simple, but I can't seem to find an answer to this.

My option selector has title and price but using the Shopify.OptionSelectors I can't seem to find out to put the price back in the select area?.

Option Selectors

{% for variant in product.variants %}
{% if variant.available %}
<option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% else %}
<option placeholder="Sold out" value="{{ variant.id }}">{{ variant.title }} - Sold out</option>
{% endif %}
{% endfor %}
</select>
jQuery(function() {

// OPTION SELECT
{% if product.available and product.variants.size > 1 %}

{% assign look_for_image_match = false %}
{% assign option_index = 0 %}
{% for option in product.options %}
{% assign downcased_option = option | downcase %}
{% if downcased_option contains 'color' or downcased_option contains 'colour' or downcased_option contains 'style' %}
{% assign look_for_image_match = true %}
{% assign option_index = forloop.index0 %}
{% endif %}
{% endfor %}


Shopify.doNotTriggerClickOnThumb = false;

var selectCallback = function(variant, selector) {

if (variant && variant.available) {

// selected a valid variant that is available.

jQuery('#add').removeClass('disabled').removeAttr('disabled').val('Add to Cart').fadeTo(200,1); // remove unavailable class from add-to-cart button, and re-enable button

// if item is backordered yet can still be ordered, we'll show special message.

if (variant.inventory_management && variant.inventory_quantity <= 0) {
jQuery('#selected-variant').html({{ product.title | json }} + ' - ' + variant.title);
jQuery('#backorder').removeClass("hidden").fadeTo(200,1);
} else {
jQuery('#backorder').fadeTo(200,0).addClass("hidden");
}

if ( variant.compare_at_price > variant.price ) {
jQuery('#product-price').html('<span class="product-price on-sale">'+ Shopify.formatMoney(variant.price, "{{ shop.money_format }}") +'</span>'+'&nbsp;<span class="product-compare-price">'+Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}")+ '</span>'); // update price field
} else {

// update price field

jQuery('#product-price').html('<span class="product-price money">'+ Shopify.formatMoney(variant.price, "{{ shop.money_format }}") + '</span>' );
}

{% if settings.show_multiple_currencies %}
Currency.convertAll(shopCurrency, jQuery('[name=currencies]').val(), 'form[action="/cart/add"] span.money');
{% endif %}

} else {

// variant doesn't exist or is sold out

jQuery('#backorder').fadeTo(200,0).addClass("hidden");
var message = variant ? "Sold Out" : "Unavailable";
jQuery('#add').val(message).addClass('disabled').attr('disabled', 'disabled').fadeTo(200,0.5); // set add-to-cart button to unavailable class and disable button
}

};

var data = new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback });

console.log(data);

// jQuery('.single-option-selector').addClass('special-select').customStyle();

// Add label if only one product option and it isn't 'Title'.

{% if product.options.size == 1 and product.options.first != 'Title' %}
jQuery('.selector-wrapper:eq(0)').prepend('<label>{{ product.options.first }}</label>');
{% endif %}

// Auto-select first available variant on page load.

{% assign found_one_in_stock = false %}
{% for variant in product.variants %}
{% if variant.available and found_one_in_stock == false %}
{% assign found_one_in_stock = true %}
{% for option in product.options %}
jQuery('.single-option-selector:eq({{ forloop.index0 }})').val({{ variant.options[forloop.index0] | json }}).trigger('change');
// BEGIN SWATCHES
jQuery('.swatch li').filter(function() { return jQuery(this).attr('data-option-title') === {{ variant.options[forloop.index0] | json }} }).addClass('selected');
// END SWATCHES
{% endfor %}
{% endif %}
{% endfor %}

// BEGIN SWATCHES
jQuery('.swatch li').click(function() {
var optionIndex = jQuery(this).parents('.options').attr('data-option-index');
var optionValue = jQuery(this).attr('data-option-title'); // what have I just clicked on?
jQuery(this).parents('.swatch').find('li').removeClass('selected'); // un-select all the buttons
jQuery(this).addClass('selected'); // select the current one
jQuery('.single-option-selector').eq(optionIndex).find('option').filter(function() { return jQuery(this).text() == optionValue }).parent().val(optionValue).trigger('change');
return false;
});
// END SWATCHES

{% if look_for_image_match %}

// If a Color is selected, show the matching product image.

jQuery('.single-option-selector:eq({{ option_index }})').bind('change', function() {
if (!Shopify.doNotTriggerClickOnThumb) {
jQuery('#product-photo-thumbs img[alt="' + jQuery(this).val() + '"]:eq(0)').trigger('click');
}
Shopify.doNotTriggerClickOnThumb = false;
return true;
});

// If an image is shown in Main View, auto-select the corresponding Color option.

jQuery('#product-photo-thumbs img').bind('click', function() {
var color = jQuery(this).attr('alt');
if (color && color !== '') {
var options = jQuery('.single-option-selector:eq({{ option_index }}) option[value="' + color + '"]');
if (options.size() !== 0) {
Shopify.doNotTriggerClickOnThumb = true;
jQuery('.single-option-selector:eq({{ option_index }})').val(color).trigger('change');
// BEGIN SWATCHES
var found_a_swatch = false;
jQuery('.swatch li').each(function() {
if (!found_a_swatch && (jQuery(this).attr('data-option-title') === color)) {
found_a_swatch = true;
jQuery(this).parents('.swatch').find('li').removeClass('selected'); // un-select all the buttons
jQuery(this).addClass('selected');
}
});
// END SWATCHES
}
}
return true;
});
{% endif %}

{% endif %}

});```

0 Likes
annahernandez99
New Member
3 0 0

I think you not changed the variants? Products -> your product, add a variant or change price/name of current.

0 Likes