Products and Shopping Carts E-COMMERCE ELECTRONIC COMMERCE - - PowerPoint PPT Presentation

products and shopping carts
SMART_READER_LITE
LIVE PREVIEW

Products and Shopping Carts E-COMMERCE ELECTRONIC COMMERCE - - PowerPoint PPT Presentation

Products and Shopping Carts E-COMMERCE ELECTRONIC COMMERCE E-commerce typically involves: Online shopping retail to consumer Online marketplaces Electronic funds transfer Inventory management Internet marketing Data


slide-1
SLIDE 1

Products and Shopping Carts

E-COMMERCE

slide-2
SLIDE 2

ELECTRONIC COMMERCE

E-commerce typically involves:

  • Online shopping – retail to consumer
  • Online marketplaces
  • Electronic funds transfer
  • Inventory management
  • Internet marketing
  • Data collection
slide-3
SLIDE 3

E-COMMERCE

The developer's perspective:

  • The product database
  • Populating a catalog as an administrator
  • Displaying products to the public
  • Creating a shopping cart
  • Checking inventory
  • Storing orders
  • Processing orders
slide-4
SLIDE 4

THE ADMIN SIDE

A site administrator should have:

  • A secure login
  • An admin menu including a link to:
  • Add a product (in this case a new gallery image)
  • Complete an order
  • In other situations
  • Add/delete/edit employees
slide-5
SLIDE 5

THE PRODUCT LIST

  • The product_list.php page

queries the database to generate the list of products.

  • You will be adding the View

Details buttons in the lab.

  • Each button is an HTML form

with a hidden field that will transmit the image_id:

  • Like the display of the images, this form is inside a loop

so the View Details form/button will be created next to each image.

slide-6
SLIDE 6

THE PRODUCT LIST

  • Because each button is

created dynamically, the value of the hidden field, image_id, will correspond to the image_id for the image being displayed in that row.

  • The value can be retrieved

from the product_details page just like any other form data: with the $_GET superglobal array

slide-7
SLIDE 7

THE PRODUCT DETAILS PAGE

  • The product_details.php file queries the database to

retrieve the data for the specific product requested.

  • This example uses a form button with hidden fields to send

the product data to the cart.php page.

  • Hidden form fields are not used for security purposes, but

rather to send data which may not be relevant to the user (such as an image_id)

slide-8
SLIDE 8

THE CART

slide-9
SLIDE 9

THE SHOPPING CART

Once the product catalog is created, a shopping cart can be implemented using sessions: $_SESSION['cart'] contains the shopping data. This example will store the imageID, the print caption, and the quantity and price of each item

  • rdered in a session variable. For example:

$_SESSION['cart'] might contain:

imageID Caption Quantity Price

2 Fountains in central Tokyo 1 $59.99 3 The Golden Pavilion in Kyoto 2 $19.98

slide-10
SLIDE 10

[$imgID]

['caption'] ['qty'] ['price']

… [$imgID]

['caption'] ['qty'] ['price']

THE SHOPPING CART: $_SESSION['cart']

The shopping cart is a three- dimensional array containing an array

  • f data for each image in the cart.

A cart item would be referenced by: $_SESSION['cart'][$img_id] The details of a cart item would be referenced by: $_SESSION['cart'][$img_id]['caption'] $_SESSION['cart'][$img_id]['qty'] $_SESSION['cart'][$img_id]['price']

slide-11
SLIDE 11

THE SHOPPING CART

A cart could also be created and saved for each user which would create an additional dimension: $_SESSION['userid']['cart']…

slide-12
SLIDE 12

THE APPLICATION

cart.php

  • Determines if a cart exists
  • Determines the action to perform
  • n the cart – options are:
  • add item: 'add'
  • update item: 'update'
  • add an additional item:

'show_add_item'

  • show cart: 'show_cart'
  • empty cart: 'empty_'cart'
  • Include the show_cart.php page

cart_view.php

  • Displays the cart contents
  • Shows subtotals and

totals

  • Allows users to
  • Update cart item quantities
  • Add another item to the

cart

  • Empty the cart
slide-13
SLIDE 13

THE CART .PHP CODE

By clicking the Add to Cart button on the product_details page, the user is:

  • adding an item to the cart (this will correspond

to $action == 'add' )

  • the item to add and its details were sent via

$_POST:

slide-14
SLIDE 14

THE CART .PHP CODE

The next step is to determine if the item already exists in the cart. If it exists, the current quantity is incremented by 1: if (isset($_SESSION['cart'][$imgID])) $_SESSION['cart'][$imgID]['quantity'] ++ ;

slide-15
SLIDE 15

THE CART .PHP CODE

If the item is not in the current cart, it is added to the cart: else { // New product to the cart

//Filter the rest of the data:

$imgTitle = filter_var($_POST['caption'], FILTER_SANITIZE_STRING ); $imgPrice = filter_var($_POST['price'], FILTER_SANITIZE_NUMBER_FLOAT, FILTER_FLAG_ALLOW_FRACTION); //don't strip decimal

// Add to the cart:

$_SESSION['cart'][$imgID] = array ('caption'=> $imgTitle, 'quantity' => 1, 'price' => $imgPrice);

slide-16
SLIDE 16

CART_VIEW.PHP

Once the cart is created, it can be displayed as a form where quantities can be changed.

slide-17
SLIDE 17

THE CART_VIEW.PHP CODE

Notice these two lines in particular

slide-18
SLIDE 18

THE CART_VIEW.PHP CODE

For each item in the cart, we want to generate the HTML to return to the browser similar to:

Source code: returned HTML

newqty[6] refers to image_id: 6 It is an array because more than one item in the cart may have a new qty

slide-19
SLIDE 19

THE CART_VIEW.PHP CODE

slide-20
SLIDE 20

THE CART_VIEW.PHP CODE

Output the total, display the Update (submit) button, close the form, close the table:

slide-21
SLIDE 21

THE CART_VIEW.PHP CODE

The beginning of the form had the lines of code: When the form is submitted, the $_POST variables will be: $_POST['action'] (set to update) and a 2D array $_POST['newqty'] (with image_id and newqty for each item in the cart.

slide-22
SLIDE 22

BACK TO CART .PHP

slide-23
SLIDE 23

OTHER FEATURES OF THE CART

  • Add Item: handled as

hyperlink to the product_list.php page

  • Empty Cart: handled as

a hyperlink with the query string action=empty_cart

  • Checkout: a link to a

checkout.php page but

  • nly displays when there

is something in the cart. These will be done in the lab.

slide-24
SLIDE 24

BACK TO CART .PHP

  • A link (which you will add in the lab) will display when a cart exists

allowing a user to click on a Show Cart button.

  • The user can also choose to empty their cart which deletes the session

data for the cart only (the user remains logged in if they were before) and displays the cart_view.php page

slide-25
SLIDE 25

THE CHECKOUT PROCESS

Best practice is not to store credit card data If you do, make sure it is encrypted in the database AFTER the money transaction

  • 1. Enter the order into the database:

The customer's primary key (a customer must be a registered user) The order total The date of the order Shipping data if applicable

  • 2. Enter the order details into the database
  • 3. Clear the cart