...
- Same code as above, but with additional fields for the options
- Options are passed as two parameters to checkout OptionName# and OptionValue# where # is an incrementing number. We use the $velocityCount variable to automatically assign the number as loop.
- Only drop down options are being displayed in this example.
Single item with quantity box and variations
This scenario is fairly complex to code. We have a separate tutorial on Variations on a Catalog Site that you should read. This code is taken from that tutorial though to make this a complete example here.
| Code Block | ||||
|---|---|---|---|---|
| ||||
<html>
<head>
${group.getCatalogJavaScript()}
<script type="text/javascript">
var m = ${item.getVariationMatrix().getJavascriptItemVariationMatrix()}
function formChange(f) {
var variationNames = [
#foreach ($variation in ${item.getVariations()})
#if ($velocityCount > 1)
,
#end
"$variation.getName()"
#end
];
var htmlElements = [
#foreach ($variation in ${item.getVariations()})
#if ($velocityCount > 1)
,
#end
document.getElementById("VariationValue$velocityCount")
#end
];
ucCatalogHandleVariations(m, variationNames, htmlElements, f);
}
</script>
</head>
<body>
<form action="http://secure.ultracart.com/cgi-bin/UCEditor" method="GET">
<input type="hidden" name="MerchantID" value="${merchantID}">
<input type="hidden" name="ADD" value="${item.getMerchantItemID()}">
<table>
<tr>
<td>Quantity</td>
<td><input type="text" name="Quantity" value="1"></td>
</tr>
#foreach ($variation in $item.getVariations())
<tr>
<td> $variation.getName()
<input type="hidden" name="VariationName${velocityCount}" value="${variation.getName()}">
</td>
<td>
<select name="VariationValue${velocityCount}" id="VariationValue${velocityCount}" onfocus="formChange(this)">
<option></option>
#foreach ($value in ${variation.getValues()})
<option>$value</option>
#end
</select>
</td>
<tr>
#end
</table>
<input type="submit" name="addToCart" value="add to cart">
</form>
</body>
</html>
|