Item Forms on a Catalog Page

Item Forms on a Catalog Page

This tutorial will cover how to properly code forms on your catalog page. There are a number of different scenarios that we will cover in this tutorial:

• Single item with quantity box
• Single item with quantity box and drop down options
• Single item with quantity box and variations
• Multiple items with quantity box
• Multiple items with quantity box and drop down options

Single item with quantity box

<form method="POST" action="${checkoutUrl}">
  <input type="hidden" name="merchantId" value="${merchantID}"/>
  <input type="hidden" name="ADD" value="${item.getMerchantItemID()}"/>

  Quantity: <input type="text" name="Quantity" value="1"> <br/>

  <input type="submit" value="add to cart"/>
</form>

Things to note about this code:

1. Where the form is posted to is the checkout URL which is available from the velocity variable $checkoutUrl
2. The merchant ID is contained within the form as a hidden input named "merchantId" and the value is pulled from the velocity variable $merchantID
3. The item that is to be added to the cart is contained within a hidden input named "ADD" and the value is pulled from the item object using $item.getMerchantItemID()
4. The quantity input is named quantity and has a default value of 1 so that the customer doesn't have to change it unless they want more than one.
5. There is a submit button for the user to click.

Single item with quantity box and drop down options

<form method="POST" action="${checkoutUrl}">
  <input type="hidden" name="merchantId" value="${merchantID}"/>
  <input type="hidden" name="ADD" value="${item.getMerchantItemID()}"/>

  Quantity: <input type="text" name="Quantity" value="1"> <br/>
  #foreach ($itemOption in $item.getOptions())
    #if ($itemOption.getType() == "dropdown")
      <input type="hidden" name="OptionName$velocityCount" value="$itemOption.getName()" />
      $itemOption.getName() <select name="OptionValue$velocityCount">
        #foreach ($dropDownValue in $itemOption.getDropDownValues())
          <option>$dropDownValue</option>
        #end
      </select> <br />
    #end    
  #end

  <input type="submit" value="add to cart"/>
</form>

Things to note about this code:

1. Same code as above, but with additional fields for the options
2. 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.
3. Only drop down options are being displayed in this example.