COMP3241 E-Commerce Technologies Richard Henson University of Worcester November 2012

Week 7: Mechanism of a Shopping Cart & Customer Login n Objectives:  Explain how the shopping cart dataset interfaces with the products table  Explain how a shopping cart can update automatically in response to a user change of mind  Use the shopping cart system to gather customer data, that would enable goods to be delivered to a real address

The Generalised Shopping Cart n Basic features:  five defined data fields are the bare minimum (cart record ID, cart ID, product ID, product description, product price)  as you’ve seen, description & price fields interact with a remote product table via product ID  further constants and variable fields added to the local dataset to store results of calculations

The Common Features of Shopping Cart Systems n Code for the cart can be written in many different languages  can run on different web server platforms  all must create the local dataset, store the constants, do the calculations, allow interaction with remote database

Trapping Data for the Shopping Cart n Server scripts needed to manage the dataset…  link cart fields with “product ID”, “price” and “description” fields in the database  set the “quantity” field to have a default value of 1  give each cart record a unique identifier

Additional Shopping Cart Fields n The point of a shopping cart is to advise the customer about:  what they’ve bought (clicked on)  the total amount they will have to pay… n This requires calculations, and further data fields to hold the results  Quantity * Price = Line Total  Sum of line totals = Order Total (minus Tax)  Order Total + Tax = What customer pays for goods  Total including Tax + Shipping = Total amount due

How Carts create and store the line totals & order total n If only one product is selected…  the line total cost is calculated (cost * quantity)  order total becomes equal to line total  a record including this value is written to the dataset  and stored as a record within the session cookie n If more than one product is selected, the line totals need to be added together  order total becomes the result of the addition

How a click on the product can update the cart n Essential that the cart dataset is available with each product page  otherwise, product and quantity data can’t be added to the cart! n Advice: use “split screen” to see the code as well as the screen design  then able to check the code that corresponds with the cart, and its appropriateness for page display  if there is a mismatch, you can’t expect the shopping cart to be updated…

Web Controls and ASP.net Shopping Carts n Web controls…object classes used by asp.net to render parts of a page  similar to HTML “forms”  extra advantage of being reusable n An.aspx web page may use a hierarchical structure of defined web controls  making a combination of code behind and assembly-based controls easily manageable

Some Typical Web Controls that used with a HTML form n button listbox n checkbox radiobutton n checkboxlist radiobuttonlist n dropdownlist textbox n imagebutton label

Web Control syntax (1) n Textbox & contents must be held within a HTML form  i.e. between and  i.e. between and n Opening tag: n Opening tag:  various properties of the control follow… »e.g. display of text box »displayed text contents »runat=“server” n Closing tag: /> or n Closing tag: /> or

Dropdown box control & “nesting” syntax n Drop Down List box & contents  again within a HTML form n Opening tag: … 1.properties of the control individually defined e.g. properties of drop down list box, and displayed text contents runat=“server” (essential) Controlname ID = “unique name” (also essential) 2.further nested control needed for each item in the drop down list…

Dropdown box control & “nesting” syntax (cont…) 3. Each item defined as: …. properties of listitem…. …. properties of listitem…. properties should include: text = “” (what is displayed) value = “” (what is passed on) 4. Closing tag: or />

Dropdown box control & “nesting” syntax (3) n Typical code for whole structure:  Note the embedding of one control, listitem within another, dropdownbox <form> text = “true” value = “1”/> text = “true” value = “1”/> text = “false” value = “0”/> text = “false” value = “0”/>/></form>

Summary of cart logic n Up to three different labels for product ID:  product table value  parameter value  cart value n This can be very confusing, but the cart won’t work without the right associations  all cart control parameters must be correctly entered… otherwise… »no data or the wrong data will be added »incorrect parameters will be invoked causing.net errors

WebXelCart Assembly n Collection of compiled versions of many coded web controls:  Cart  AddFromDB  WriteToDB  etc.. n Visual Studio can “open” an assembly to reveal defined properties of each control

