Adding Multiple Items at Once to Shoppint Cart : ATG

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 with a non-zero 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"/>

Adding One Item at a Time to Shopping Cart : ATG

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 property 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) of the selected SKU (specified in CartModifierFormHandler.catalogRefIds and identified by repository ID) to the current Order and then reprices 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>

Creating and Retrieving Shopping Carts : ATG

The ShoppingCart component stores a user’s current and saved shopping carts. You can use the ShoppingCart component’s properties and handle methods to create a new shopping cart or retrieve one of the user’s saved shopping carts and make it the user’s current shopping cart.

The following JSP example illustrates how to create and retrieve shopping carts. In the example, the ShoppingCart.savedEmpty property is checked to determine whether the current user has any saved shopping carts. If the user doesn’t have any saved shopping carts, the user is given the option to create one. If the user has saved shopping carts, the user is given the option to select one of the saved shopping carts to either delete or make the current shopping cart, to delete all of the saved shopping carts, or to create a new shopping cart.




<dsp:importbean bean="/atg/commerce/ShoppingCart"/>

<dsp:form action="shoppingcart.jsp" method="post">
 <dsp:droplet name="/atg/dynamo/droplet/Switch">
   <dsp:param bean="ShoppingCart.savedEmpty" name="value"/>

   <dsp:oparam name="true">
     <!-- since there are no saved carts, we cannot switch to another so
          we only give them the option to create a new cart -->
     <dsp:input bean="ShoppingCart.create" value="Create" type="submit"/>
another shopping cart
   </dsp:oparam>

   <dsp:oparam name="false">
     <!-- We have other shopping carts, so let them do everything -->
     Shopping Cart <dsp:select bean="ShoppingCart.handlerOrderId">
     <dsp:droplet name="ForEach">
       <dsp:param bean="ShoppingCart.saved" name="array"/>
       <dsp:param value="savedcart" name="elementName"/>
       <dsp:oparam name="output">
         <dsp:getvalueof id="option26" param="savedcart.id"
idtype="java.lang.String">
<dsp:option value="<%=option26%>"/>
</dsp:getvalueof><dsp:valueof param="savedcart.id"/>
       </dsp:oparam>
     </dsp:droplet>
     </dsp:select>:
  <dsp:input bean="ShoppingCart.switch" value="Switch" type="submit"/> to,
  <dsp:input bean="ShoppingCart.delete" value="Delete" type="submit"/> or
  <dsp:input bean="ShoppingCart.create" value="Create" type="submit"/>
another shopping cart.<BR>
     <dsp:input bean="ShoppingCart.deleteAll"
value="Delete All Shopping Carts" type="submit"/>
   </dsp:oparam>

 </dsp:droplet>
</dsp:form>

Implementing Order Retrieval

You can also use the OrderLookup servlet bean to retrieve a user’s incomplete orders (that is, shopping carts). OrderLookup enables you to retrieve a single order, all orders assigned to a particular cost center , all orders placed by a particular user, or all orders placed by a particular user that are in specific state, such as INCOMPLETE.

Once the desired shopping cart is moved to ShoppingCart.current, you can use a ForEach servlet bean to iterate over the commerce items in the cart and display them. The following JSP code example illustrates how to do this. In the example, a checkbox is rendered beside each item to allow the user to remove any item from the cart; likewise, a textbox is rendered beside each item to allow the user to modify the quantity of any item.

<droplet bean="ForEach">
  <param name="array" value="bean:ShoppingCart.current.commerceItems">
  <param name="elementName" value="item">
  <oparam name="output">
<tr valign=top>
<td>
  <input type="checkbox" unchecked
    bean="CartModifierFormHandler.removalCatalogRefIds"
    value="param:item.catalogRefId">
</td>
<td>
  <input size=4 name="param:item.catalogRefId"
value="param:item.quantity">
</td>
<td>
  <droplet src="product_fragment.jsp">
  <param name="childProduct" value="param:item.auxiliaryData.productRef">
  <%@ include file="product_fragment.jsp"%>
  </droplet>
  </oparam>
</droplet>