CIT-647 E-Commerce Applications Development

Welcome to
E-Commerce Applications Development
Lecture # 12: The Shopping Basket (The Shopping Cart)

Rana Ahmad Ali Tabassam

Department of Information Technology
University College of Management & Sciences
Khanewal, Pakistan

a.tabassam@gmail.com

© 2022-2023 by Ahmad Ali Tabassam. Some rights reserved.

valid with
01/02/2023
oral explanation!
 Outline
 Enhancing the User Experience (UX)
 Why it is so important for online stores? previous
lecture
 Discussing user experience one-by-one

 Shopping Basket (using MVC: Model, View, Controller)

 Stages to maintain shopping basket in framework
 Viewing Shopping Basket

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 2
 Outline
 Shopping Basket (using MVC: Model, View, Controller)

 Stages to maintain shopping basket in framework

 Viewing Shopping Basket

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 3
 What is Shopping Basket or Shopping Cart?
 Definition: A shopping cart on an online store's site is a piece of
software that facilitates the purchase of a product or service.

 It accepts the customer's payment and organizes the distribution of

that information to the merchant, payment processor and other
parties.

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 4
 Shopping Basket
 Major step in effectively selling products online is the shopping basket
– It directly leads into the checkout process

 We will learn
– How to structure and create a shopping basket?
– How to manage the contents of the shopping basket?
– How to deal with a visitor signing up, and transferring their basket to their
user accounts?

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 5
 Shopping Basket
• Shopping basket is first stage to enable online sale & purchase of
products
• There are few others methods of online shopping than shopping
basket
1) One-Click Payments
2) Service Subscription Payments
3) Auctions

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 6
 One-Click Payment Shopping
• One-Click Payment Process
• A payment button on a product view
• Customer clicks on the payment button
– Take all of customer, product and payment data
– Their payment is processed
– Payment processor notifies the administrator of the product
• The customer, delivery details, and the amount paid
– After it, warehouse transfers the product to customer

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 7
 One-Click Payment Shopping
• One-click ordering makes things easier for the customer (Advantage)
– Reducing the need to go through an entire payment process

• Customers can easily order things by mistake (Disadvantage)

– Customers need to be sure their default delivery details are correct in
advance
– It is not easy to add voucher codes without adding more clicks
– Discounts for multiple purchases
– Bundled shipping can't be taken into account
– Transaction charges will be applied on each transaction

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 8
 Service Subscription Payment and Shopping
• Similar to one-click payment
• You first click on the subscription level, and then you pay
(example IEEE Membership)
• Customer is charged based on his subscription level
• With a subscription payment method
– The transaction fees apply to less on regular and larger payments.
• For example, the customer may wish to make 25 purchases a month,
and each purchase would not charged a transaction fee

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 9
 Auctions - Shopping
• Auctions lead to bidding for products (example eBay)
• Auctions involves
– The customer committing to purchase the product at a certain price
– And provided no other customer commits to a higher price within the auction
time window
• Often, auction sites are automated
– The customer enters a maximum price over the duration of the auction
– The website will increase the customer's bid, with respect to their maximum
bid when other bids comes in

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 10
 Shopping Basket - View
• If there is nothing in the customer's basket, show empty basket
message

if not empty basket

• If there is nothing in the customer's basket, show empty basket
message

if empty basket
CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 11
 Shopping Basket - View
• If not empty, then list of items in basket

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 12
 Considerations for Shopping Basket
• While creating a shopping basket, few considerations are taken into
account
– Stock Level
• Sufficient stock
– Product Variations
• Different versions of a product
– Product Customization
• If customization allowed, record it
– Template
• No. of template to show empty, summary of basket etc.
– Subtotal
• Sub total of products in shopping basket

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 13
 When to Build Shopping Basket?
• Our shopping basket will probably be stored on most pages
• Regardless of where a user is within the site
• Another consideration is with regards to user authentication
– The basket will be built in a different way
– We need to ensure we build the basket after any authentication
processing is done

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 14
 Shopping Basket - Model
• A single database table is required that relates these products to the
customers
– Like standardized wish lists, we will build our shopping
basket

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 15
 Shopping Basket - Model

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 16
 Shopping Basket Contents
• Shopping basket should have following contents
– View the basket
– Add products to their basket
– Add customizable products to their basket
– Add variations of a product to their basket
– Edit quantities of products in their basket
– Remove any product from their basket
• We need our customers to allow to control contents of the basket

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 17
 Viewing Shopping Basket
• The following stages are involved in checking our shopping basket
– Select relevant data from the basket table in the database
– Build an array of data representing the contents of the basket
– Set some variables, including basket cost, empty check etc.

Can a customer add a duplicate How to

If Yes mange
product in shopping basket?
?

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 18
 View Shopping Basket
• We need a function to check and account the basket from all
aspects
– Generate a number of variables to use later
– For authentication
• User's session ID and IP address, primarily for customers who are not
logged in
• Username if user is authenticated and logged in
– Two different queries for authenticated and anonymous customers
– If no query result, basket is empty
– If there is query results , set values to generated variables

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 19
 Viewing Shopping Basket - Controller
• The controller will perform the following tasks at this stage
– Detect if the customer is trying to view the basket
• If customer click on basket icon or view basket option
– Get the basket contents from the model
• Build array of contents
– Cache basket contents and associate them with a template tag

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 20
 Adding Products in Basket
