...
Navigate to the Catalog Tab.
| Panel |
|---|
Home → [Item Management|@menuitemmanagement] → Items → [Select an Item] → Click on Catalog tab. |
Click on the Variation Wizard button. It's at the bottom of the Variations section.
...
Here are the classes and ids available to enable dynamic variations (note, the actual code does not have line breaks or spaces in the names.:
| 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. |
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 | theme | DJango|||
|---|---|---|---|---|
| ||||
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="/catalog_3.2.js"></script> |
Product Page Code
| Code Block | theme | DJango|||||
|---|---|---|---|---|---|---|
| ||||||
#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 |
...
Lines 31-41 contain the relevant radio button code
| Code Block | theme | DJango|||||
|---|---|---|---|---|---|---|
| ||||||
<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> |
...