In the Pioneer Cycling store, customers can look at products in the catalog and add them directly to their shopping carts or wish lists. The JSP snippet used to add items to a cart can be found in <ATG2007.3dir>/PioneerCyclingJSP/j2ee-apps/pioneer/web-app/en/catalog/common/AddToCart.jsp
This is the code example we used to include the code fragment in our template page. The AddToCart.jsp code fragment takes a product repository item, so it is passed the Product parameter that was initialized inside the ProductLookupDroplet.
<dsp:getvalueof id="pval0" param="Product"> <dsp:include page="common/AddToCart.jsp" flush="true"> <dsp:param name="product" value="<%=pval0%>"/> </dsp:include> </dsp:getvalueof>
This is the body of the AddToCart.jsp code fragment:
<DECLAREPARAM NAME="Product" CLASS="java.lang.Object" DESCRIPTION="A Product repository Item - REQUIRED."> <DECLAREPARAM NAME="SkuDisplayFormat" CLASS="java.lang.String" DESCRIPTION="How the list of SKUs should be displayed. Either DropDownList or RadioButtons - default is a dropdown list"> <dsp:importbean bean="/atg/commerce/order/ShoppingCartModifier"/> <dsp:importbean bean="/atg/dynamo/droplet/IsNull"/> <%/*Create a form for user to select a SKU and add it to their cart:*/%> <dsp:getvalueof id="form16" bean="/OriginatingRequest.requestURI" idtype="java.lang.String"> <dsp:form action="<%=form16%>" method="post"> <%/*Store this Product's ID in the Form Handler: */%> <dsp:input bean="ShoppingCartModifier.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 name="id" type="hidden" value='<dsp:valueof param="Product.repositoryId"/>'> <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/DisplayShoppingCartModifierErrors.jsp" flush="true"></dsp:include> Add <%/*Textbox with QTY the user wants to order: */%> <dsp:input bean="ShoppingCartModifier.quantity" size="4" type="text" value="1"/> <dsp:droplet name="/atg/dynamo/droplet/Switch"> <dsp:param name="value" param="SkuDisplayFormat"/> <%/*------------RadioButtons format ------------------*/%> <dsp:oparam name="RadioButtons"> <%/*For each of the SKUs in this Product, add a radio button:*/%> <dsp:droplet name="/atg/dynamo/droplet/ForEach"> <dsp:param name="array" param="Product.childSKUs"/> <dsp:param name="elementName" value="Sku"/> <dsp:oparam name="output"> <br> <%/*If they select this SKU, store its ID in the form handler:*/%> <dsp:input bean="ShoppingCartModifier.catalogRefIds" paramvalue="Sku.repositoryID" name="SkuGroup" type="radio"/> <%/*Display the SKU's display name for the radio button:*/%> <dsp:valueof param="Sku.displayName"/> </dsp:oparam> </dsp:droplet> <%/*ForEach SKU droplet*/%> <br> </dsp:oparam> <%/*------------DropDownList format (default) ------------------*/%> <dsp:oparam name="default"> <%/*Create a dropdown list will all Sku in the Product. Store the selected SKU's id in the Form Handler: */%> <dsp:select bean="ShoppingCartModifier.catalogRefIds"> <%/*For each of the SKUs in this Product, add the SKU to the dropdown list:*/%> <dsp:droplet name="/atg/dynamo/droplet/ForEach"> <dsp:param name="array" param="Product.childSKUs"/> <dsp:param name="elementName" value="Sku"/> <dsp:param name="indexName" value="skuIndex"/> <dsp:oparam name="output"> <%/*This is the ID to store, if this SKU is selected in dropdown:*/%> <dsp:getvalueof id="option136" param="Sku.repositoryID" idtype="java.lang.String"> <dsp:option value="<%=option136%>"/> </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> </dsp:oparam> </dsp:droplet> <%/*Switch on SkuDisplayFormat*/%> <%/* URL to go to if user's session expires while he is filling out this form */%> <dsp:input bean="ShoppingCartModifier.sessionExpirationURL" type="hidden" value="../../common/SessionExpired.jsp"/> <%/* ADD TO CART BUTTON: Adds this SKU to the Order*/%> <dsp:input bean="ShoppingCartModifier.addItemToOrder" type="submit" value=" Add to Cart "/> <%/* Goto this URL if NO errors are found during the ADD TO CART button processing:*/%> <dsp:input bean="ShoppingCartModifier.addItemToOrderSuccessURL" type="hidden" value="../checkout/cart.jsp"/> </td> </tr> </table> </dsp:form></dsp:getvalueof>
As with other code fragments, the code takes a Product parameter:
<DECLAREPARAM NAME="Product" CLASS="java.lang.Object" DESCRIPTION="A Product repository Item - REQUIRED.">
The AddToCart.jsp code also takes an optional parameter that indicates how the list of child SKUs should be displayed. The code can display the SKUs in a dropdown list or as a list of option buttons. The default is DropDownList.
ShoppingCartModifier form handler
The AddToCart code uses the ShoppingCartModifier component to add items to the shopping cart. This ATG Consumer Commerce form handler (or a subclass you create) has many methods and properties that perform most of the tasks required for manipulating a shopping cart. We imported it at the top of the page to access its properties and methods. Here is the code that includes the form handler on our template page:
<dsp:importbean bean="/atg/commerce/order/ShoppingCartModifier"/>
In order to add a SKU to the user’s shopping cart we needed to pass the ShoppingCartModifier the repositoryId of the product and the repositoryId of the SKU. These values are passed to the ShoppingCartModifier when the user pushes the Add To Cart button.
The ProductId is stored in the ShopingCartModifier form handler via a hidden text box, a common technique for setting properties on a form handler. Here is the code to do that:
<dsp:input bean="ShoppingCartModifier.ProductId" paramvalue="Product.repositoryId" type="hidden"/>
Creating a Dropdown List of All Child SKUs
The repositoryId of the SKU the user wants to add is stored in the form handler’s catalogRefIds property. The form handler is passed the IDs of the SKUs the user selects from a dropdown list. HTML allows the creation of a dropdown list using the <select ... > tag. Within this tag is a list of zero or more <option> tags for each item in the dropdown list.
In the following code, we used the ForEach component to cycle through all of the child SKUs of the product and to create a dropdown list selection for each one. If there are five SKUs for a product, it creates five items in the dropdown list. When the user selects one of these SKUs in the dropdown list, the repositoryID of that SKU is stored in the catalogRefIds property of the ShoppingCartModifier. Here is the code:
<%/*Create a dropdown list will all Sku in the Product. Store the selected SKU's id in the Form Handler: */%> <dsp:select bean="ShoppingCartModifier.catalogRefIds"> <%/*For each of the SKUs in this Product, add the SKU to the dropdown list:*/%> <dsp:droplet name="/atg/dynamo/droplet/ForEach"> <dsp:param name="array" param="Product.childSKUs"/> <dsp:param name="elementName" value="Sku"/> <dsp:param name="indexName" value="skuIndex"/> <dsp:oparam name="output"> <%/*This is the ID to store, if this SKU is selected in dropdown:*/%> <dsp:getvalueof id="option136" param="Sku.repositoryID" idtype="java.lang.String"> <dsp:option value="<%=option136%>"/> </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>
After page compilation, the above code is converted into HTML that looks something like this:
<select name="/atg/commerce/order/ShoppingCartModifier.catalogRefIds"> <option value="sku20014">1.5 Liter Bottle Red <option value="sku20015">1.5 Liter Bottle Blue </select>
For example, if the user chooses “1.5 Liter Bottle Red,” the value “sku20014” (the selected SKU’s repository ID) is in the ShoppingCartModifier.catalogRefIds property.
Add to Cart button
When the Add To Cart button is pushed, the handleAddItemToOrder method on the ShoppingCartModifier form handler is called. This method does all of the work necessary for adding this item to the order. Here is the code for the Add To Cart button:
<%/* ADD TO CART BUTTON: Adds this SKU to the Order*/%> <dsp:input bean="ShoppingCartModifier.addItemToOrder" type="submit" value=" Add to Cart "/>
If the addItemToOrder operation succeeds or fails, you may want to redirect the customer to another page. The ShoppingCartModifier has two properties that can be set on a page to indicate where the user should be redirected if the addItemToOrder operation succeeds or fails: ShoppingCartModifier.addItemToOrderSuccessURL and ShoppingCartModifier.addItemToOrderErrorURL
Here is an example of how we set the SuccessURL property using a hidden text box.
<%/* Goto this URL if NO errors are found during the ADD TO CART button processing:*/%> <dsp:input bean="ShoppingCartModifier.addItemToOrderSuccessURL" type="hidden" value="../checkout/cart.jsp"/>
Displaying Form Errors
If any errors are found during method calls on ShoppingCartModifier, the form handler stores all of these errors. They can be displayed with the following code fragment:
<dsp:include page="../../common/DisplayShoppingCartModifierErrors.jsp" flush="true"></dsp:include>
The ShoppingCartModifier is described in detail in the Order Processing chapter.
