...
| Format | Velocity Code* | Example Output | HTML Elements | Comments |
|---|---|---|---|---|
.uc-variation -form -<ITEMID> | uc-variation -form -${item.getMerchantItemID()}" | class="uc-variation-form-SHIRT" | form | this can be inside your #if($hasVariations) or outside. It's just a class name, and won't hurt anything if it's not used. If present, the form submit will be bound to a validation routine that will alert the user of empty fields and cancel the submit. |
uc-variation -label -<VARIATION_INDEX> -<ITEMID> | uc-variation -label -${velocityCount}-${item.getMerchantItemID()} | class="uc-variation-label-0-SHIRT" | any element used for a label, such as td or span | You might wonder why the variation index is used instead of the variation name, because the name would reach better. The answer is because the index is safe. It's just a number. Some UltraCart merchant have strange variation names containing unsafe characters in them. So, we use the index to reduce the risk of breaking a page. |
*The velocity code above assumes that it is inside this loop:
uc-variation-field-<VARIATION_INDEX>-<ITEMID> | uc-variation-field-${velocityCount}-${item.getMerchantItemID() | id="uc-variation-field-0-SHIRT" | select or any block element | id, not class. if this element is a select, then the scripts will populate its options. if this element has the class At the end of this page is an example of using radio buttons for the 2nd of 3 variations. UltraCart doesn't recommend using radio buttons, but it's there if you need it. |
*The velocity code above assumes that it is inside this loop:
| Code Block | ||||
|---|---|---|---|---|
| ||||
#set($hasVariations = $item.getVariations().size() > 0)
#if($hasVariations)
<script type='text/javascript'>
ucCatalogVariationsInit("$item.getMerchantItemID()", ${item.getVariationMatrix().getJavascriptItemVariationMatrix()});
</script>
#foreach($variation in $item.getVariations())
<!-- VARIATION CODE HERE -->
#end
#end |
...
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
#set($hasVariations = $item.getVariations().size() > 0)
#if($hasVariations)
<form action="http://secure.ultracart.com/cgi-bin/UCEditor" class=".uc-variation-form-${item.getMerchantItemID()}">
<input type="hidden" name="merchantId" value="2892A"/>
<input type="hidden" name="ADD" value="${item.getMerchantItemID()}"/>
<script type='text/javascript'>
ucCatalogVariationsInit("$item.getMerchantItemID()", ${item.getVariationMatrix().getJavascriptItemVariationMatrix()});
</script>
<table>
#foreach($variation in $item.getVariations())
<tr>
<td>
<span
class='uc-variation-label-${velocityCount}-${item.getMerchantItemID()}'><!-- label will display here --></span>
</td>
<td><input type='hidden' name="VariationName${velocityCount}" value="${variation.getName()}"/>
<select name="VariationValue${velocityCount}"
id="uc-variation-field-${velocityCount}-${item.getMerchantItemID()}"></select>
</td>
</tr>
#end
</table>
<div class="uc-variation-cost-${item.getMerchantItemID()}"><!-- cost will display here --></div>
<input type="submit" name="submit" value="Add to Cart"/>
</form>
#else
#if($item.getAvailableQuantity() > 0)
<form action="http://secure.ultracart.com/cgi-bin/UCEditor">
<input type="hidden" name="merchantId" value="2892A"/>
<input type="hidden" name="ADD" value="$item.getMerchantItemID()"/>
#foreach($option in $item.getOptions())
<input type='hidden' name='OptionName$velocityCount' value='${option.getName()}'/>
##$option.getLabel()
<select name='OptionValue$velocityCount'>
#foreach($optionValue in $option.getDropDownValues())
<option>$optionValue</option>
#end
</select>
#end
<input type="submit" name="submit" value="Add to Cart"/>
</form>
#else
<em>Out of Stock</em>
#end
#end |
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.
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<form <tr> action="/cgi-bin/UCEditor" class='uc-variation-form-${item.getMerchantItemID()}'> <input type="hidden" name="merchantId" value="DEMO"/> <input type="hidden" <td>name="ADD" value="$item.getMerchantItemID()"/> #set($hasVariations = $item.getVariations().size() > 0) #if($hasVariations) <script type='text/javascript'> <span ucCatalogVariationsInit("$item.getMerchantItemID()", ${item.getVariationMatrix().getJavascriptItemVariationMatrix()}); </script> <div class="four columns omega"> <div class="order-box"> <div class='"uc-variation-labelcost-${velocityCount}-${item.getMerchantItemID()}'><!-- label will display here --></span>"></div> <label id="supply"> <span>Select</span> <!-- the following naming assumes that the day supply is the first variation (and </td>the name of the variation is "Select") --> <input type='hidden' name='VariationName1' value='Select'/> <td><input type='hidden'<select name="VariationName${velocityCount}VariationValue1" valueid="uc-variation-field-1-${variationitem.getNamegetMerchantItemID()}"></> select> </label> <label id="bottle"> <span>Number <select name="VariationValue${velocityCount}"of Bottles</span> <select name="quantity"> <option value="1">1</option> <option id="uc-variation-field-${velocityCount}-${item.getMerchantItemID()}"></select>value="10">10</option> <option value="100">100</option> </td><option value="1000">1000</option> <option value="10000">100000</option> </tr>select> </label> <!-- when using a div as a variation field, #endall radio buttons within with uc-variation-radio class are assumed to be variation options --> </table> <div classid="'uc-variation-field-cost2-${item.getMerchantItemID()}"><!-- cost will display here --></div> ' class='uc-variation-container'> <input type="submit"'hidden' name="submit"'VariationName2' value="Add to Cart"'Delivery Type'/> <div class="radio-entry"> <input </form> type="radio" name="VariationValue2" class='uc-variation-radio' value="One-Time Purchase"/> <span class="label">One-Time Purchase</span> #else </div> <div #if($item.getAvailableQuantity() > 0)id="radio-easy-ship" class="radio-entry"> <form action="http://secure.ultracart.com/cgi-bin/UCEditor"> <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> <input type="hidden" name="merchantId" value="2892A"/> </div> <small> Save <input type="hidden" name="ADD" value="$item.getMerchantItemID()"/> 10% and get FREE S&H <label id="delivery"> #foreach($option<span>Select in $item.getOptions())Delivery Schedule</span> <input type="hidden" name="VariationName3" value="Delivery Schedule" /> <input type='hidden'<select name='OptionName$velocityCount' value='${option.getName()}'/>"VariationValue3" id="uc-variation-field-3-${item.getMerchantItemID()}"></select> </label> </small> ##$option.getLabel()<div class="center"> <button type="button" id="add-to-cart"> <span class="cart-left">Add to Cart</span> <select name='OptionValue$velocityCount'><span class="cart-right">»</span> </button> </div> </div> #foreach($optionValue in $option.getDropDownValues()) </div> #else ## if-no-variations <div class="four columns omega"> <div class="order-box"> <option>$optionValue</option> $item.getCost()<br /> <label id="bottle"> <span>Number of #endBottles</span> <select name="quantity"> </select><option value="1">1</option> <option value="10">10</option> #end <option value="100">100</option> <option value="1000">1000</option> <input type="submit" name="submit" <option value="Add to Cart10000">100000</>option> </select> </label> </form> <div class="center"> <button type="button" id="add-to-cart"> #else <span class="cart-left">Add to Cart</span> <em>Out of Stock</em><span class="cart-right">»</span> </button> </div> #end </div> </div> #end #end</form> |