WebXelCart:Cart control n Like any other asp.net web control…  stored as executable code n Visual Studio makes it available to any.net pages in the project…  assuming parent assembly is… »held in the relevant /App_Data folder »and added to “References” n Can be called as … n Can be called as …  like any other web control  parameters have to be set accordingly

Passing the Product ID Parameter Product Page Add from DB scripts Product ID value sent as e.g. “ProdID” fields extracted from remote database Shopping Cart Remote DB

Updating Cart Values n When the customer clicks on a hyperlink/button associated with a product:  a “line record” is created on the cart for that product (based on the parameter passed)  quantity is set at the default value of 1 n Cart Totals are then automatically calculated n If customer clicks on a second product…  further cart record is created  all cart totals recalculated

Cart Display Page n Cart.aspx consists of a HTML table with scripts added to insert cart values in the right places on the table n Pages should be designed so cart.aspx is available at all times, so the customer can readily remind themselves what they have clicked on… n Cart.aspx should also include:  update product quantity (e.g. buy 2 instead of 1)  remove a cart line altogether (erase cart record)

Login & Checkout Pages n A user should NOT have to log on in order to activate the shopping cart n However, the user becomes a customer once there is a commitment to purchase  at that point, the login page must be offered n First stage of checkout:  recall the customer’s details (if they exist)  gather new customer details

Designing the Customer Page n This is challenging, because the page has to do two different things on the same HTML form…  gather new customer details  display existing customer details n Also the matter of username/password  so that existing customers have as much as possible done for them…

Adding Customer Details n Fields required:  name/address/postcode to send the goods to  address to provide fulfilment information to the customer  Username (use address) & password  telephone number as backup to address n Validation of field contents:  essential to prevent garbage data being sent to the database and causing run-time errors

WebXel:WritetoDB control n Has to do two different things, depending on whether customer exists or not… n Checks for existing customer based on address  if not, blank form has to be completed and sent to customer table  If so, customer details brought from customer table and displayed

WebXel:Login control n Login page called during customer login for existing customers n Uses WebXelCart:Login  checks /password supplied against values in the customer table »IF a match… causes customer/getcust.aspx page to be called and customer record to be displayed »ELSE… brings up a blank customer/getcust.aspx page with error message, and allows details to be added

Logon Page n Called from the customers/getcust page n Uses WebXelCart:Login control  allows the customer to use their chosen username/password to proceed to a more secure/purchasing area of the website n If the login fails…  the customer should be informed on screen n If successful…  the customer should have their details displayed  and be provided with an option to update

Order Display/Online Invoice n Once the customer details have been agreed…  the system presents an “order summary” page  to make this page valid as an online invoice it should also display »the order number »the address where the order is to be shipped »the amount the customer will pay including all additional charges

Store Order control n The cart is only a temporary local store so cannot be used for fulfilment  So after the invoice has been displayed, the order needs to be stored somewhere remotely in the database n Once the invoice is accepted, by the customer clicking on “payment”, the order details must be written to the database  this is achieved through the WebXel:SaveOrder control

Payment & Send Order n Once the payment system has approved payment, the vendor can then read the order and set about fulfilling it n This is beyond the scope of assignment 2…  the payment page should therefore a “dummy” page »it should still provide good navigation to other pages »it COULD still trigger an (e.g. copy of invoice) to the customer »WebXelCart:Sendmail if you are feeling adventurous!

Payment System n In a real e-commerce system… control would normally be transferred to a merchant services provider to deal with interaction with the International Banking Network  the system would again have to provide direct on screen interaction with the customer  the system should also trigger a first message to the customer »the customer has given it their bank details and will be seeking reassurance that: n their details have been processed n goods will soon be on their way

“Thank You” Page and ing the customer n COULD be overlooked, but not a good idea…  the customer will be glad of further reassurance and any indication that the vendor is worthy of their business  the customer will also appreciate further messages by