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 collection

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

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

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.

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

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)

THE CART

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 ordered 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

THE SHOPPING CART: $_SESSION['cart'] The shopping cart is a three- … [$imgID] [$imgID] dimensional array containing an array of data for each image in the cart. ['caption'] ['caption'] A cart item would be referenced by: $_SESSION['cart'][$img_id] ['qty'] ['qty'] The details of a cart item would be referenced by: ['price'] ['price'] $_SESSION['cart'][$img_id]['caption'] $_SESSION['cart'][$img_id]['qty'] $_SESSION['cart'][$img_id]['price']

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

THE APPLICATION cart.php cart_view.php • • Displays the cart contents Determines if a cart exists • • Shows subtotals and Determines the action to perform on the cart – options are: totals • add item: 'add' • Allows users to • update item: 'update' • Update cart item quantities • add an additional item: • Add another item to the 'show_add_item' cart • show cart: 'show_cart' • Empty the cart • empty cart: 'empty_'cart' • Include the show_cart.php page

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:

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'] ++ ;

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);

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

THE CART_VIEW.PHP CODE Notice these two lines in particular

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

THE CART_VIEW.PHP CODE

THE CART_VIEW.PHP CODE Output the total, display the Update (submit) button, close the form, close the table:

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.

BACK TO CART .PHP

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 only displays when there is something in the cart. These will be done in the lab.

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

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