The CRS-M shopping cart page contains the information and features common to most cart pages. As discussed in the “User Experience Design” section, this page was designed to allow individual rows in the cart (representing products) to be expanded downwards when the user touches them. When a row is touched and it expands downwards, the user is presented with these options:
Email the product to a friend
Remove the item from the cart
Change the item in the cart
In addition to displaying the items in the cart as these expanding rows, the order summary information is displayed, as well as a text box for entering a coupon code.
Structure
The top-level cart JSP can be found at /Storefront/j2ee/store.war/mobile/cart/cart.jsp. This JSP supports:
An empty cart (
emptyCart.jsp)A cart containing one or more items (
cartContent.jsp).
The cart.jsp file also contains the code that creates the “modal” effect when the user chooses to either email an item or remove an item from the cart. The associated CSS and JavaScript can be found in /Storefront/j2ee/store.war/mobile/css/base.css and /Storefront/j2ee/store.war/mobile/js/atg/cart.js respectively.
Empty Cart
To make an empty cart page more engaging to users, a horizontal slider similar to that on the homepage is displayed towards the bottom of the cart page. It contains “featured products,” which are products that are returned by the existing Commerce Reference Store featured product targeters. They are displayed in a “slider” which is a new instance of the “slider” used on the homepage. The following illustration shows an empty cart with the featured products slider.
Empty Cart Page with Featured Items Slider
While inspecting cart.js and other JavaScript files in CRS-M, it is worth noting that the CRS-M build script (not distributed as part of CRS-M) combines individual JavaScript files into one mobile.js file. This is discussed later in the Performance Considerations section, but the rationale is simply to minimize the number of server calls for data such as JavaScript and CSS files, hence improving the performance of the application. A consequence of this is that code in cart.js has access to variables declared in other JavaScript files that are combined into mobile.js as part of the CRS-M build. The sliders variable used in the creation of the featured products slider is one such example.
