Shopping cart [Creating a Simple Store]

One of the first things that have to be designed while setting up an online store is the shopping cart. The shopping cart should ideally allow the end user to choose and add multiple products to the cart and be able to check out from the website.

The checkout process is outlined as follows:

1.       Customer visits the product listing page.

2.       Customer selects a product; he/she is taken to the product detail page.

3.       Customer then chooses to purchase the product; customer is expected to add the desired quantity to the cart.

4.       Customer is redirected to the shopping cart page; here the customer may make any changes to the order if necessary.

5.       Customer chooses the mode of payment and enters the payment information.

6.       If successful, the customer is presented with an option to update the shipping details.

7.       Customer then confirms the order.

8.       The order is received at the retailer; the retailer then goes ahead and processes the order.

So let's get started and create our store front; our next step will be to design a table structure which will support this store. For this we create the following two tables:

◆        store_products: This table will store all product related information

◆        store_orders: This table will store all order-related information

For simplicity, we will shorten the Checkout process by skipping some steps. We have modified the process so that we can only have one product per order; we will also skip the updating of shipping details and the customer order confirmation steps:

1.       Create tables to hold the products and orders data:

CREATE TABLE IF NOT EXISTS store_products ( id int(11) NOT NULL AUTO_INCREMENT,

name varchar(255) NOT NULL, desc varchar(255) NOT NULL, cost float(9,2) NOT NULL, PRIMARY KEY (id)

);

CREATE TABLE IF NOT EXISTS store_orders ( id int(11) NOT NULL AUTO_INCREMENT, store_product_id int(11) NOT NULL,

qty int(11) NOT NULL,

total float(9,2) NOT NULL, status enum('new', 'completed',

'shipped', 'cancelled')   DEFAULT NULL,

stamp timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, first_name varchar(255) DEFAULT NULL,

last_name varchar(255) DEFAULT NULL, email varchar(255) DEFAULT NULL, ship_to_street varchar(255) DEFAULT NULL, ship_to_city varchar(255) DEFAULT NULL, ship_to_state varchar(2) DEFAULT NULL, ship_to_zip int(11) DEFAULT NULL,

PRIMARY KEY (id)

);

2.       Create entities for StoreOrder and StoreProduct, and also create necessary table gateway objects for data access.

3.       Create a StoreController controller, which will be used as our shopping cart.

4.       StoreController will support the following actions:

‰        indexAction(): This action will list all products in the website

‰        productDetailAction(): This will display the details of a specific

product; this will also allow the customer to add a product to the cart

‰        shoppingCartAction(): This action is used to render the shopping cart before leaving for the payment processing page

‰        paypalExpressCheckoutAction(): This action will redirect the user to the PayPal Express Checkout page

‰        paymentConfirmAction(): This action will handle the redirection from PayPal Express Checkout back to the shopping cart upon successful payment

‰        paymentCancelAction(): This action will handle the redirection from PayPal Express Checkout back to the shopping cart upon failed payment

5.       Create the necessary views to display the content of the shopping cart.

6.       Add the necessary methods to StoreOrder to calculate the order total upon adding items to the orders.

7.     The final user interface should look like the following screenshot. The product listing page lists all products in the website/category; in this case, the two test products are listed in the following screenshot:

The product detail page allows users to view details of a product, and also add the specified quantity to the shopping cart:

The Shopping Cart page lists all products that are added to the cart along with their unit price, quantity, and subtotal:

What just happened?

We have created a shopping cart interface for our new store; we will be modifying this interface further in order to add support for the payment processor. But before we get to that stage, let's create a simple store administration interface to enable us to manage the store and orders.