Task 8.2 Using a Shopping Cart

Transcription

1 Task 8.2 Using a Shopping Cart Objective A shopping cart is a piece of software on a web server that allows visitors to an Internet site to select items for eventual purchase. In this task, you will learn how to use a shopping cart software in a shopping form. Duration: 50 minutes Pre-requisite tasks: 8.1 Instructions Step 1. Download the shopping cart software from Blackboard. Download the cart script from our course website. This is a free shopping cart script that can be used for client-side scripting provided it is referenced in the code. Unzip the files, extracting only the JavaScript files and the English language file to your personal website. You can view a sample of how this cart works at Step 2. Create 3 HTML pages Create the following 3 HTML pages from your template: 1. shopping.html 2. managecart.html 3. checkout.html Step 3. Add the script to the 3 HTML files and give credit to the developer Every HTML page, needed for the shopping cart, will require the following lines of code in the Head section. The commented lines are also required to give credit to the developer. <script type="text/javascript" src ="language-en.js"></script> <script type="text/javascript" language="javascript" src ="nopcart.js"> //============================================================== // NOP Design JavaScript Shopping Cart // // Visit NOP Design at //============================================================== </script> France Cheong Adapted from Glenys Grob s notes 1

2 Therefore add these lines to the head section of shopping.html, managecart.html and checkout.html. Note: A condition of use of this script is that the credit given to the programmer is always left in your pages. As you can see the code above calls the external JavaScript file (that you have just unzipped). Step 4. Create the shopping form in shopping.html Add the following simple shopping form inside the content section of shopping.html. <!-- Start Shopping Cart--> <!-- Product 1 --> <form id="order" action = ""> <br />Product 1: <input type="text" size="2" maxlength="3" name = "QUANTITY" onchange = 'this.value=ckquantity(this.value)' value="1" /> <input type="hidden" name="price" value="19.95" /> <input type="hidden" name="name" value="sample Product 1" /> <input type="hidden" name="id_num" value="id 001" /> <input type="hidden" name="shipping" value="5.95" /> Select a color: <select id="additionalinfo"> <option value="red"> Red</option> <option value="blue"> Blue</option> <option value="white">white</option> Select a size: <select id ="ADDITIONALINFO2"> <option value="small" > Small</option> <option value="medium" > Medium</option> <option value="large" >Large</option> <input type="button" value=' Add to Cart ' onclick='addtocart(this.form)'/> <!-- End Product 1 --> <a title="list Items Bought" href="managecart.html">check out now</a> <!-- End Shopping Cart --> This form will allow a customer to purchase 1 product. We will start with the given code and modify it to suit later. France Cheong Adapted from Glenys Grob s notes 2

3 Step 5. View page shopping.html Load shopping.html in the browser. Try making a selection and then try clicking on the Add to Cart button. You should see this: Step 6. Amend the code in shopping.html to allow purchase of a second product Now offer a 2 nd product: by adding the following form just AFTER the <!-- End Product 1 --> line of code. <!-- product 2 --> <form id="order0" action = ""> <br />Product 2: <input type="text" size="2" maxlength="3" name = "QUANTITY" onchange = 'this.value=ckquantity(this.value)' value="1" /> <input type="hidden" name="price" value="25.95" /> <input type="hidden" name="name" value="sample Product 2" /> <input type="hidden" name="id_num" value="id 002" /> <input type="hidden" name="shipping" value="5.95" /> Select a color: <select id="additionalinfo" style="margin-top: 0px"> <option value="red"> Red</option> <option value="blue"> Blue</option> <option value="white">white</option> Select a size: <select id ="ADDITIONALINFO2"> <option value="small" > Small</option> <option value="medium" > Medium</option> <option value="large" >Large</option> <input type="button" value=' Add to Cart ' onclick='addtocart(this.form)'/> <!-- end product 2 --> Try it out in the browser. France Cheong Adapted from Glenys Grob s notes 3

4 Step 7. Write code in managecart.html to display contents Open managecart.html and enter an appropriate heading in the banner section. Then enter the following code in the body section of managecart.html : <!-- ManageCart Begin--> The items listed below are currently in your shopping cart: <br /> <form action="checkout.html" method="get" onsubmit="return ValidateCart(this)"> <script type="text/javascript"> ManageCart(); </script> <input type="submit" value=" Check Out " /> <!-- ManageCart End --> Step 8. View page shopping.html Refresh shopping.html in the browser and try adding items to the cart again. Click on Check Out Now to see if they have been added to your cart. Step 9. Add a hyperlink to managecart.html Add a Keep Shopping hyperlink to the managecart.html page so that a customer can return to the shopping page and add more items to the cart. Step 10. Write code in checkout.html Enter this code in the body section of checkout.html <!-- Checkout Begin--> The items listed below are currently in your shopping cart: <form action="mailto:your address" method ="post"> <script type="text/javascript"> CheckoutCart(); </script> <br /><br /> Name: <input type="text" name="b_first" /> <input type="text" name="b_last" /><br /> <input type="text" name="b_ " /><br /> <br /><br /> Other form data can go here when you create your prototype cart... <br /><br /> <input type="submit" value=" Submit Order " /> <!-- Checkout End --> Step 11. Troubleshooting If you experience any problems, troubleshoot the following: Have you saved each of the HTML files? Do you have the original JavaScript code that is needed at the top of every page? France Cheong Adapted from Glenys Grob s notes 4

5 Are all the pages and files in your personalwebsite folder? Step 12. Publish to the server Update your menu so there is a link to the Catalogue. Publish your finished shopping pages and the script files to the server. Step 13. Improvements a) Display the price near the product name on the form so the customer knows the cost prior to adding an item to the cart. b) Enter an actual product name instead of Sample Product 1 on your shopping form. Change the alert that comes up when you click Add to Cart. It should echo this product name. c) The shopping page shows Check Out Now and then the button on managecart.html shows Check Out. This is confusing. Alter one to more appropriate wording. Step 14. Expand the catalogue At the moment, there are only two items for sale. Alter the shopping form so that it can handle 3 products. The first 2 rows (forms) have been done for you; you need to add 1 more in the same manner. Study which elements changed from the product 1 form to the product 2 form so that you know what needs to be changed for product 3. Note: Each product is in its own form. So you could simply copy and paste one of the product forms and then make the necessary changes to it such as: The IDs Price Product Name Step 15. More improvements a) Can you make the shopping page look better? That is, can you improve the formatting or positioning of the display of items for sale? France Cheong Adapted from Glenys Grob s notes 5

6 b) Include a clipart to represent the product (it must be copyright free). c) The check-out form needs altering. Find a way to edit the JavaScript file to replace the U.S.A references to tax with a GST tax. Step 16. Maintaining state How does this code keep the products in the shopping cart even when the page is closed? Study the code and then type an explanation at the bottom of your managecart.html page. Step 17. Tidying up Re-publish all changes to the server. Run the shopping cart from the server to make sure it behaves the way you are expecting. Click on the assessment page and then the link to the marking guidelines for your lab assessment. Remember this assessment is next week. So make sure that all of your exercises have been loaded by the start of your lab. Step 18. Homework Make sure you have inserted graphics for each of the products in your shopping pages. What next Complete Test 8.2. Then start to work on Task 8.3. France Cheong Adapted from Glenys Grob s notes 6