Transcript a shopping cart - University of Worcester

COMP3121
E-Commerce Technologies
Richard Henson
University of Worcester
October 2010
Week 5: B2C E-commerce
websites with Shopping Cart

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

COULD be achieved via the www in a
number of ways:
 via email
 using a HTML Form that sends “semi-structured”
data to an email 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 e-mail

Two possibilities:

using email address given on home page
using a HTML mailto command on the
home page, which allows the email
message header to be generated
automatically
In either case…
 a manual system requiring the vendor to
physically read the message and send a reply...
“Processes” in ordering via e-mail

Customer:
 initiates communication using email address on
web site
 types out/sends an unstructured message
requesting product(s) displayed on website

Vendor:
 replies with an emailed order
» may have be inputted by hand
 requests some means of payment before
proceeding…
» issues with security of personal data for unencrypted
email…
» may have to be sent by post…
Order via a simple HTML form



Customer presented with product list as a
form on the web page
Just needs to type in a number for qty of
each product required and submit the
completed form to the vendor’s email
address
Because the information is structured, it can
be processed automatically by software at
the server end
Ordering via Shopping Cart





Programming behind the web pages does all
the processing
Ordering products should be as easy as
possible for the customer
The customer should see exactly what they are
ordering
The database should incorporate a means of
systematically storing customer addresses
The shopping cart logic should total up the
exact amount the customer will have to pay
E-commerce
via Shopping Cart System

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

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

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

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


The boring bit!
Ideally, this should all work perfectly, and never
really be noticed…
 “transparent to the user”

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

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”

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

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

Cart runs on the browser (client-side)…
» no interaction needed with server until transaction
complete

Links with the vendor’s web server (serverside)
» interaction with server each time new data is entered
Payment & Fulfillment
in B2C e-commerce

The “post-ordering” web pages
 again, must look right, to maintain the customer’s
confidence in the company as an online vendor

Consist of...
 secure payment pages, that connect to a clearly
identified (logo?) merchant services provider
 corporate “thank you” page
 system to email customer with information
concerning the acceptance and progress of their
order
The Full Shopping Cart system

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

Shop@ssistant approach
 everything happens fast, but happens client-end
 not realistic unless only tiny amounts of data involved

“All on the server” approach
 means a lot of server requests, and a lot of waiting for
the server; can ruin the shopping experience

Best of both (preferred):
 Local datasets and cookies
 Remote scripts and databases
Successful Shopping Cart
Systems

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


Producing a shopping cart system from scratch
requires very good programming skills
A lot of time can be saved by using an Ecommerce 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 (www.ultracart.com - 1 month free trial)
» Charon cart (asp basic version free)
» WebXel (asp.net C# version free)
Shop@ssistant - demonstration of
features of a shopping cart


System based on a number of linked HTML &
embedded JavaScript pages
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…

Included:
 a range of demo sites all using the same basic
shopping system
Shop@ssistant System

Written in JavaScript & optimised to be as
compact as possible
 main system file is only 30K in size

Further useful files in supporting folders
 allows freedom in page design


Whole shopping system could fit on a floppy
disk!
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
Shop@ssistant


Default shopping pages readily
customizable
 e.g. buttons, text, pictures etc.
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

Payment system links built-in
 outsources authentication and card transactions
 hence, security of financial data can be handled by a
trusted third party
Shop@ssistant System
Architecture (if interested…)

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 “Shop@ssistant system is being loaded…”
 finally, the home page is loaded from the pages folder

Product Data
 saved within product pages as javascript arrays

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

Cart itself created by calling a JavaScript routine, and cookie
values are placed into a HTML table
 other features are also JavaScript routines
Shop@ssistant “Bookshop” –
e.g. of shopping system design

Very simple design...
 enables ordering of a book in at least two ways
» text or image

Easy navigation:

forward (buttons at the bottom of the page)
back (hyperlinks at top and bottom)
Buttons at the bottom of the page:
 Order this Book
 3 Copies for 2 Offer
 Review Basket
Bookshop Site design
continued..


Clicking on either the image of the book or the
order button displays the all important Basket
Review Page
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

Customer Details Page…
 created when customer commits to a purchase
 customer has to appropriately complete name,
address, email address fields (all are validated)

“Next” button provides the invoice page:
 if customer details are not in the right format…
» customer Details page will be called again

Features of on screen invoice page:
 includes shipping and VAT charges
 to go further, customer must choose from options
a payment method...
Handling Payment

Needs a secure Payment page, involving
interaction with transaction services…
 default Shop@ssistant 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…

After payment, fulfilment…
 thank you page
 then a goodbye page…
 and (preferably) an email confirmation of order...
» independent of whether payment has been accepted
Security and E-commerce

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 3rd party
provider
» e.g. PayPal

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



Many different possibilities
Fortunately many skeletal shopping cart
systems have been created
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

What can go wrong will!
 dealing with programming code can be a
dangerous business!

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?

One that attracts customers
 And retains customers…

Principles of good design well established
 web pages appropriately designed
 shopping system user-friendly & works efficiently

Successful e-commerce websites save the
vendor an awful lot of money!
 problem: high initial cost
 gain: potentially huge ROI
Business Benefits of B2C

Can generate more sales…
increase revenue

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…

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)


Huge potential cost saving, but the screen
interface must be designed FOR THE
CUSTOMER!!!
If the customer is not comfortable with it, they
may not buy… and may not return
Internet Marketing

Huge growth area…
 Whole conferences devoted to e.g. “Technologies
for Marketing”

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…

Best ways to attract visitors:
 use search engines effectively
 advertise URL effectively using a diverse range of
media
Promoting the Website

The business will not get any benefits
from increase in sales if there are no
visitors
however excellent the site may be…
MANY ways to maximise the number of
visitors to a site…
 Suggestions? Group Activity…

Technologies for
Improving Hit Rate

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

Example: ASP Sheriff
» provide more features for the site

Any number of possibilities
Effective Use of Search Engines

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

right keywords MUST be presented to the spiders
Effective Use of
Search Engines (2)



Objective: keeping the site in the top ten
Search engines like Google monitor websites:
Longer-term ranking also based on:
 hit rate
 number, and activity, of external links on site

Technologies available to help boost rankings
 Whole new discipline of e-marketing…