Coding Example - Item with multiple option types

Owned by Chris Torigian
Last updated: Jun 06, 2016 by Perry Tew
3 min read

Introduction

This tutorial shows how to use Velocity code on your catalog to conditionally show the items option based on the option type  This velocity code example is intended to be used within the Catalog templates:

 

Main Menu → Configuration →  Catalog 

Sample Code

#foreach ($itemOption in $item.getOptions())
          
          #if ($itemOption.getType() == "single")
        
            <div class="entry">
            	<div class="entryleft">
            	<p>$itemOption.getLabel()</p>
                <input type="text" class="txt" name="OptionName$velocityCount" value=""/>
                </div>
              
                <div class="clear"></div>
            </div>
          #end
          
          #if ($itemOption.getType() == "dropdown")
          		<div class="entry">
            	 <div class="entryleft">
            	  <p>$itemOption.getLabel()</p>
                        <select name='OptionValue$velocityCount'>
        					#foreach($itemOptionValue in $itemOption.getDropDownValues())
          						<option>$itemOptionValue</option>
        					#end
      					</select>
                          </div>
                <div class="clear"></div>
            </div>
          
      		#end
          
           #end

Break Down

Now let's break down what each block is doing.

#foreach ($itemOption in $item.getOptions())

This line sets the condition that for each item option within the items list of options we are going to do the following.

#if ($itemOption.getType() == "single")
        
            <div class="entry">
            	<div class="entryleft">
            	<p>$itemOption.getLabel()</p>
                <input type="text" class="txt" name="OptionName$velocityCount" value=""/>
                </div>
              
            </div>
          #end

Here we set a second conditional that we are looking for only item option with the following type. If this is true then we pull the options label, set the field for this option type. We then do the same for a different option type of "dropdown" and close the if statements

List of Option Types

NameDiscription
singleThis is for option with a type set of "Single line of free form text".
multilineThis is for option with a type set of "Multiple lines of free form text".
dropdownThis is for option with a type of "Drop down list of values".
file attachmentThis is for options with a type of "File attachment".
hiddenThis is for options with a type of "Hidden".
radioThis is for options with a type of "Radio button list of values".