This section describes how to use the CartModifierFormHandler
to add items to the current shopping cart. It includes the following sections:
Adding One Item at a Time
The simplest way to add items to the current shopping cart is to add them one at a time. The following JSP code example serves as an illustration.
In the example, the user can select which SKU of the current product to add to the cart from a drop-down list. A ForEach
servlet bean is used to iterate over the SKUs of the product and populate the drop-down list, which is associated with the catalogRefIds
and commerceId
properties of the CartModifierFormHandler
. Additionally, the user can specify in a textbox a quantity of the selected SKU to add to the cart, which is associated with the quantity
property of the CartModifierFormHandler
.
When the user clicks the Add To Cart submit button, the form is processed, the properties of CartModifierFormHandler
are set, and the handleAddItemToOrder
method of CartModifierFormHandler
is invoked. The handleAddItemToOrder
method adds the quantity (specified in CartModifierFormHandler.quantity
or .quantityWithFraction
) of the selected SKU (specified in CartModifierFormHandler.catalogRefIds
and identified by repository ID) to the current Order
and then re-prices the Order
.
<dsp:importbean bean="/atg/commerce/order/purchase/CartModifierFormHandler"/> <dsp:importbean bean="/atg/dynamo/droplet/ForEach"/> <%--Create a form for user to select a SKU and add it to his/her cart:--%> <dsp:getvalueof id="form10" bean="/OriginatingRequest.requestURI" idtype="java.lang.String"> <dsp:form action="<%=form10%>" method="post"> <%--Store this product's ID in the Form Handler: --%> <dsp:input bean="CartModifierFormHandler.ProductId" paramvalue="Product.repositoryId" type="hidden"/> <%--set id param so that the Navigator won't get messed up in case of an error that makes us return to this page.--%> <input value='<dsp:valueof param="Product.repositoryId"/>' type="hidden" name="id"> <table cellpadding=0 cellspacing=0 border=0> <tr><td class=box-top-store>Add to Cart</td></tr> <tr><td class=box> <%--Display any errors that have been generated during Cart operations:--%> <dsp:include page="../../common/DisplayCartModifierFormHandlerErrors.jsp"></dsp:include> Add <%--Textbox with QTY the user wants to order: --%> <dsp:input bean="CartModifierFormHandler.quantity" size="4" value="1" type="text"/> <%--Create a dropdown list with all SKUs in the Product. Store the selected SKU's id in the form handler: --%> <dsp:select bean="CartModifierFormHandler.catalogRefIds"> <%--For each of the SKUs in this Product, add the SKU to the dropdown list:--%> <dsp:droplet name="ForEach"> <dsp:param param="Product.childSKUs" name="array"/> <dsp:param value="Sku" name="elementName"/> <dsp:param value="skuIndex" name="indexName"/> <dsp:oparam name="output"> <%--This is the ID to store if this SKU is selected in dropdown:--%> <dsp:getvalueof id="option73" param="Sku.repositoryID" idtype="java.lang.String"> <dsp:option value="<%=option73%>"/> </dsp:getvalueof> <%--Display the SKU's display name in the dropdown list:--%> <dsp:valueof param="Sku.displayName"/> </dsp:oparam> </dsp:droplet> <%--ForEach SKU droplet--%> </dsp:select> <br> <%-- ADD TO CART BUTTON: Adds this SKU to the Order--%> <dsp:input bean="CartModifierFormHandler.addItemToOrder" value="Add to Cart" type="submit"/> <%-- Go to this URL if NO errors are found during the ADD TO CART button processing:--%> <dsp:input bean="CartModifierFormHandler.addItemToOrderSuccessURL" value="/checkout/cart.jsp" type="hidden"/> </td> </tr> </table> </dsp:form></dsp:getvalueof>
For detailed information about CartModifierFormHandler
and its handle methods, refer to the Modifying Orders section of the Configuring Purchase Process Services chapter in the Core Commerce Programming Guide.
Also, refer to AddToCart.jsp
in the Motorprise reference application for a similar JSP code example. AddToCart.jsp
is embedded into product.jsp
to enable the user to add a quantity of the displayed SKU to the user’s shopping cart. You can access both AddToCart.jsp
and product.jsp
at <ATG11dir>\MotorpriseJSP\j2ee-apps\motorprise\web-app\en\catalog\
. You can also open these pages in the ACC’s Document Editor via the Pages and Components>J2EE Pages task area.
Adding Multiple Items at Once
You can create pages that allow users to add multiple items to the current shopping cart in a single form submission. The items can refer to different products, different SKUs, and have different quantities. The CartModifierFormHandler
contains an items
property that allows you to set per-item property values.
The following JSP code example illustrates adding multiple items for more than one SKU for a single product. In the example, the user can specify in a textbox a different quantity for each SKU to add to the cart. There are hidden input fields for the product ID and SKUs. Each product ID, SKU, and quantity textbox is associated with a subproperty of one element in the CartModifierFormHandler.items
array.
When the user clicks the Add To Cart submit button, the form is processed, the properties of CartModifierFormHandler
are set, and the handleAddItemToOrder
method of CartModifierFormHandler
is invoked. The handleAddItemToOrder
method iterates through the CartModifierFormHandler.items
elements and adds an item for each element quantity
, using that element’s productId
and catalogRefId
for the new item.
<dsp:importbean bean="/atg/commerce/order/purchase/CartModifierFormHandler"/> <dsp:importbean bean="/atg/dynamo/droplet/ForEach"/> <dsp:form action="display_product.jsp" method="post"> <input name="id" type="hidden" value='<dsp:valueof param="product.repositoryId"/>'> <dsp:input bean="CartModifierFormHandler.addItemToOrderSuccessURL" type="hidden" value="shoppingcart.jsp"/> <table border=1> <tr> <td>SKU</td> <td>Quantity</td> </tr> <dsp:droplet name="ForEach"> <dsp:param name="array" param="product.childSKUs"/> <dsp:param name="elementName" value="sku"/> <dsp:param name="indexName" value="skuIndex"/> <dsp:oparam name="outputStart"> <dsp:input bean="CartModifierFormHandler.addItemCount" paramvalue="size" type="hidden"/> </dsp:oparam> <dsp:oparam name="output"> <tr> <td><dsp:valueof param="sku.displayName"/></td> <td> <dsp:input bean="CartModifierFormHandler.items[param:skuIndex].quantity" size="4" type="text" value="0"/> <dsp:input bean="CartModifierFormHandler.items[param:skuIndex].catalogRefId" paramvalue="sku.repositoryId" type="hidden"/> <dsp:input bean="CartModifierFormHandler.items[param:skuIndex].productId" paramvalue="product.repositoryId" type="hidden"/> </td> </tr> </dsp:oparam> </dsp:droplet> </table> <BR> <dsp:input bean="CartModifierFormHandler.addItemToOrder" type="submit" value="Add To Cart"/> </dsp:form>
The CartModifierFormHandler
must be told how many elements to allocate for the items
array. This is done by setting the CartModifierFormHandler.addItemCount
property. In the preceding example, addItemCount
is set to the number of SKUs defined for the product in a hidden input field. This technique works in the example because all of the CartModifierFormHandler.items
input fields have explicit value
or paramvalue
attributes.
The next code fragment illustrates a more complex technique for setting CartModifierFormHandler.addItemCount
. This technique is appropriate if you want to preserve a user’s input when a page is redisplayed because of a form submission error. The dsp:setvalue
tag is not executed if the page is redisplayed.
<dsp:droplet name="/atg/dynamo/droplet/Switch"> <dsp:param name="value" bean="CartModifierFormHandler.addItemCount"/> <dsp:oparam name="0"> <dsp:setvalue bean="CartModifierFormHandler.addItemCount" value="5"/> </dsp:oparam> </dsp:droplet> <dsp:input bean="CartModifierFormHandler.addItemCount" value="5" type="hidden"/>
Overriding the Default Commerce Item Type
By default, Core Commerce supports six types of commerce items.
b2bCommerceItem
b2bConfigurableCommerceItem
commerceItem
configurableCommerceItem
configurableSubSkuCommerceItem
subSKUCommerceItem
Your sites may support additional custom commerce item types (see Extending the Purchase Process in the Customizing the Purchase Process Externals section of the Core Commerce Programming Guide).
The commerceItemType
property of CartModifierFormHandler
determines what type of commerce item is created by addItemToOrder
. Normally, commerceItemType
is set to “default.” You can specify a different commerce item type in the CartModifierFormHandler
configuration file or in a form input field. If you add multiple items in a single form submission, you can override the CartModifierFormHandler.commerceItemType
setting for an individual item by including a hidden input field to set CartModifierFormHandler.items[n].commerceItemType
.
Values for commerceItemType
must match keys in /atg/commerce/order/OrderTools.commerceItemTypeClassMap
.
Handling Custom Commerce Item Properties
The CartModifierFormHandler.addItemToOrder
method has built-in support for some types of commerce item extensions. If your sites have extended commerce items with primitive data type properties, you can supply values for those properties by associating form fields with the CartModifierFormHandler.value
dictionary.
For example, suppose your sites have extended commerce items to support monograms, and the custom properties are named monogram
and style
. The following JSP code example illustrates how to handle user input for monograms without making any CartModifierFormHandler
changes.
<b>Monogram Options</b><br> Initials / Text: <dsp:input bean="CartModifierFormHandler.value.monogram" size="20" type="text"/><br> Style: <dsp:select bean="CartModifierFormHandler.value.style"> <dsp:option value="Block"/>Block <dsp:option value="Diamond"/>Diamond <dsp:option value="Panel"/>Panel <dsp:option value="Stagger"/>Stagger <dsp:option value="Script"/>Script </dsp:select><br>
If you add multiple items in a single form submission, you can supply different custom property values for each item via the value
Dictionary in each CartModifierFormHandler.items
array element. Continuing with the preceding example, you could specify a single item’s monogram text as:
Initials / Text: <dsp:input bean="CartModifierFormHandler.items[0].value.monogram" size="20" type="text"/><br>
If you add multiple items in a single form submission and you want to supply the same custom property values for all or most of the items, you can use CartModifierFormHandler.value
for the common values and CartModifierFormHandler.items[n].value
for special cases. If a property name appears in both the common Dictionary and an individual item’s Dictionary, addItemToOrder
uses the individual item’s value.
Note that the value
Dictionary cannot be used for standard commerce item properties, such as quantity
and catalogRefId
.