d
Topic
Posts:
19
November 30, 2009

Radio Buttons for product variations? This post is outdated

So I found bunch of topics that people want to change from radio buttons to drop down menus for their product variations like size and colors.

Mine template is already set to drop down menu. How do I make it a radio button?

This is something that I am trying to achieve for radio button if it helps.

http://www.shopify.com/examples/browse/

Pouchee example!

 

Thank you!

 

V.

www.owl-design.net www.killingbeverly.myshopify.com
i
Replies
Jamie Chief Officer of Funness shopify.com/plus
Posts:
5852
Last edited November 30, 2009
    <form action="/cart/add" method="post">
<h3>Variations of this product</h3>
<ul id="variants">
{% for variant in product.variants %}
<li>
{% if variant.available == true %}
<input type="radio" name="id" value="{{variant.id}}" id="radio_{{variant.id}}" {%if forloop.first%} checked="checked" {%endif%} />
<label for="radio_{{variant.id}}">{{ variant.price | money_with_currency }} - {{ variant.title }}</label>
{% else %}
<span>Sold Out! - {{ variant.title }}</span>
{% endif %}
</li>
{% endfor %}
</ul>

<ul class="add-btn">
<input type="submit" name="add" value="Add to Cart" id="add" class="add-to-cart" />
</ul>

</form>

 

Just a simple example for you on the radio buttons

:)

http://shopifyplus.com ::: http://twitter.com/bacchus
Posts:
19
December 01, 2009

Yes! Getting there. However, this for you probably piece of cake. I have another question.

This is what it's doing after the code:

  • <label for="radio_20">$ 59.00 USD - brown / small</label>
  • Sold Out! - brown / medium
  • <input name="id" type="radio" id="radio_22" value="22" /> <label for="radio_22">$ 59.00 USD - brown / large</label>
  • <input name="id" type="radio" id="radio_23" value="23" /> <label for="radio_23">$ 59.00 USD - black / small</label>
  • <input name="id" type="radio" id="radio_24" value="24" /> <label for="radio_24">$ 59.00 USD - black / medium</label>
  • Sold Out! - black / large

How can I separate it all. Like have radio options for Just sizes, Then another option just for Color and keep pricing as one by it self not like what happens above!

This is great. I love copy and paste!

Any suggestions?

V.

 

ps. Is there manuals? I'm trying to look all over the place, I don't know if shopify is new or what but they seem to not have much tutorials on this stuff hmm..

www.owl-design.net www.killingbeverly.myshopify.com
Posts:
19
December 01, 2009

Sorry! Here's a better view.

 

Untitled 1 thumb
www.owl-design.net www.killingbeverly.myshopify.com
Jamie Chief Officer of Funness shopify.com/plus
Posts:
5852
December 01, 2009

Yep what you're looking for is going to take some larger weaponry than I have time for ATM (looming AM deadline). If you don't have something by tomorrow bump this and I'll check back. And yes there are manuals but you're sort of pushing an edge case with what you're trying to do.

http://shopifyplus.com ::: http://twitter.com/bacchus
Posts:
5840
December 01, 2009

Edge case indeed.

We're talking about overriding a bunch of JavaScript functions defined in option_selections.js, lighting up some candles and hoping for the best.

Try it. If you come back alive from your adventure, share some stories with us.

:-)

Thanks in advance,

Caroline

 

 

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
Posts:
19
December 01, 2009

Wooo that sounds like a journey. Where is the option_selections.js located? Is not in the assets folder.

I must make this my mission!

www.owl-design.net www.killingbeverly.myshopify.com
Posts:
5840
Last edited December 01, 2009

It is in global assets.

So you can access it from any store at

/shopify/option_selection.js

For your shop, that's here:

http://killingbeverly.myshopify.com/shopify/option_selection.js

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
Jamie Chief Officer of Funness shopify.com/plus
Posts:
5852
December 01, 2009
http://shopifyplus.com ::: http://twitter.com/bacchus
Posts:
19
December 04, 2009

Nice. I will take a look at that, that actually might help me. Thx!

www.owl-design.net www.killingbeverly.myshopify.com