COMP3121 E-Commerce Technologies Richard Henson University of Worcester October 2010

Week 5: B2C E-commerce websites with Shopping Cart n Objectives:  describe the components of a typical B2C on-line trading system  describe the stages required to capture an order on-line and send it to be stored by a webserver  describe the stages required in producing an online invoice and receiving payment on-line  apply a knowledge of the above to design a “shopping basket” on-line payment system

Systems for On-line Ordering n COULD be achieved via the www in a number of ways:  via  using a HTML Form that sends “semi-structured” data to an address  using a more sophisticated HTML forms system (a shopping cart) »sends data to an on-line product database »database could be local (client only system) or on a web server (client-server system) »data could be processed and presented as an online invoice »invoice could be linked to a payment system

Order via n Two possibilities:  using address given on home page  using a HTML mailto command on the home page, which allows the message header to be generated automatically n In either case…  a manual system requiring the vendor to physically read the message and send a reply...

“Processes” in ordering via n Customer:  initiates communication using address on web site  types out/sends an unstructured message requesting product(s) displayed on website n Vendor:  replies with an ed order »may have be inputted by hand  requests some means of payment before proceeding… »issues with security of personal data for unencrypted … »may have to be sent by post…

Order via a simple HTML form n Customer presented with product list as a form on the web page n Just needs to type in a number for qty of each product required and submit the completed form to the vendor’s address n Because the information is structured, it can be processed automatically by software at the server end

Ordering via Shopping Cart n Programming behind the web pages does all the processing n Ordering products should be as easy as possible for the customer n The customer should see exactly what they are ordering n The database should incorporate a means of systematically storing customer addresses n The shopping cart logic should total up the exact amount the customer will have to pay

E-commerce via Shopping Cart System n Any e-commerce website should fulfill two main functions:  advertising & promoting the company’s products  providing a secure and robust system for encouraging people to buy those products online n Each function is a subsystem in its own right »Presentation is the FRONT END »Behind the scenes scripts & database work is the BACK END

Shopping System Front End n Should be regarded as the online equivalent of a high street shop  browsing through the product web pages is the equivalent of walking round the shop n Objective should be  to use creative web page design to present products as positively as possible to encourage customers to want to buy…  provide a “buy” button in appropriate places

The Shopping System Back End n The boring bit! n Ideally, this should all work perfectly, and never really be noticed…  “transparent to the user” n Consists of the components that make up the remote web server:  relational database holding product, transaction, and possibly customer data  server scripts to manipulate that data, including… »connectivity string(s) to enable scripts to interact with database »SQL statements to query fields and tables

Linking Front-End and Back-End n The product web pages that display locally have to link with the data on that that remote server  and to impress a non-techie user, it all needs to happen “seamlessly” n This is where a shopping cart system becomes invaluable…  cart data held locally for quickness  cart display gives customer immediate feedback on what has already been bought

More about Shopping Cart software n Functions  collects the order using information gathered by mouse clicks on shopping pages  stores & processes the order data  prepares an invoice  displays invoice for customer, requesting some means of payment n Cart runs on the browser (client-side)… »no interaction needed with server until transaction complete n Links with the vendor’s web server (server- side) »interaction with server each time new data is entered

Payment & Fulfillment in B2C e-commerce n The “post-ordering” web pages  again, must look right, to maintain the customer’s confidence in the company as an online vendor n Consist of...  secure payment pages, that connect to a clearly identified (logo?) merchant services provider  corporate “thank you” page  system to customer with information concerning the acceptance and progress of their order

The Full Shopping Cart system n Can be regarded as a series of components that work with the front end product pages:  The cart itself  cart-related scripts that: »present the cart »can convert cart data into orders »can work with customer information to create invoices  The payment system software will be needed that will interface with the International banking network  The fulfilment pages that will advise the customer of the progress of their order, and encourage them to return to the website in future

Some Shopping Cart Implementations n approach  everything happens fast, but happens client-end  not realistic unless only tiny amounts of data involved n “All on the server” approach  means a lot of server requests, and a lot of waiting for the server; can ruin the shopping experience n Best of both (preferred):  Local datasets and cookies  Remote scripts and databases

Successful Shopping Cart Systems n Most commonly used (and most successful) for B2C e-commerce e.g. amazon.com:  web page displays live data from organisational web server  customer selects product(s) and qty from on-line form  costs, including VAT and any extras automatically included on on-line invoice  customer can choose to buy (or not!) directly by simply clicking a screen button  system requests means of payment before continuing…

