Variant Price in Multiple Option Selectors - Shopify Way

Shopify Partner
21 0 2

Hello :)

I'm trying to achieve something that would seem obvious, except I cannot figure out how to put in the code below.

I'd like to put the variant price both into the dropdown and onto the page (I'm using the Shopify multiple variant dropdown code).  The code seems to pull the variant price and update (using Json) the main price on the page which is great, BUT, I'd also like to keep it in the option, as form a UX point of view, this is helpful so the user can see all the prices at a glance.

I imagine that all I need to do is pass the variant.price back into the JS somehow, but I'm at a loss as to how I might do this.

Any help would be really appreciated.

Cheers, 

Simon

 

{% if product.variants.size > 1 %}
<script>

  $(function() {

    // This is the callback which is fired every time
    // variant selectors are changed. It determines
    // whether or not the selected combinations of options
    // exists as a variant, wheter that variant is available,
    // and then updates prices accordingly.

    var addToCart = $('.add-product')
    var priceArea = $('.product-details .product-price')

    var selectCallback = function(variant, selector) {

      // Does the combination of options exist as a variant?
      if (variant) {

        // Is variant available?
        if (variant.available) {
          addToCart.val('Add to cart').removeClass('disabled').fadeTo(200,1);
        } else {
          addToCart.val('Sold Out').addClass('disabled').fadeTo(200,0.5);
        }

        // Whether the variant is in stock or not, we can update the price and compare at price.
        if ( variant.compare_at_price > variant.price ) {
          priceArea.html('<span class="price on-sale"><span class="original">'+ Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}") +'</span> '+Shopify.formatMoney(variant.price, "{{ shop.money_format }}")+ '</span>');
        } else {
          priceArea.html('<span class="price">'+ Shopify.formatMoney(variant.price, "{{ shop.money_format }}") + '</span>' );
        }

      } else {
        // variant doesn't exist.
        addToCart.val('Unavailable').addClass('disabled').fadeTo(200,0.5);
      }

    };

    // This object grabs the $('#product-select') element, and breaks its into
    // multiple options select elements.
    new Shopify.OptionSelectors('product-select', { product: {{ product | json }}, onVariantSelected: selectCallback });

    function setUpProductData() {
      window.product = {{ product | json }};
    }
    setUpProductData();

    $('.selector-wrapper').each( function () {
      $(this).find('select').wrap('<div class="select-wrapper" />');
      $(this).find('.select-wrapper').prepend('<div class="select-text" />');
    });

    // Add label if only one product option and it isn't 'Title'.
    {% if product.options.size == 1 and product.options.first != 'Title' %}
      $('.selector-wrapper').prepend('<label>{{ product.options[0] }}</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 %}
        $('.single-option-selector:eq({{ forloop.index0 }})').val({{ variant.options[forloop.index0] | json }}).trigger('change');
        {% endfor %}
      {% endif %}
    {% endfor %}

  });

</script>
{% endif %}

 

0 Likes
Shopify Expert
465 0 35

The issue here is going to be that each of your dropdowns will have the price in them which from a UX perspective will confuse them more right?

Trevor www.carlowseo.com
0 Likes
Shopify Partner
21 0 2

Hi CarlowSEO.

At the moment, the Price 'does not' appear in the Select drop down, and therefore the needs to select each option in order to see how much the price for that option might be (eg Small, Medium, Large, Deluxe) - that's 4 clicks per product.

What I'm trying to achieve is have each price listed alongside each variant in the dropdown, so the user can see all prices at once in one glance (leaving the in-page one there as well).  

Any thoughts on the code? UX-wise I'm happy this is a better solution than the one the theme comes with.

Cheers, 

Simon

Link to image

 

0 Likes
Shopify Expert
465 0 35

How many drop downs do you have per product? Is it just one?

If that is the case then why use the multi option selectors?

Trevor www.carlowseo.com
0 Likes
Shopify Partner
21 0 2

The theme comes packaged with the multi option selectors, and it is something the client might like to use in future, so I'm happy to keep it.  I would just like to pass the price back into the options when they're rendered, any ideas on the code?

Cheers,

Simon

 

 

 

0 Likes
Shopify Expert
465 0 35

Don't think it is that possible. You would have to modify the option_selection.js and when a user has multiple dropdowns in the future it will get tricky and complex.

Trevor www.carlowseo.com
0 Likes
Shopify Partner
21 0 2

Thanks CarlowSEO...I'm guessing I wouldn't have access to that?  I could host a version locally and have at it there, but like you say, might not be worth the hassle? Shopify, any thoughts?

Cheers, 

Simon

p.s I can get the Client to add the price to the Variant title if needs be as well.

0 Likes
Shopify Expert
465 0 35

What is the original theme?

Trevor www.carlowseo.com
0 Likes
Shopify Partner
21 0 2
Shopify Expert
465 0 35

I think HunkyBill solved something like this in the past here

// initialize multi selector for product      

jQuery(document).ready(function() {
	var product_json = {{ product | json }};
	jQuery("#optlist").html(product_json.options.join(", "));			
	jQuery('#product-select').change(function(e) { 
		var t = e.target || e.srcElement,
		    variantId = t.options[t.selectedIndex].value;
		    variant = null;
		
		for(var v = 0, l = product_json.variants.length; v < l; v = v + 1 ) {
			if(product_json.variants[v].id == variantId) {
				variant = product_json.variants[v];
				selectCallback(variant);
				break;
			}
		}
	 });
   jQuery('#product-select').change();
});                         

// ... code removed for brevity ...
// ]]>
</script>

 

Trevor www.carlowseo.com
0 Likes