Use option_selection.js, but keep variants in one dropdown menu?

Shopify Partner
39 0 0

Hi everyone.

I'm using option_selection.js and want to have my variants displayed combined into one dropdown menu. 

If for example i have a size variant with these options: 
13
15
17

And a color variant with these options:
Brown
Black
Blue 

And what to have them shown in a dropdown menu like this:

13 - Brown
13 - Black
13 - Blue
15 - Brown
15 - Black
etc. 

Currently option_selection.js is splitting it into two different dropdown lists. I'm quite the rookie at javascript, but i've looked it over and can't seem to figure out what to do. Havn't been able to find much documentation about the usage of option_selection.js. 

My code is(from solo theme):

<form method="post" action="/cart/add">{% if product.variants.size > 1 %}
    			<!-- START VARIANTS -->
				<div id="variants">
					<div class="border">
						<select name="id" id="id">{% for variant in product.variants %}{% if variant.available %}
							<option value="{{ variant.id }}">{{ variant.title | escape }} ({{ variant.price | money }})</option>{% else %}
							<option value="{{ variant.id }}" disabled="disabled">{{ variant.title | escape }} ({{ variant.price | money }}) - Udsolgt</option>{% endif %}{% endfor %}
						</select>
					</div>
				</div>
				<!-- END VARIANTS -->{% else %}{% for variant in product.variants %}
				<input type="hidden" name="id" value="{{ variant.id }}" />{% endfor %}{% endif %}
				<!-- START BUY -->
				<div id="buy" class="clear">{% if product.available %}
					<h2 id="price"><span>{{ product.price | money }}</span>{% if product.compare_at_price_max > product.price %} <del>{{ product.compare_at_price_max | money }}</del>{% endif %}</h2>
					<input type="image" src="{{ "add.png" | asset_url }}" alt="BUY THIS" id="add" />{% else %}
					<h6>Sold Out</h6>{% endif %}
                    
				</div>
                 <div id="betaling">
                 <img src="{{ "Betaling-Levering.jpg" | asset_url }}" alt="Betaling og Levering" />
                 </div>
                 
				<!-- END BUY -->
			</form>
{% if template == "product" %}{% if product.available %}{% if product.variants.size > 1 %}
    <script type="text/javascript">
		// <![CDATA[
		var selectCallback = function(variant, selector) {
			if (variant && variant.available == true) {
				$("input#add").removeClass("disabled").removeAttr("disabled");
				$("h2#price span").html(Shopify.formatMoney(variant.price, "{{ shop.money_format }}"));
				if ($("h2#price del").length > 0) {
					$("h2#price del").html(Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}"));
				};
			} else {
				$("input#add").addClass("disabled").attr("disabled", "disabled");
				var message = variant ? "Sold Out" : "Unavailable";
				$("h2#price span").text(message);
				if ($("h2#price del").length > 0) { $("h2#price del").text(""); };
			}
		};
		$(function() {
			new Shopify.OptionSelectors("id", { product: {{ product | json }}, onVariantSelected: selectCallback });
		});
		// ]]>
	</script>{% endif %}{% endif %}{% endif %}

Any help is greatly appriciated. 

 

CoverMe.dk - Design Laptop Covers
0 Likes
Highlighted
Shopify Partner
39 0 0

I've ended up just going with the current viewing, as many people seemed to prefer that anyways.

CoverMe.dk - Design Laptop Covers
0 Likes
Tourist
10 0 1

So Shopify doesn't provide a way to return to the "old single variant drop down"? That's just dumb. Shopify, how do I do this, my client want's a single drop down by variant.

0 Likes