dima7b
10/7/2013 - 10:18 AM
Sample code for Stack Overflow question about using radio buttons for Shopify variants (http://stackoverflow.com/questions/19085276/shopify-
Sample code for Stack Overflow question about using radio buttons for Shopify variants (http://stackoverflow.com/questions/19085276/shopify-variants)
<head>
...
{{ 'http://code.jquery.com/ui/1.10.3/jquery-ui.js' | script_tag }}
{{ 'http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css' | stylesheet_tag }}
</head><style type="text/css">
del { font-size:70%; color:#777 }
ul { list-style:none; text-align:left; padding-left:0 }
p { text-align:left }
li label { font-weight:bold }
li span { padding-left:20px }
</style>
<div class="product-page clearfix">
<div class="product-images left">
<div class="product-featured-image">
<a href="{{ product.featured_image.src | product_img_url: 'original' }}">
<img src="{{ product.featured_image.src | product_img_url: 'grande' }}" alt="{{product.featured_image.alt | escape }}" />
</a>
</div>
<div class="product-img-list clearfix">
{% for image in product.images | offset:1 %}
<div class="product-img left {% cycle '','','last' %}">
<a href="{{ image.src | product_img_url: 'original' }}">
<img src="{{ image.src | product_img_url: 'small' }}" alt="{{ image.alt | escape }}" />
</a>
</div>
{% endfor %}
</div>
</div>
<div class="product-details left">
<h2 class="product-title">{{ product.title }}</h2>
<div class="product-desc rte">{{ product.description }}</div>
<div class="price-field">
{% if product.compare_at_price > product.price %}
<del>{{ product.compare_at_price | money_with_currency }}</del>
{% endif %}
<span>{{ product.price | money_with_currency }}</span>
</div>
<form action="/cart/add" method="post" class="product-form">
<p>Shipping Date: <input type="text" id="datepicker" /></p>
<script>
function updateDeliveryDates(dateText, inst) {
var dateArray = dateText.split("/");
var selectedDate = new Date(parseInt(dateArray[2]), parseInt(dateArray[1]) - 1, parseInt(dateArray[0]), 0, 0, 0, 0);
var standardShippingDate = new Date(selectedDate.getTime());
standardShippingDate.setDate(selectedDate.getDate() + 5);
var express3DayShippingDate = new Date(selectedDate.getTime());
express3DayShippingDate.setDate(selectedDate.getDate() + 3);
var express2DayShippingDate = new Date(selectedDate.getTime());
express2DayShippingDate.setDate(selectedDate.getDate() + 2);
jQuery("#delivery-date-10000").html("Earliest: " + jQuery.datepicker.formatDate('dd/mm/yy', standardShippingDate));
jQuery("#delivery-date-11500").html("Guaranteed by " + jQuery.datepicker.formatDate('dd/mm/yy', express3DayShippingDate));
jQuery("#delivery-date-12500").html("Guaranteed by " + jQuery.datepicker.formatDate('dd/mm/yy', express2DayShippingDate));
// Set hidden line item property when delivery date changes
jQuery("ul li input[type='radio']:checked").click();
}
jQuery(function() {
// Initialize jQuery datepicker
jQuery("#datepicker").datepicker({
dateFormat: "dd/mm/yy",
onSelect: updateDeliveryDates
});
// Set initial date in text field to today's date
jQuery("#datepicker").datepicker('setDate', '+0');
// Set initial values for delivery date spans
updateDeliveryDates(jQuery("#datepicker").val(), jQuery("#datepicker"));
});
</script>
{% if product.variants.size > 1 %}
<script type="text/javascript" charset="utf-8">
jQuery(function() {
var first_variant_price = jQuery("ul li input[type='radio']:checked").attr("data-price");
var first_variant_compare_at_price = jQuery("ul li input[type='radio']:checked").attr("data-compare-at-price") || '';
jQuery(".price-field span").html(first_variant_price);
jQuery(".price-field del").html(first_variant_compare_at_price);
jQuery("input[type='radio']").click(function() {
var variant_price = jQuery(this).attr("data-price");
jQuery(".price-field span").html(variant_price);
var variant_compare_at_price = jQuery(this).attr("data-compare-at-price") || '';
jQuery(".price-field del").html(variant_compare_at_price);
// Get delivery date from span below variant title & update hidden line item property
var delivery_date = jQuery("ul li input[type='radio']:checked").siblings("span").html();
jQuery("#delivery-date").val(delivery_date);
});
// Set initial value for hidden line item property
jQuery("ul li input[type='radio']:checked").click();
});
</script>
<div id="product-variants">
<ul>
{% assign found_available_variant = false %}
{% for variant in product.variants %}
<li>{% if variant.available %}
<input type="radio"{% if variant.compare_at_price > variant.price %} data-compare-at-price="{{ variant.compare_at_price | money_with_currency }}"{% endif %} data-price="{{ variant.price | money_with_currency }}" id="{{ variant.id }}" value="{{ variant.id }}" name="id"{% if found_available_variant == false %}{% assign found_available_variant = true %} checked="checked"{% endif %} />
<label for="{{ variant.id }}">{{ variant.title }}</label>
<br /><span id="delivery-date-{{ variant.price }}"></span><br /><br />
{% else %}
<input type="radio" class="out-of-stock" id="{{ variant.id }}" value="{{ variant.id }}" name="id" disabled="disabled" />
<label for="{{ variant.id }}" class="out-of-stock">{{ variant.title }}</label>{% endif %}
</li>
{% endfor %}
</ul>
</div>
{% else %}
<input type="text" name="id" value="{{ product.variants.first.id }}" />
{% endif %}
<input type="hidden" id="delivery-date" name="properties[DeliveryDate]" />
<input type="submit" name="add" value="Purchase" class="btn" />
</form>
{% if collection %}
<div class="product-nav clearflex">
{% if collection.previous_product %}
<div class="left">{{ '← Previous Product' | link_to: collection.previous_product }}</div>
{% endif %}
{% if collection.next_product %}
<div class="right">{{ 'Next Product →' | link_to: collection.next_product }}</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
<script type="text/javascript">
// <![CDATA[
var selectCallback = function(variant, selector) {
if (variant && variant.available == true) {
// selected a valid variant
jQuery('.purchase').removeClass('disabled').removeAttr('disabled'); // remove unavailable class from add-to-cart button, and re-enable button
jQuery('.price-field').html(Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}")); // update price field
} else {
// variant doesn't exist
jQuery('.purchase').addClass('disabled').attr('disabled', 'disabled'); // set add-to-cart button to unavailable class and disable button
var message = variant ? "Sold Out" : "Unavailable";
jQuery('.price-field').text(message); // update price-field message
}
};
// initialize multi selector for product
jQuery(function() {
new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback });
jQuery('.selector-wrapper').addClass('clearfix');
{% if product.options.size == 1 %}
jQuery('.selector-wrapper').prepend("<label for='product-select-option-0'>{{ product.options.first }}</label>");
{% endif %}
});
// ]]>
</script>
...
<td>
<div class="item-title">
<a href="{{ item.product.url | within: collections.all }}">{{ item.title }}</a>
{% for p in item.properties %}
{% unless p.last == blank %}
<br />
{{ p.last }}
<br />
{% endunless %}
{% endfor %}
</div>
</td>
...
I modified some code from a discussion on the Shopify wiki about using radio buttons for variants (instead of the default drop down list). This is for a Stack Overflow question about custom Shopify variants for shipping options.
Relevant Links: