Module 3: Building an E-Commerce Web Site Contents Overview Adding Pages to the Web Site Adding E-Commerce Functionality Lab 3: Building the E-Commerce Functionality 13 Review 22 Information in this document is subject to change without notice The names of companies, products, people, characters, and/or data mentioned herein are fictitious and are in no way intended to represent any real individual, company, product, or event, unless otherwise noted Complying with all applicable copyright laws is the responsibility of the user No part of this document may be reproduced or transmitted in any form or by any means, electronic or mechanical, for any purpose, without the express written permission of Microsoft Corporation If, however, your only means of access is electronic, permission to print one copy is hereby granted Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering subject matter in this document Except as expressly provided in any written license agreement from Microsoft, the furnishing of this document does not give you any license to these patents, trademarks, copyrights, or other intellectual property  2000 Microsoft Corporation All rights reserved Microsoft, BackOffice, bCentral, FrontPage, Hotmail, LinkExchange, MS-DOS, MSN, PowerPoint, Windows, Windows Media Player, and Windows NT are either registered trademarks or trademarks of Microsoft Corporation in the U.S.A and/or other countries The names of companies, products, people, characters, and/or data mentioned herein are fictitious and are in no way intended to represent any real individual, company, product, or event, unless otherwise noted Other product and company names mentioned herein may be the trademarks of their respective owners Development Lead: P.M Murali (NIIT) Instructional Designers: Sangeeta Nair (NIIT), Vijayalakshmi Narayanaswamy, (NIIT) Technical Contributors: Scott Swigart (3 Leaf Solutions, LLC); Gary Gumbiner (Great Barrier Technologies) Program Manager: Steve Merrill Graphic Artist: Scott Serna Editing Manager: Lynette Skinner Editor: Dennis Rea Copy Editor: Ed Casper (S&T Consulting) Publications Manager: Miracle Davis Test Manager: Eric Myers CD Build Specialist: Jenny Boe; Eric Wagoner Production Coordinator: Marlene Lambert (Online Training Solutions, Inc.); Susie Bayers (Online Training Solutions, Inc.) Manufacturing Manager: Bo Galford Manufacturing Support: Laura King General Manager: Robert Stewart Module 3: Building an E-Commerce Web Site iii Instructor Notes Presentation: 80 Minutes Lab: 45 Minutes This module provides students with information that helps them to use the capabilities of Microsoft® bCentral™ Site Manager to build their own ecommerce Web sites The module describes the various page templates offered by Site Manager for adding pages to a Web site The students will also learn how to add e-commerce functionality to their Web sites to enable online ordering, purchasing, and processing After completing this module, students will be able to: ! Add a category page to a Web site ! Add a content page to a site ! Add a shopping cart to a site ! Define payment, shipping and tax rules ! Process orders online Materials and Preparation This section provides you with the required materials and preparation tasks that you need to teach this module Required Materials To teach this module, you need the following materials: ! Microsoft PowerPoint® file 1933A_03.ppt ! Module 3, “Building an E-Commerce Web Site” ! Lab 3, “Building the E-Commerce Functionality” Preparation Tasks To prepare for this module, you should: ! Read all of the materials for this module ! Complete the lab iv Module 3: Building an E-Commerce Web Site Module Strategy Use the following strategies to present this module: ! Adding Pages to the Web Site Explain the uses of the category and content templates provided in Site Manager While explaining the significance of these pages, it is useful to draw a structure chart to show the students how the various pages of a Web site are typically arranged Demonstrate the procedure for adding a category page and a product page in Site Manager ! Adding E-Commerce Functionality Explain how to add a shopping cart to a Web site by using the Order Manager service of Microsoft bCentral Demonstrate the procedure for specifying payment, shipping, and tax rules for a Web site by using Order Manager Then, demonstrate the procedure for processing orders by first accessing your site as a customer and ordering products, and then checking your site as a merchant and processing the orders Module 3: Building an E-Commerce Web Site Overview Topic Objective To provide an overview of the module topics and objectives ! Adding Pages to the Web Site Lead-in ! Adding E-Commerce Functionality In this module, you will learn how to build an e-commerce Web site by adding category and content pages to an existing Web site, and by adding e-commerce functionality to the site After you create the home page for your e-commerce Web site and customize its layout, content, and header and footer by using the Site Manager service from Microsoft® bCentral™, you can build on this basic Web site by adding more pages For example, you can include pages containing contact information, company details, FAQs, related links, and so on Site Manager allows you to build your site by adding Web pages to your home page in simple steps It lets you add various types of pages, and provides various layout styles and themes to help you customize the additional pages In addition, Order Manager, a free service provided to all Site Manager subscribers, assists you in adding e-commerce functionality to your Web site For example, Order Manager lets you add to your Web site the shopping cart functionality that accepts and processes orders placed by site visitors After completing this module, you will be able to: ! Add a category page to a Web site ! Add a content page to a Web site ! Add a shopping cart to a Web site ! Define payment, shipping, and tax rules ! Process orders online Module 3: Building an E-Commerce Web Site # Adding Pages to the Web Site Topic Objective To demonstrate the procedure for adding pages to a Web site ! Creating Category Pages Lead-in ! Creating Content Pages ! Adding a Page to a Web Site After you create a home page, you can expand it by adding Web pages based on the various templates offered in Site Manager Additional Web pages allow you to provide more information about the products and services that your online business offers These supplementary pages can also provide information about contact addresses, company history, and so on The specific nature and subject of the added Web pages depend on the requirements of your Web site You can add various types of pages to your site by using the Site Manager Web site creation functionality Site Manager contains many templates and layout and theme styles that help you to expand and customize your Web site For example, the product page template provides fields for entering the product name, code, price, features, and attributes You can plan the structure of your Web site by using either of the following two strategies: ! Creating category pages ! Creating content pages Consider the Mightyflight Toys Web site In this site, category pages, product pages, a shopping cart page, a confirmation page, and a verification page support the home page Note Microsoft bCentral hosts a maximum of 70 Web pages for any site that is built by using Site Manager Module 3: Building an E-Commerce Web Site Creating Category Pages Topic Objective To describe the need to use category pages Lead-in After you have created your home page, you can add Web pages to your site by using the templates provided in Site Manager Category pages are one type of page that Site Manager allows you to add to your Web site ! Category pages help to classify the site content into broad groups $ ! Can hold information related to a group of products or services Site Manager provides two templates for category pages: $ Department $ Category You can classify your Web site content into broad groups by creating a category page for each major topic or group of products offered on your site A category page holds information related to a particular group of similar products or services This classification by category results in a structured flow of information, and allows your site visitors to locate a specific product, access information about the product, and purchase it For example, the Mightyflight Toys site is designed to allow users to choose between two categories of toys: Cars and Stuffed Toys This simple categorization lets users access the specific types of toys that they wish to purchase Site Manager provides two templates for creating category pages: department and category You can use the department page when you want to add a parent page for several different product pages For example, if Mightyflight Toys offers several different types of stuffed toys and has a separate page for each on its site, then a department page can be created for all of the stuffed toys taken together The category page can be used to organize all other kinds of content pages on the Web site Module 3: Building an E-Commerce Web Site Creating Content Pages Topic Objective To list the types of templates provided by Site Manager for creating content pages Lead-in In addition to category pages, you also want to add content pages to your Web site Site Manager provides several templates for creating different types of content pages for your Web site These pages contain different types of information ! About Us ! Clients ! Contact Us ! Employee Biographies ! Frequently Asked Questions ! Job Listings ! Legal / Copyright / Privacy / Policy ! News ! Product ! Service Site Manager provides different templates that you can use to create content pages for your e-commerce Web site These templates and descriptions of their purposes are detailed in the following table Template Description About Us Add this page when you want to provide your site visitors with general information about your business Clients Add this page when you want to display a list of your prominent clients and provide links to their Web sites Contact Us Add this page when you want to give your e-mail, phone, or fax contact information to site visitors Employee Biographies Add this page to introduce your employees Frequently Asked Questions Add this page when you want to provide answers to commonly asked questions related to your business Job Listings Add this page when you want to advertise job openings in your company Legal/Copyright/Privacy/ Policy Add this page to display the privacy policy, copyright policy, legal disclaimers, and so on for your business News Add this page to display press releases about recent achievements, new products or services, or other news events related to your business Product Add this page when you want to display detailed information about your product range, and allow site visitors to purchase your products Service Add this page when you want to display detailed information about the services offered by your business Module 3: Building an E-Commerce Web Site Adding a Page to a Web Site Topic Objective To describe the steps involved in adding a page to a Web site To add a page to your Web site: Lead-in ! Select the template ! Specify the name of the page ! Specify another page in the site that contains a link to the page ! Select the page layout and content Adding a page to a Web site is easy in Site Manager First, you need to select a template, based on the type of page you want to add Delivery Tip Explain how a home page, category pages, and content pages are arranged in a site by drawing a simple structure chart on the board The procedure for adding Web pages to an e-commerce Web site is simple The steps involved in adding a category or content page to a Web site are similar To add a page, you must choose one of the Site Manager templates for category or content pages and then add content to it For example, to add information about a group of related products offered by your business, first add a category page for the product group, and then add a separate page for each product with detailed information about that product Classifying pages by type on your Web site helps visitors to navigate directly to the pages they want Tip Avoid designing your e-commerce Web site for maximum depth in the hierarchy To ensure user-friendly navigation, Web pages ideally should not be more than three clicks distant from the Web site home page Adding category pages Delivery Tip Demonstrate the procedure for adding a category page to the MightyFlight Toys Web site Create a new page by selecting Category from the list of page types on the Create New or Copy Existing page page Select the layout and then enter the content for this page To add a category page to your Web site, you need to the following: ! Select the page template Site Manager provides a list of page template types from which you can choose ! Specify the name of the page you are adding The title that you give the new category page appears as a link on the parent page, on the page banner, and in the title bar of the browser Module 3: Building an E-Commerce Web Site ! Specify another page on your Web site that contains a link to the new category page Typically, the page containing the link will be the parent page for the new category page you are creating If you select the home page as the parent page for the new page, the link for the new page will be visible on all of the other pages of your Web site ! Specify the layout and content for the new page To build on the hierarchy that you designed for your Web site, you must specify the parent page in the Link page box for each new page that you create For example, on the Mightyflight Toys Web site, the category pages for both Cars and Stuffed Toys had the home page as their parent page Alternatively, if a separate Web page is created for every toy, the parent page for each new page will be the appropriate category page This procedure ensures that your ecommerce Web site has a simple and uncluttered hierarchy, making it easier for site visitors to access the product pages and make purchases Adding product pages Delivery Tip Demonstrate the steps involved in adding a product page to a Web site by selecting Product from the list of page types shown on the page Create New or Copy Existing Page Link this page to the category page that you have already added Enter the page content for the product page and save the page Preview the pages that you just created and show them to the students On an e-commerce Web site, a product page displays important product information that may help the customer to decide on a purchase The product page template in Site Manager allows you to display such details as product features and price To add a product page in Site Manager, you need to the following: ! Select the Product page type in the list of page template types ! Specify the product page title, and the title of the page to which you want to link the product page ! Select the layout for the product page ! Enter the following information about the product: • Name • Highlight text—should make a compelling tag line • Price • Product SKU or item number • Shipping cost, if any • Product attributes such as color, size, weight, and so on ! Enter a product description and make it appealing to the customer Module 3: Building an E-Commerce Web Site Signing Up for Order Manager Topic Objective To describe the procedure for signing up for the Order Manager service To sign up for Order Manager, you must specify: Lead-in ! Your e-mail address ! Your company name ! Encryption code for credit card details You can turn your Web site into an e-commerce Web site by adding e-commerce functionality to it by using the Order Manager service from Microsoft bCentral Delivery Tip Demonstrate the procedure for signing up for Order Manager Order Manager is a free service that becomes available when you sign up for Site Manager To use Order Manager, you must first sign up for it To sign up for Order Manager, you must specify the following: ! Your e-mail address ! Your company name ! Encryption code for credit card details Note The encryption code that you enter when signing up for Order Manager enables you to view the credit card details of site visitors who make credit card purchases from your e-commerce Web site The encryption code controls access to credit card details, ensuring secure online purchases Module 3: Building an E-Commerce Web Site Enabling Online Order Processing Topic Objective To list the steps involved in enabling online order processing ! Defining payment rules Lead-in ! Defining shipping rules ! Defining tax rules The first step in making your Web site an e-commerce site is to sign up for Order Manager After you this, you must define payment, shipping, and tax rules for your products After you sign up for Order Manager, you can enable online purchasing on your Web site by specifying the payment, shipping, and tax rules Order Manager will then process the online orders placed by site visitors and calculate the total amount to be paid by them Defining payment rules The first step in enabling online order processing on your e-commerce Web site is to specify payment rules You must specify which credit cards you will accept for payment for online purchases made by customers at your site You can define which credit cards you want to accept by selecting them from the list of credit cards that is displayed during the sign-up process If you want, you can also choose to have e-mail messages sent to customers confirming their online purchases Defining shipping rules Delivery Tip Demonstrate the procedure for defining shipping rules for the Mightyflight Toys Web site The next step in enabling online order processing is to specify the rule you will use to charge shipping costs for purchases made on your e-commerce Web site Order Manager allows you to select one of the following two types of shipping rules: ! Cost per item If you select this rule, you must specify the minimum shipping cost for an item ! Cost per order If you select this rule, you must specify the cost for each “block” of orders in dollars For example, you can specify that the minimum shipping cost for an order totaling up to $25 is $5 For orders totaling between $26 and $50, you may choose to specify a minimum shipping cost of $10 The shipping cost is to be charged only if the total value of the order exceeds the top range you specified 10 Module 3: Building an E-Commerce Web Site Note You can also specify the cost of additional services as part of the shipping rules Such additional services can include overnight or second-day shipping Defining tax rules Delivery Tip Demonstrate the procedure for defining tax rules for the Mightyflight Toys Web site Order Manager can also be configured to add the taxes to be charged on each online purchase In the United States, sales tax is charged for online purchases only if the purchase is made in the same state in which the business operates However, it is recommended that you confirm the tax rates with a tax authority before defining tax rules for your e-commerce Web site To define tax rules for purchases made on your site, you must select the states for which you want to charge sales tax, and then enter the tax rate that you want to charge for each state that you selected Module 3: Building an E-Commerce Web Site 11 Processing Orders Topic Objective To describe the steps for processing orders on an ecommerce Web site created by using Site Manager ! Lead-in It is important to periodically check your e-commerce Web site for new orders, and review and finalize them Delivery Tip Demonstrate the procedure for processing orders online First, purchase products by directly accessing the site, going to the product page that you created, clicking Add to Cart, and purchasing three quantities of the product by clicking Continue Shopping Then, go to the Order page by clicking Checkout Show the details of your order to the students Enter your name and address under Ship-to Address and click Calculate Total Show the total price to the students, including the shipping cost Place an order by giving a fictitious credit card number You can use a credit card number with “42” repeated eight times ! When site visitors decide to buy products, they: $ Add the products to the shopping cart $ Check the details of the purchase order $ Enter their name, address, and credit card details $ Send the order to the merchant A merchant can then: $ Review the new orders sent to the site $ Verify the customer credit card details $ Finalize the orders After you define the payment, shipping, and tax rules for your e-commerce Web site, you are ready to receive and process online orders Customers will typically go to your product page, look at the product features and details, and decide if they want to purchase the product They can then add the product to the shopping cart by clicking Add to Cart on the product page At any point of time, customers can review what they have added to the cart and the total quantity and price of the products they have purchased After making purchases, customers must the following to finalize the order: ! Check the details of the purchase order ! Enter details such as name, postal address, and e-mail address ! Enter the details of the credit card used to make this purchase ! Send the order to the merchant 12 Module 3: Building an E-Commerce Web Site Delivery Tip Continue the procedure for processing orders online First, access Order Manager The orders that you placed in the previous demonstration will be displayed as new orders on the Order Manager page Click Process Orders Show the students the Order ID, Date, and Total amount of the order that you just placed Select the order and click Finalize Click Order ID and show the students the billing and shipping details Then, exit Order Manager and show the students that the order has been processed When your customers place orders for your products, these orders will be listed as new orders in Order Manager Click Process Orders and Order Manager will display the details of the new orders, such as the order ID and price You can view more details about an order by clicking the Order ID of each order You can also view the credit card information for each order by entering the encryption code You can verify the validity of the credit card number, and also verify that the credit card can support the payment of the order that was placed If the credit card is valid, you can then finalize the order Note You can authorize credit cards manually, or sign up for an automatic authorization service To authorize a credit card manually, you need to view the credit card information for an order to verify that the credit limit of the card can support the order placed Module 3: Building an E-Commerce Web Site Lab 3: Building the E-Commerce Functionality Topic Objective To introduce the lab Lead-in In this lab, you will build an e-commerce Web site by adding Web pages and ecommerce functionality to the site Delivery Tip Explain the lab objectives Objectives After completing this lab, you will be able to: ! Add a category page to your e-commerce Web site ! Add a product page to a category page of your e-commerce Web site ! Add a shopping cart to your e-commerce Web site ! Define the payment rules in Order Manager ! Define the shipping rules in Order Manager ! Place an order on the e-commerce Web site by using the shopping cart ! Process the order that was placed on the e-commerce Web site Prerequisites Before working on this lab, you must have: ! Signed up for Site Manager ! Created a home page by using Site Manager 13 14 Module 3: Building an E-Commerce Web Site Scenario You have already created a basic Web site with a home page by using the Site Manager service from Microsoft bCentral You must now add a Web page that acts as a category page for a group of products You are also required to add a product page that has the category page as its parent After adding this product page, you need to add the shopping cart functionality to the Web site, and define the payment and shipping rules for orders placed online A customer then accesses the product page on your site and places an order You can either place the order yourself or ask one or more of the other students to access your site and place orders You then use Order Manager as a merchant to process the order that has been placed Note To complete the exercises in this lab, we have used a specific example of a toy store Web site However, if you have created a different Web site, you can modify the text used in the lab to fit the type of business that you selected Estimated time to complete this lab: 45 minutes Module 3: Building an E-Commerce Web Site 15 Exercise Adding a Category Page In this exercise, you will add a category page to an existing home page by using Site Manager ! Add a category page Access the site http://sitemanager.bcentral.com Click SIGN UP NOW In the Sign Up page, click the log in link in the text Log in to Site Manager with your e-mail address and password to access the Site Manager start page Click Add a New Page In the Page type list, select the Category template, and then click Continue In the Page title text box, type Soft Toys Ensure that the Link page box content is set to the home page of your site, and then click Continue In the Category description text box in the Enter Page Content page, type the following sentence: Our site has a vast range of soft toys for your child We are sure that our selection of beautifully crafted toys will bring a smile to your little one’s face 10 In the Highlight text box, type The Perfect Playmates for Your Child 11 In the Introduction to bullet section text box, type Our range of exquisite soft toys includes: 12 In the Bulleted text text box, type Dolls 13 In the Bulleted text text box, type Teddy Bears 14 In the Bulleted text text box, type Animals 15 In the Select a Layout list box, select the FrontPage-compatible layout for the category page 16 To view the category page that you created, click Preview 17 To go back to the Enter Page Content page, click Previous 18 Click Save 16 Module 3: Building an E-Commerce Web Site Exercise Adding a Product Page to a Category Page In this exercise, you will add a product page to a category page of an ecommerce Web site ! Add a product page to a category page Click Add new page Ensure that the Create a new page option is selected In the Page type list, select the Product template, and then click Continue In the Page title text box, type Teddy Bear In the Link page box, select the Soft Toys category page as the parent page for the new product page, and then click Continue In the Product name text box, type Teddy Bear In the Highlight text box, type This little Teddy Bear will steal your heart! In the Price text box, type $19.95 In the SKU text box, type T025 10 In the Shipping cost text box, type $2.00 11 In the Product attributes label text box, type Color 12 In the Product attributes text box, type Brown, Light Brown 13 In the Product attributes label text box, type Height 14 In the Product attributes text box, type 14 inches, 16 inches, 18 inches 15 Scroll down to the Select a Layout section 16 In the Select a Layout box, select the FrontPage-compatible layout for the category page 17 Click Save ... for Site Manager ! Created a home page by using Site Manager 13 14 Module 3: Building an E-Commerce Web Site Scenario You have already created a basic Web site with a home page by using the Site. .. to the Web Site Lead-in ! Adding E-Commerce Functionality In this module, you will learn how to build an e-commerce Web site by adding category and content pages to an existing Web site, and by... business Module 3: Building an E-Commerce Web Site Adding a Page to a Web Site Topic Objective To describe the steps involved in adding a page to a Web site To add a page to your Web site: Lead-in