Shopify Option Selectors Issue

Question

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 %}

});```

    

question from:https://stackoverflow.com/questions/65842450/shopify-option-selectors-issue

Answer 1

Waitting for answers