Variant Price in Multiple Option Selectors - Shopify Way

Shopify Partner
21 0 2

I tried integrating that code, but I couldn't get it to honour the styling/other clever bits and pieces going on.  A penny for your thoughts on how to sneak that code into the original code I posted?  Any help would be much appreciated.

Cheers, 

Simon

 

 

0 Likes
Shopify Expert
465 0 35

I think HunkyBill is the best person to ask. I would need to have access to the store to play around with it until it is right... 

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

No problem CarlowSEO, I'll ask HunkyBill(!) to see if he has any thoughts.

Thanks for all your help though, and I'll try and post up a solution.

Cheers, 

Simon

 

 

0 Likes
Shopify Expert
9778 86 1524

Not sure what you're needing here but...

$('.selector-wrapper').each( function () {
  var t = $(this);
  t.find('select').wrap('<div class="select-wrapper" />').find('.select-wrapper').prepend('<div class="select-text" />').end().find('option').each(function(index){
    $(this).append(': ' +Shopify.formatMoney(window.product.variants[index].price));
  });
});

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Shopify Partner
21 0 2

Hi Jason, thanks so much for your input! That code alllllllmost does what I'm trying to do, except for two things:

  1. The dropdown appears blank even though it populates the options once you've clicked on it
  2. The currency is dollars and doesn't call the currency_format ...how would I get currency_format in there? (as in here: http://docs.shopify.com/support/other/general-information/tutorial-on-using-product-javascript)

    +Shopify.formatMoney(window.product.variants[index].price

Thank you so much again, 

Simon

 

 

0 Likes
Shopify Partner
21 0 2

Hi Jason, 

I've managed to solve number 2, by using the following version of your code:

$('.selector-wrapper').each( function () {
  var t = $(this);
  t.find('select').wrap('<div class="select-wrapper" />').find('.select-wrapper').prepend('<div class="select-text" />').end().find('option').each(function(index){
    $(this).append(': ' +Shopify.formatMoney(window.product.variants[index].price, "{{ shop.money_format }}"));
  });
});

 

0 Likes
Shopify Partner
21 0 2

So I think the issue is that the 

<div class="select-text"> Option Title </div>

that is generated in the old code, doesn't appear in the new code.  Does that make sense?  I can't see why that wouldn't be working as you have 

.prepend('<div class="select-text" />')

 

What do you think?

Cheers, 

Simon

 

0 Likes
Shopify Partner
21 0 2

Woooop! Thanks for all your help everybody, especially Jason.  I finally fixed it with the following code:

$('.selector-wrapper').each( function () {
    var t = $(this);
    
    t.find('select').find('option').each(function(index){
      $(this).append(': ' +Shopify.formatMoney(window.product.variants[index].price, "{{ shop.money_format }}"));
    });
      $(this).find('select').wrap('<div class="select-wrapper" />');
      $(this).find('.select-wrapper').prepend('<div class="select-text" />');
    });

 

0 Likes
Shopify Expert
9778 86 1524

Nice one - glad to hear you got it sorted ;)

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Shopify Expert
465 0 35

Nice work... there are others looking for that solution out in the normal forums as well

Trevor www.carlowseo.com
0 Likes