Implementations of Shopping Cart principles n Producing a shopping cart system from scratch requires very good programming skills n A lot of time can be saved by using an E- commerce RAD toolkit. Various options available:  menu driven solutions e.g. Actinic Catalogue  modify code provided e.g. Shop assistant  components provided free to use via Internet – use a tool such as Dreamweaver to assemble them »E.g. Ultracart ( - 1 month free trial) »Charon cart (asp basic version free) »WebXel (asp.net C# version free)

- demonstration of features of a shopping cart n System based on a number of linked HTML & embedded JavaScript pages n The approach:  start with a website that someone has already produced, tried, and tested  then change the code to fit the needs of the client… n Included:  a range of demo sites all using the same basic shopping system

System n Written in JavaScript & optimised to be as compact as possible  main system file is only 30K in size n Further useful files in supporting folders  allows freedom in page design n Whole shopping system could fit on a floppy disk! n No server side support:  works by downloading all files to the local computer… »Then using the browser to execute them locally  makes the system work very quickly

n Default shopping pages readily customizable  e.g. buttons, text, pictures etc. n Shows all good features of a shopping cart:  automatically displays “shopping basket” whenever forms data is added  captures customer data  handles tax and shipping  links with payment system n Payment system links built-in  outsources authentication and card transactions  hence, security of financial data can be handled by a trusted third party

System Architecture (if interested…) n Very confusing because it uses several instances of index.html  root folder file boots the main system file, in the system folder  causes the system to be loaded »a web page informs that system is being loaded…”  finally, the home page is loaded from the pages folder n Product Data  saved within product pages as javascript arrays n Shopping Cart Data  set up on local hard disk as a cookie »NOT a session cookie »data remains after user has logged out, and system has been switched off!  cookie values put there by customer clicking on a pay button n Cart itself created by calling a JavaScript routine, and cookie values are placed into a HTML table  other features are also JavaScript routines

“Bookshop” – e.g. of shopping system design n Very simple design...  enables ordering of a book in at least two ways »text or image n Easy navigation:  forward (buttons at the bottom of the page)  back (hyperlinks at top and bottom) n Buttons at the bottom of the page:  Order this Book  3 Copies for 2 Offer  Review Basket

Bookshop Site design continued.. n Clicking on either the image of the book or the order button displays the all important Basket Review Page n Features to note:  heading - reflect corporate image, etc.  buttons at top of page - good navigation  option to go to payment page - cashier  form for on-line invoice & “remove item” check box  contains hyperlink to details of the book  bullet pointed help

Bookshop Site – Preparing an On Screen Invoice n Customer Details Page…  created when customer commits to a purchase  customer has to appropriately complete name, address, address fields (all are validated) n “Next” button provides the invoice page:  if customer details are not in the right format… »customer Details page will be called again n Features of on screen invoice page:  includes shipping and VAT charges  to go further, customer must choose from options a payment method...

Handling Payment n Needs a secure Payment page, involving interaction with transaction services…  default set up therefore does not include on-line credit card transactions »assignment 2 can leave this aspect similarly blank »however, you need to investigate the theory of payment via Internet for assignment 1… n After payment, fulfilment…  thank you page  then a goodbye page…  and (preferably) an confirmation of order... »independent of whether payment has been accepted

Security and E-commerce n Security initially focused mostly on financial transaction  system needs to be designed so financial data cannot be tapped into en route or on either client or server computer  Quite a challenge… often passed to 3 rd party provider »e.g. PayPal n E-commerce systems also require customers to supply personal data  slow to recognise potential for infringement of EU data protection legislation »more recently acknowledged to be a problem… »many systems still on “catch up” as regards shopping cart design…

Developing your own cart n Many different possibilities n Fortunately many skeletal shopping cart systems have been created n Server Behaviours can easily be added to the Dreamweaver environment using Extension Manager and.mxp files  allows shopping cart components to be added and assembled into a unique system quite easily e.g.’s »Charon Cart (asp) »Webthang (asp, asp.net) »WebXel (asp.net)

Challenges with “Assembling” a Cart n What can go wrong will!  dealing with programming code can be a dangerous business! n Regard syntax errors as a challenge, not a problem!  Could be that the user interacting with the database doesn’t have sufficient user rights »Right-click on folder & check the security tag  Could be that the database isn’t in the right place or has moved since the connection was last made »could just redo the connection but may be quicker to redo the page & reapply the server behaviour

What makes a successful on-line B2C E-commerce site? n One that attracts customers  And retains customers… n Principles of good design well established  web pages appropriately designed  shopping system user-friendly & works efficiently n Successful e-commerce websites save the vendor an awful lot of money!  problem: high initial cost  gain: potentially huge ROI

Business Benefits of B2C n Can generate more sales…  increase revenue n BUT how can B2C e-commerce cut costs?  data input is done by the customer »help from the shopping pages and shopping cart  data output is presented directly on the screen  cuts greatly on administration…

B2C E-commerce: Keeping the customer satisfied… n All transaction data has to be presented digitally on-screen…  order forms (no opening envelopes and processing an order from paper)  invoices (no need to print them, put them into envelopes, or send them off by post) n Huge potential cost saving, but the screen interface must be designed FOR THE CUSTOMER!!! n If the customer is not comfortable with it, they may not buy… and may not return

Internet Marketing n Huge growth area…  Whole conferences devoted to e.g. “Technologies for Marketing” n In the early days of e-commerce, the rate of hits on website WAS the value of the company (!)  now revised downwards, but same principle applies… »formula based on (say) every tenth visitor will be a customer… n Best ways to attract visitors:  use search engines effectively  advertise URL effectively using a diverse range of media

Promoting the Website n The business will not get any benefits from increase in sales if there are no visitors  however excellent the site may be… n MANY ways to maximise the number of visitors to a site… n Suggestions? Group Activity…

Technologies for Improving Hit Rate n Many applications available  Some very simple »counters »meta name generators »date/time/special effects, etc. (client end) »links to code located on other sides (e.g weather forecast)  Others more sophisticated: two categories: »watch/record visitor behaviour n Example: ASP Sheriff »provide more features for the site n Any number of possibilities

Effective Use of Search Engines n Objective: to use appropriate techniques to cause the search engine display your site in its “top ten”  Search Engine “spiders” »crawl round the net looking out for keywords in web pages »retrieve keywords and corresponding URLs »take keywords back to the search engine database »Program automatically adds the lists of keywords to the database n right keywords MUST be presented to the spiders

Effective Use of Search Engines (2) n Objective: keeping the site in the top ten n Search engines like Google monitor websites: n Longer-term ranking also based on:  hit rate  number, and activity, of external links on site n Technologies available to help boost rankings  Whole new discipline of e-marketing…