In the case where the cart contains one or more items, cartContent.jsp uses /Storefront/j2ee/store.war/mobile/cart/gadgets/cartItems.jsp to display the items in that cart. This in turn uses /Storefront/j2ee/store.war/mobile/cart/gadgets/cartItem.jsp to display individual items in the cart. Since CSS and JavaScript are externalized as much as possible here, as in all areas of CRS-M, the details of how the data is displayed once it has been retrieved using traditional page code can be found in Mobile.css and cart.js. The cartItem CSS class is responsible for styling an item in the cart, while the showCartItemEditBox JavaScript function makes an item in the cart (a “row” of the cart) “touchable.”
Actions on a Cart Item
When the user touches an item in the cart, the row containing that item expands downwards to become slightly larger, and the image of the item is enlarged and moved to the background. Additional options for emailing this item to a friend, removing this item from the cart, or changing this item are also presented when the cart item is touched.
If the user chooses to either email the item or remove the item from the cart, the chosen option becomes modal in the foreground while the background is darkened. As mentioned above, the code for this behavior is located in the top-level cart.jsp.
If the user chooses to change the item, he/she is returned to the product details page and that particular item is displayed. Once a change has been made, the button text changes to “Back to Cart,” and touching this button will take the user to the cart page once again where the most recent changes will be reflected. The following illustration shows a cart containing two items, one of which has been selected for editing.
Ready to edit an item in the cart
The following illustration shows the modal “Delete” popup that is displayed when the user touches the Delete button.
The modal “Delete” popup
Order Summary Information
Displayed below the cart items on the cart page is the order summary information, such as the cart/order total, discounts applied, shipping cost, taxes etc. In our example, the coupon “TENSHIP” has been applied to the order. The logic for displaying this summary information is encapsulated within:
/Storefront/j2ee/store.war/mobile/global/gadgets/orderSummary.jsp
which in turn includes:
/Storefront/j2ee/store.war/mobile/global/gadgets/promotionCode.jsp
that contains the logic for applying a coupon code to the order.
Order History and Returns
Historical orders and return history are supported in CRS-M in a similar fashion as in Commerce Reference Store, using a JSP:
<home>\ATG11.0\CommerceReferenceStore\Store\Storefront\j2ee-apps\Storefront\store.war\mobile\myaccount\myOrders.jsp
<home>\ATG11.0\CommerceReferenceStore\Store\Storefront\j2ee-apps\Storefront\store.war\mobile\myaccount\orderDetail.jsp
<home>\ATG11.0\CommerceReferenceStore\Store\Storefront\j2ee-apps\Storefront\store.war\mobile\myaccount\myReturns.jsp
<home>\ATG11.0\CommerceReferenceStore\Store\Storefront\j2ee-apps\Storefront\store.war\mobile\myaccount\returnDetail.jsp
Not Yet Supported
As mentioned in “Feature Comparison with Commerce Reference Store”, gift wrap is not supported by CRS-M in this release. This means that the option to add gift wrap is not presented to the user during the checkout flow.
Should a user start adding items, including giftwrap, to his/her cart via Commerce Reference Store, and then switch over to CRS-M to view the cart before completing the checkout process, gift wrap items will not display on the CRS-M cart.
