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.