This project is read-only.

User Module implementation

In this module, the user can manage your shopping cart, addresses and payment methods, do checkout process and check the orders status. This module has 2 services to manage the cart and the orders and one for navigation, also it has the presenters and interfaces for each view.
The development of this module was done in the same way as described in the Product and Admin modules implementation (using TDD). In the next sections we explain the particularities of the User module implementation.
structure.png
Fig. 1 | On the left, the solution structure showing the modules implemented. On the right, an initial diagram showing Product, Admin and User Module definitions and dependencies.

Some notes regarding the structure described in the picture:

  • We are using an Interface Class Library for services interfaces.
  • User module uses User.PageFlows project and PageFlow.Extensions to manage the checkout process.

Checkout process

The checkout process was implemented using a Page Flow Application Block extension: XmlPageFlow. The Checkout button from My Cart page starts the page flow. It navigates to the Checkout page where the user can select Billing Address, Shipping Address, Payment Type and then, confirms the order. With this, the checkout page flow process terminates and redirects to the User Profile page.

The following xml code shows how to add and configure page flow activities with XmlPageFlow in the web.config file:
<xmlPageFlow allowBackButton="true">
  <objectTypes>
    <statePersistenceProvider name="Session" type="WCSFContrib.PageFlow.Xml.Storage.Session.XmlPageFlowInstanceSessionStore, PageFlow.Xml" connectionString="myConnectionString" />
    <pageFlowType name="UserPageFlow" type="WCSFContrib.ECommerceCatalog.User.PageFlows.UserPageFlow, User.PageFlows"/>
    <statePersistenceProvider name="SessionStatePersister" type="WCSFContrib.PageFlow.Xml.Storage.Session.XmlPageFlowInstanceSessionStore, PageFlow.Xml"/>
  </objectTypes>
  <views>
    <view name="Cart" type="~/User/Cart.aspx"/>
    <view name="Products" type="~/Product/Default.aspx"/>
    <view name="Checkout" type="~/User/Checkout.aspx"/>
    <view name="UserProfile" type="~/User/Default.aspx"/>
    <view name="PageFlowError" type="~/User/PageFlowError.aspx"/>
  </views>
  <navigationGraphs>
    <navigationGraph name="UserXmlPageFlow" statePersist="SessionStatePersister" startView="UserProfile"
    abandonable="AllowAndSaveInstance" abortUrl="UserProfile"  pageFlowType="UserPageFlow">
      <node view="Cart">
        <navigateTo navigateValue="failed" view="PageFlowError"/>
        <navigateTo navigateValue="doCheckout" view="Checkout"/>
      </node>
      <node view="Products">
        <navigateTo navigateValue="addItem" view="Cart"/>
        <navigateTo navigateValue="addFailed" view="PageFlowError"/>
      </node>
      <node view="Checkout">
        <navigateTo navigateValue="successCheckout" view="UserProfile"/>
        <navigateTo navigateValue="failedCheckout" view="PageFlowError"/>
      </node>
      <node view="UserProfile">
        <navigateTo navigateValue="goCart" view="Cart"/>
      </node>
      <node view="PageFlowError">
        <navigateTo navigateValue="goBack" view="Cart"/>
      </node>
    </navigationGraph>
  </navigationGraphs>
</xmlPageFlow>

Sharing user controls

In “My Cart” section (from User Profile page), the user can review the product details of his added items. For this, is used the ProductDetails user control from Product module.
  • Cart.aspx:
<%@ Register Src="~/Product/UserControls/ProductDetails.ascx" TagName="ProductDetails" TagPrefix="uc1" %>

<%--...--%>

<uc1:ProductDetails ID="ProductDetailsUserControl" runat="server" />

  • Cart.aspx.cs:
public void ShowProductDetails(Item item)
{
    ProductDetailsUserControl.ShowProductDetails(item);
    DetailsModalPopupExtender.Show();
}

  • ProductDetails.ascx.cs:
#region IProductDetailsView Members

public void ShowProductDetails(Item item)
{
    if (item == null)
        return;

    _presenter.OnShowProductDetails(item);
}

//...

#endregion


productDetailsUC.jpg
Fig. 2 | ProductDetails user control.

E-Commerce Catalog - User Module - Walkthrough

1. Click on the User node from the navigation TreeView control.

2. Here, you can see your shopping cart (My Cart), addresses (My Addresses List), payment methods (My Payment Methods List) and check your orders status (My Orders).
user_profile.png
Fig. 3 | User profile page.

3. Click in “Add Address” icon (add_icon.png) from My Addresses List and add your address information.
add_address.png
Fig. 4 | Add address.

4. Click in “Add Payment Method” icon () from My Payment Methods List and add your payment information.
add_payment_method.png
Fig. 5 | Add payment method.

5. Go to My Cart to start the checkout process. Click on the Checkout button.
my_cart.png
Fig. 6 | User shopping cart.

6. In the Checkout page, you can select Billing Address, Shipping Address and Payment type and then,confirm the order (Submit Order button).
checkout.png
Fig. 7 | Confirm order page.

7. Now, in the User Profile page (My Orders section), you can check the orders status.
user_profile_with_orders.png
Fig. 8 | User profile page.

Last edited Mar 14, 2008 at 4:51 PM by mconverti, version 4

Comments

No comments yet.