...
Here's an example of an item with three variations that makes use of uc-variation-container and uc-variation-radio classes to use radio buttons instead of variations. Notice that you must provide all the values for the radio buttons. The variation script only handles the enabling/disabling of the radio buttons based on availability of product. Our experience has shown that there's just too much surrounding custom html with radio buttons for us to provide a generic means of generating radio button values.
Lines 31-41 contain the relevant radio button code
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<form action="/cgi-bin/UCEditor" class='uc-variation-form-${item.getMerchantItemID()}'>
<input type="hidden" name="merchantId" value="DEMO"/>
<input type="hidden" name="ADD" value="$item.getMerchantItemID()"/>
#set($hasVariations = $item.getVariations().size() > 0)
#if($hasVariations)
<script type='text/javascript'>
ucCatalogVariationsInit("$item.getMerchantItemID()", ${item.getVariationMatrix().getJavascriptItemVariationMatrix()});
</script>
<div class="four columns omega">
<div class="order-box">
<div class="uc-variation-cost-${item.getMerchantItemID()}"></div>
<label id="supply">
<span>Select</span>
<!-- the following naming assumes that the day supply is the first variation (and the name of the variation is "Select") -->
<input type='hidden' name='VariationName1' value='Select'/>
<select name="VariationValue1" id="uc-variation-field-1-${item.getMerchantItemID()}"></select>
</label>
<label id="bottle">
<span>Number of Bottles</span>
<select name="quantity">
<option value="1">1</option>
<option value="10">10</option>
<option value="100">100</option>
<option value="1000">1000</option>
<option value="10000">100000</option>
</select>
</label>
<!-- when using a div as a variation field, all radio buttons within with uc-variation-radio class are assumed to be variation options -->
<div id='uc-variation-field-2-${item.getMerchantItemID()}' class='uc-variation-container'>
<input type='hidden' name='VariationName2' value='Delivery Type'/>
<div class="radio-entry">
<input type="radio" name="VariationValue2" class='uc-variation-radio' value="One-Time Purchase"/>
<span class="label">One-Time Purchase</span>
</div>
<div id="radio-easy-ship" class="radio-entry">
<input type="radio" name="VariationValue2" class='uc-variation-radio' value="Easy Ship"/>
<span class="label">Easy Ship <img src="$baseUrl/images/product-easy-ship.png" width="30"/></span>
</div>
</div>
<small>
Save 10% and get FREE S&H
<label id="delivery">
<span>Select Delivery Schedule</span>
<input type="hidden" name="VariationName3" value="Delivery Schedule" />
<select name="VariationValue3" id="uc-variation-field-3-${item.getMerchantItemID()}"></select>
</label>
</small>
<div class="center">
<button type="button" id="add-to-cart">
<span class="cart-left">Add to Cart</span>
<span class="cart-right">»</span>
</button>
</div>
</div>
</div>
#else ## if-no-variations
<div class="four columns omega">
<div class="order-box">
$item.getCost()<br />
<label id="bottle">
<span>Number of Bottles</span>
<select name="quantity">
<option value="1">1</option>
<option value="10">10</option>
<option value="100">100</option>
<option value="1000">1000</option>
<option value="10000">100000</option>
</select>
</label>
<div class="center">
<button type="button" id="add-to-cart">
<span class="cart-left">Add to Cart</span>
<span class="cart-right">»</span>
</button>
</div>
</div>
</div>
#end
</form> |
...