...
Here is the code that was used on this site to show the variations properly.
Header Code
This variation code makes use of catalog_3.0.js. It is new as of Dec. 2012. It requires jQuery and makes heavy use of classes and ids. The code manages multiple variations.
For example, given a shirt with both a Size variation and Color variation, and limited inventory, the shirt's item page needs to update the Color select box each time a Size is chosen to prevent the customer from buying something out of stock. Also, if the price changes based on variations, that needs to be reflected immediately.
How it Works
When you include the two .js files below, and then call ucCatalogVariationsInit, passing in the item id and matrix, the routine registers a jQuery ready() call that does the following for each registered item:
- Populate the select boxes.
- Populates labels.
- Attach handlers to select boxes and radio buttons.
- Updates any cost fields with the base cost.
- Attaches a validation handler to the form that ensures all variations are selected.
The UCEditor cgi (the url that manages the shopping cart) only cares that the variations are send in named pairs: VariationName1=Size&VariationValue1=Small&VariationName2=Color&VariationValue2=Blue. So, care must be taken to ensure the html elements contain both the proper classes and name.
The easiest way to create name parameters like VariationValue1 and VariationValue2, and generate the classes needed for dynamic action, is to generate the variations in a loop. The code below does that.
Here are the classes and ids available to enable dynamic variations:
| Format | Velocity Code* | Example Output | HTML Elements | Comments |
|---|---|---|---|---|
.uc-variation-form-<ITEMID> | class="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:
| 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 | ||||
|---|---|---|---|---|
| ||||
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="/catalog_3.0.js"></script> |
...
| 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${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 |
...