So I've got the drop down, I just need to get it to work*. I can't seem to figure it out.
*Work as in after you select a quantity and click add to cart it adds that amount to the cart. Defaults to 1 when nothings selected.
Here are the pages:
Here's the code from the product page:
<div id="mobile-product" class="sixcol">
<div class="flexslider">
<ul class="slides">
{% for image in product.images %}
<li><img src="{{ image.src | product_img_url: '1024x1024' }}" alt="{{ image.alt | escape }}"></li>
{% endfor %}
</ul>
</div>
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
directionNav: true
});
});
</script>
</div><div id="product-description" class="sixcol last">
<h1>{{ product.title | escape }}</h1><p id="product-price">
{% if product.compare_at_price > product.price %}
<span class="product-price" itemprop="price">{{ product.price | money }}</span> <span class="was">{{ product.compare_at_price_max | money }}</span>
{% else %}
<span class="product-price" itemprop="price">{{ product.price | money }}</span>
{% endif %}
</p>
<div class="product-sku">Item ID: {{ product.variants.first.sku }}</div>
<form action="/cart/add" method="post" id="{{ product.id }}" class="clearfix" data-money-format="{{ shop.money_format }}" data-option-index="{{ option_index }}" id="product-form-{{ product.id }}">
{% if product.available %}
{% if product.options.size > 1 %}
<select id="product-select-{{ product.id }}" name='id'>
{% for variant in product.variants %}
{% if variant.available %}
<option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% endif %}
{% endfor %}
</select>
{% elsif product.options.size == 1 and product.variants.size > 1 %}
<select id="product-select-{{ product.id }}" name='id'>
{% for variant in product.variants %}
{% if variant.available %}
<option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% endif %}
{% endfor %}
</select>
{% else %}
<div class="what-is-it">
{% if product.options.first != 'Title' %}
<label>{{ product.options.first }}:</label>{% for variant in product.variants %}<span class="it-is">{{ variant.option1 | escape }}</span>{% endfor %}
{% endif %}
</div>
<input type="hidden" id="{{ variant.id }}" name="id" value="{{ product.variants[0].id }}" />
{% endif %}
<input type="submit" name="button" id="add" value="Add to Cart" />
{% else %}
{% include 'snippet-wishlist-product' %}
<div class="sorry">
This product is temporarily unavailable.
</div>
{% endif %}
</form>
<select id = "dropdown">
<option selected="true" style="display:none;">Select Quantity:</option>
<option value = "1">One</option>
<option value = "2">Two</option>
<option value = "3">Three</option>
<option value = "4">Four</option>
<option value = "5">Five</option>
<option value = "6">Six</option>
<option value = "7">Seven</option>
<option value = "8">Eight</option>
<option value = "9">Nine</option>
<option value = "10">Ten</option>
</select>
<script type="text/javascript">
// <![CDATA[
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 buttonif ( variant.compare_at_price > variant.price ) {
jQuery('#product-price').html('<span class="now">'+ Shopify.formatMoney(variant.price, "{{ shop.money_format }}") +'</span>'+' was <span class="was"> '+Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}")+ '</span>'); // update price field
} else {
jQuery('#product-price').html('<span class="product-price">'+ Shopify.formatMoney(variant.price, "{{ shop.money_format }}") + '</span>' ); // update price field
}
} else {
// variant doesn't exist or is sold out
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
}
};
new Shopify.OptionSelectors("product-select-{{ product.id }}", { product: {{ product | json }}, onVariantSelected: selectCallback });
$('.single-option-selector').customSelect();
// 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');
{% endfor %}
{% endif %}
{% endfor %}
// ]]>
</script><div class="desc">
<div id="soc">
{% include 'social' with product %}
</div>
<p>{{ product.description }}</p>
{% if settings.show_tabs %}
<ul class="accordion">
{% unless settings.tab1 == blank %}
<li id="two" class="size">
<a href="#two"><h4>{{ settings.tab1_title }}</h4></a>
<ul class="sub-menu">
<li><p>{{ settings.tab1 }}</p></li>
</ul>
</li>
{% endunless %}
{% unless settings.tab2 == blank %}
<li id="three" class="delivery">
<a href="#three"><h4>{{ settings.tab2_title }}</h4></a>
<ul class="sub-menu">
<li><p>{{ settings.tab2 }}</p></li>
</ul>
</li>
{% endunless %}
{% unless settings.tab3 == blank %}
<li id="four" class="returns">
<a href="#four"><h4>{{ settings.tab3_title }}</h4></a>
<ul class="sub-menu">
<li><p>{{ settings.tab3 }}</p></li>
</ul>
</li>
{% endunless %}
{% if settings.show_related_products %}
<li id="five" class="returns">
<a href="#five"><h4>{{ settings.related_prod_title }}</h4></a>
<ul class="sub-menu">
<li>{% include 'related-products' %}</li>
</ul>
</li>
{% endif %}</ul>
<script type="text/javascript">
$(document).ready(function() {
// Store variables
var accordion_head = $('.accordion > li > a'),
accordion_body = $('.accordion li > .sub-menu');
// Click function
accordion_head.on('click', function(event) {
// Disable header links
event.preventDefault();
// Show and hide the tabs on click
if ($(this).attr('class') != 'active'){
accordion_body.slideUp('normal');
$(this).next().stop(true,true).slideToggle('normal');
accordion_head.removeClass('active');
$(this).addClass('active');
} else {
accordion_body.slideUp('normal');
accordion_head.removeClass('active');
}
});
});
</script> {% endif %}
</div>
</div><div class="clear"></div>
Any help would be greatly appreciated!