Skip to content

Instantly share code, notes, and snippets.

@carolineschnapp
Created April 8, 2010 17:55
Show Gist options
  • Save carolineschnapp/360333 to your computer and use it in GitHub Desktop.
Save carolineschnapp/360333 to your computer and use it in GitHub Desktop.
Product.liquid template that hides the drop-down when there's only 1 variant for Moderno
<div id="product-left">
<h2>{{ product.title }} by {{ product.vendor }} <span>{{ product.price | money }}</span></h2>
{{ product.description }}
<div id="product-select">
<form action="/cart/add" method="post" name="cartadd">
{% if product.available %}
<div id="product-variants">
{% if product.variants.size == 1 %}
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
{% else %}
<select id="variant-select" name='id'>
{% for variant in product.variants %}
{% if variant.available %}
<option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% else %}
<option value="{{ variant.id }}" disabled="disabled">{{ variant.title }} - SOLD OUT</option>
{% endif %}
{% endfor %}
</select>
{% endif %}
</div>
<span id="price-field">{% if product.variants.size == 1 %}{{ product.price | money_with_currency }}{% endif %}</span><br />
<input type="submit" name="add" value="ADD TO CART" id="add-cart">
{% else %}
<h6>TEMPORARILY UNAVAILABLE</h6>
{% endif %}
</form>
</div>{% if collection %}
<div id="navigate-collection">
<ul>{% if collection.previous_product %}
<li id="back">{{ 'PREV' | link_to: collection.previous_product }} <span>&#124;</span> </li>{% endif %}
<li><a href="/collections/{{ collection.handle }}">{{ collection.title | upcase }}</a></li>{% if collection.next_product %}
<li id="forward"> <span>&#124;</span> {{ 'NEXT' | link_to: collection.next_product }}</li>{% endif %}
</ul>
</div>{% endif %}
</div>
<div id="product-right">{% for image in product.images limit: 1 %}
<div id="product-image">
<img src="{{ image | product_img_url: 'large' }}" alt="{{ product.title | escape }}" />
</div>{% endfor %}
<div id="thumbs">{% for image in product.images %}
<a href="{{ image | product_img_url: 'grande' }}" rel="lightbox[images]" title="{{ product.title }}"{% if forloop.first %} class="show"{% endif %}>{{ forloop.index }}</a>{% endfor %}
</div>
</div>
{% unless product.variants.size == 1 %}
<script type="text/javascript">
<!--
// mootools callback for multi variants dropdown selector
var selectCallback = function(variant, selector) {
if (variant && variant.available == true) {
// selected a valid variant
$('add-cart').removeClass('disabled'); // remove unavailable class from add-to-cart button
$('add-cart').disabled = false; // reenable add-to-cart button
$('price-field').innerHTML = Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}"); // update price field
} else {
// variant doesn't exist
$('add-cart').addClass('disabled'); // set add-to-cart button to unavailable class
$('add-cart').disabled = true; // disable add-to-cart button
$('price-field').innerHTML = (variant) ? "Sold Out" : "Unavailable"; // update price-field message
}
};
// initialize multi selector for product
window.addEvent('domready', function() {
new Shopify.OptionSelectors("variant-select", { product: {{ product | json }}, onVariantSelected: selectCallback });
});
-->
</script>
{% endunless %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment