Modifying Item Options in a StoreFront

Owned by Perry Tew
Last updated: Mar 24, 2016

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

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. 

  1. The visible portions of the item options, such as the select boxes (or radio buttons) are found in the template_item.vm file.
  2. 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