• What is needed to add a product in basket
– the product's ID number
– information of the user (User ID or Session data)
• As our basket will be maintained as an array
– product IDs acting as the keys
– other data such as price, name, quantity, and so on, acting as the
elements

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 21
 Adding Products in Basket
• When a customer clicks on the Add to basket button on our store,
what do we need
to do?
– check that the product is valid and active
– check that it is not a customizable product, or product that has
variations
– check to see if the product is already in the basket
• Yes, increment the product's quantity in the basket
– Default quantity is one
• Else , add it to the basket

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 22
 Adding Product in Basket - Controller
• Our controller needs to also:
• Detect if the customer is trying to add a product to the basket
– By clicking on an Add to basket button
– Without this, products would never be added to a customer's basket
• Pass data to the model to add a product to the basket
– Need to pass product ID and Customer ID

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 23
 Adding Product in Basket - Controller
• Display an error message to customer
– If product is invalid, inactive, not found or out of stock
– It helps customer to realize the product has not been added to their
basket
• If the product was found, and was in stock
– Display a confirmation message to the customer the product has been
added to their basket
• Redirect the customer to another page
– Basket page or product page

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 24
 Adding Product in Basket
• A note on etiquette
• When a customer adds products to their basket
– Add only what they add to their basket
– Some sites try to auto-select other products and into basket
• If product is unavailable, or due to promotions of product
• Results my be
– Customer unhappy
– Generate negative reviews about the site
– Damage the store's reputation

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 25
 Adding Customizable Products
• Customizable products, that allow customers to
– Upload files to associate with their product
– Enter text related to a number of fields associated with their product
• There are a number of things we need
to do
– Restructure the basket database
– Change how we view the shopping basket
– Change how we add a product to the basket
– Process the customized information, if the product was customizable

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 26
 Adding Customizable Products –
Restructure the Basket Database
 To manage customizable products, we were added two filed in product
table
 A filed to allow upload files
 A field to store custom text inputs
 Similarly, we restructure the basket database
 In our basket table we would add two fields
 A field to store the uploaded file
 A field to store the value of custom text input

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 27
 Adding Customizable Products –
Change in View the Shopping Basket
• Model needs to detect if the basket entry has
– A fie uploaded or
– A number of custom text submissions
• If not ,
– Add product with basket array with ‘standard’ word as prefix
• If yes,
– Add product with basket array with ‘standard’ word as prefix
• Why we need this prefix in model
– To ensure when the customer clicks on Add to basket a second time
– We don't duplicate an existing product in the basket

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 28
 Adding Customizable Products –
Changing the model
• Changes required to our model are:
• Check to see if the product is customizable
– If yes, process the product request differently
• Check to see if a file(image)is being uploaded
– If yes process it, else ask customer to upload it
• If the customer has chosen to upload a file
– Move it to suitable location & save its path in DB
• Check the uploaded file is valid
– If it is image then show its thumbnail

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 29
 Adding Customizable Products –
Changing the Model
• The product should be stored in the basket
contents array with a prefix
– ‘standard_’ for standard products
– ‘customizable_’ for customizable product

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 30
 Adding Customizable Product –
Change in the Controller
• Along with the features discussed above, controller needs to be:
– Display custom text inputs when viewing basket contents
• Customer can see which product in their basket has been customized
– Display an uploaded image
• Customer can see which product in their basket has been customized
– Display a link to download the file that has been uploaded
• Customer can verify that they had in fact uploaded the correct file

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 31
 Adding Product Variants
• As discussed earlier, Product variant means a product with different
sizes, colors, material etc.
• To manage different variants we need to change in the followings:
– A new table in the database
– Model changes
– Controller Changes

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 32
 Adding Product Variants
• Following table is required in DB

• Following is the query to add table

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 33
 Adding Product Variants - Model Changes
• Store products which have been added to the customer basket with
prefix of ‘variation_’
• With prefix and product ID, need to store a unique reference
– To indicate product is customizable
• Check if products in the basket have variations associated with them
– So that the details of the variant can be displayed
• When adding a product, check relevant POST data for variations that
are being selected
– To determine which variations and attributes need to be stored

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 34
 Adding Product Variant - The Controller
• In addition to the features discussed our controllers needs to do:
– Display attributes from variations when viewing the basket
– So the customer is aware of exactly which products with which variant
– Can change the product quantities
– Can delete/remove a product from the basket

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 35
 Cleaning the Basket
• Shopping baskets need to be emptied, but this should be done only
when:
– The customer wants to empty their basket
– The customer confirms an order
– The basket contents are old and are not tied to a customer account
• Known expired contents of basket
• If user IP is changed or session ID is changed as time changed

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 36
 Displaying the Basket on Every Page
• Most e-commerce websites display a small shopping basket on
each page
– Often on top of the page or side of the page
• The aim is to:
– Reminding the customer how many products are in their basket
– The cost of the contents of their basket
– Providing a link for them to view their basket in detail
– Providing a link to checkout process

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 37
 Displaying the Basket on Every Page
• To display the basket on each page we will need:
• An empty basket template file
– If basket is empty, show suitable message
• A basket template file
– Display no. of products and link to cost, checkout process etc.
• A template tag in our main templates
– Where the basket can be inserted
• Something in our framework to link into the basket on each page

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 38
 Reading

– PHP 5 E-commerce Development, Michael Peacock, 2010.

 Chapter 6: The Shopping Basket

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 39
 Q&A

CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 40
CIT-647 E-Commerce Applications Development Lecture # 12: The Shopping Basket(The Shopping Cart) 41