...
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> |
...