Modifying Item Options in a StoreFront
This page will show how to customize item options. If you need item variations instead, see this article: Modifying Item Variations in a StoreFront
StoreFront Item Variations
Helpful Links
Converting an Item from using Options to Variations (introduction to variations)
Item Variations (instructions for creating/configuring variations)
Adding ?uc-debug to then end of an item page containing variations will generate debugging output in the browser console.
Example: https://demo.ultracartstore.com/shop/TSHIRT.html?uc-debug
HTML Components
The item options are found in two places.
- The visible portions of the item options, such as the select boxes (or radio buttons) are found in the
template_item.vm
file. - The javascript that powers the item options is (usually) found in the
document_bottom.vm
file. This is a snippet file, so it is found in your/themes/<my theme name>/snippets/
directory and NOT in the templates directory tree.
Item Options Form Elements
#if($theme.attr('Item Show Options') == 'true') #foreach ($itemOption in $item.getOptions()) <div class="label-group"> #if($itemOption.getType() == "dropdown") <label for="option-select$velocityCount">$itemOption.getLabel()</label> <input type="hidden" name="OptionName${velocityCount}" value="$formatHelper.escapeHtml($itemOption.getName())" /> <select class="uc-option-field" data-item-id="$item.getMerchantItemID()" data-option-name="$itemOption.getName()" id="option-select${velocityCount}" name="OptionValue${velocityCount}"> #foreach ($dropDownValue in $itemOption.getDropDownValues()) <option value="$formatHelper.escapeHtml($dropDownValue)">$formatHelper.escapeHtml($dropDownValue)</option> #end </select> #end #if($itemOption.getType() == "single") <label for="option-single${velocityCount}">$itemOption.getLabel()</label> <input type="hidden" name="OptionName${velocityCount}" value="$formatHelper.escapeHtml($itemOption.getName())" /> <input class="uc-option-field" data-item-id="$item.getMerchantItemID()" data-option-name="$itemOption.getName()" id="option-single${velocityCount}" type="text" name="OptionValue${velocityCount}" /> #end #if($itemOption.getType() == "multiline") <label for="option-multiline${velocityCount}">$itemOption.getLabel()</label> <input type="hidden" name="OptionName${velocityCount}" value="$formatHelper.escapeHtml($itemOption.getName())" /> <textarea class="uc-option-field" data-item-id="$item.getMerchantItemID()" data-option-name="$itemOption.getName()" id="option-multiline${velocityCount}" type="text" name="OptionValue${velocityCount}"></textarea> #end #if($itemOption.getType() == "radio") <label>$itemOption.getLabel()</label> <br> <ul class='option-group'> #foreach($radioValues in $itemOption.getValues()) <li> <label for="option-radio${velocityCount}"> <input type="hidden" name="OptionName${velocityCount}" value="$formatHelper.escapeHtml($itemOption.getName())" /> <input class="uc-option-field" data-item-id="$item.getMerchantItemID()" data-option-name="$itemOption.getName()" type="radio" name="OptionValue${velocityCount}" value="$formatHelper.escapeHtml($radioValues.value)" />$formatHelper.escapeHtml($radioValues.value)</label> </li> #end </ul> #end #if($itemOption.getType() == "file attachment") <label for="option-file${velocityCount}">$itemOption.getLabel()</label> <input class="uc-option-field" data-item-id="$item.getMerchantItemID()" data-option-name="$itemOption.getName()" id="option-file${velocityCount}" type="file" name="$formatHelper.escapeHtml($itemOption.getName())" /> #end </div> #en