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

...

<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 Comments about this code:

1. Where the The form action is posted to is pointed at the checkout URL which is available from the velocity variable $checkoutUrl (builtin catalog variable)
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 (builtin catalog variable)
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.

...

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 during the foreach loop.
3. Only drop down options are being displayed in this example.
4. Options are configured using the Options tab when editing an Item. LINK?

Single item with quantity box and variations

This scenario is fairly complex to code. We have a separate tutorial on Modifying Item Variations on in a Catalog SiteStoreFront that you should read. This code is taken from that tutorial though to make this a complete example here.

...