Default Shopping Basket, Checkout, Confirmation and Order Processing Introduction The default shopping basket is integrated with hard-coded products or database products using the mgiBuyMe tag. Products are added to the shopping basket page where the contents of the shopping basket displays and the visitor may modify the shopping basket or proceed to the secure check out page. On the check out page, the visitor is prompted for payment, billing, and shipping information, then proceeds to the order confirmation page. On the order confirmation page, the contents of the shopping basket (including any tax and shipping) are displayed with the visitor's payment, billing and shipping entries. Upon proceeding to the final send order page, the customer's order is converted to an email and sent to the specified address. MGI Tags mgiButton mgiBuyMe mgiCollectUserInfo mgiConfirmOrder mgiSendOrder mgiShoppingBasket Steps Create a shopping basket administration page in a text editor. Insert the mgiShoppingBasket tag in admin mode. Save the shopping basket administration page. FTP the shopping basket administration page to the web server running MGI. View the shopping basket administration page in a web browser. Create a shopping basket handle. Create product pages and open them in a text editor. Insert an mgiBuyMe tag and a submit button for each product. Save the product pages. Create a shopping basket page and open it in a text editor. Insert the mgiShoppingBasket and mgiButton tags. Save the shopping basket page. Create a check out page and open it in a text editor. Insert the mgiCollectUserInfo and mgiButton tags. Save the check out page. Create a confirm order page and open it in a text editor. Insert the mgiConfirmOrder and mgiButton tags. Save the confirm order page. Create an order processing page and open it in a text editor. Insert the mgiSendOrder tag. Save the order processing page. Tokenize all other pages of the web site. Save the web site pages. FTP all pages to the web server running MGI. View a product page in a web browser and purchase a product. Step 1: Create a shopping basket administration page in a text editor. Create a new page in a text editing program to display the web-based, shopping basket administration interface. Step 2: Insert the mgiShoppingBasket tag in admin mode. On the shopping basket administration page, enter the mgiShoppingBasket tag and mode parameter. In the mode parameter, enter "admin". <mgiShoppingBasket mode="admin"> </mgiShoppingBasket> Step 3: Save the shopping basket administration page. Save the shopping basket administration page and name it "sbadmin.mgi". Step 4: FTP the shopping basket administration page to the web server running MGI. Upload the shopping basket administration page (sbadmin.mgi) from your local computer to the web server using an FTP program. Step 5: View the shopping basket administration page in a web browser. View the shopping basket administration page (sbadmin.mgi) in a web browser. The first screen of the web-based, administration interface is displayed. Step 6: Create a shopping basket handle. Below the column "Shopping Basket Name", enter the name of a shopping basket handle and click the "Add" button. In this example, the shopping basket handle is named "Default". The shopping basket handle determines the configuration of a shopping basket (you may have and use multiple shopping basket handles in one region). For a default shopping basket configuration, the handle does not require customization and merely needs to be created. Once the handle is created, note its name and close the shopping basket administration page. Step 7: Create product pages and open them in a text editor. Create pages to display products for sale. You may choose any design and layout for products including pictures, descriptions, pricing information, etc. Insert placeholders for a quantity box for each product and a submit button. The default quantity box is 3 characters wide. Finally, open your product pages in a text editing program that allows you to view and modify the HTML and code of the page. Step 8: Insert an mgiBuyMe tag and a submit button for each product. Replace the quantity box placeholder for each product with an mgiBuyMe tag, productID parameter, name parameter, and price parameter. In the productID parameter, enter a unique code for the product or embed the product's unique ID from a database search. Product information is tracked through the shopping basket by the productID. In the name parameter, enter a short description of the product or embed the product's short description from a database search. In the price parameter, enter the per item price of each product as a decimal number or embed the product's price from a database search. Do not enter characters such as dollar signs in the price parameter.   Replace the submit button placeholder with an mgiButton tag and value parameter. In the value parameter, enter the value that will display on the submit button (e.g., "Add to Shopping Basket").   A form action adds the quantity entered in the quantity box(s) to the shopping basket page for processing when the submit button is clicked. Enter the name of the shopping baket page (shoppingbasket.mgi) in the action parameter of the <FORM> tag. Enter "post" in the method parameter of the <FORM> tag. Enclose the mgiBuyMe tag and "Add to Shopping Basket" submit button with HTML form tags. If you want to allow customers to add multiple items to a shopping basket at one time, enclose all mgiBuyMe tags and a single submit button or multiple submit buttons with HTML form tags.   The default shopping basket uses tokens to track the purchases of individual customers. Enter one beginning mgiToken tag before all products and submit buttons, and enter one ending mgiToken tag after all products and submit buttons. The mgiToken tags should enclose all links on the page including HREFs and FORM actions.   The following is an example hard-coded product page. See an example database search page below. <mgiToken> <form action="shoppingbasket.mgi" method="post"> <h2>Products</h2> <p> <table width="500" cellspacing="0" cellpadding="3" border="1"> <tr bgcolor="#eeeeee"> <th>ISBN</th> <th>Title/Description</th> <th>Price</th> <th>Quantity</th> </tr> <tr> <td>0-394-53264-3</td> <td><b>The Way to Cook</b> <p>The magnum opus: half a million copies sold and climbing. More than 800 recipes and over 600 color photographs. Photographs by Brian Leatart and Jim Scherer.</td> <td align="right">$52.00</td> <td align="center"><mgiBuyMe productID="0-394-53264-3" name="The Way to Cook" price="52.00"></td> </tr> <tr> <td>0-737-02041-5</td> <td><b>The Kid's Cookbook : A Great Book for Kids Who Love to Cook</b> <p>Designed especially for kids ages 9 and up, The Kids Cookbook is packed with kid-friendly recipes-and great photos to match. Each recipe includes an equipment list and all instruction young cooks need to have a great time whipping up something delicious. (Super-easy recipes are flagged, so kids can choose their challenges. </td> <td align="right">$15.96</td> <td align="center"><mgiBuyMe productID="0-737-02041-5" name="The Kid's Cookbook : A Great Book for Kids Who Love to Cook" price="15.96"></td> </tr> <tr> <td colspan="4" align="right"> <mgiButton value="Add to Shopping Basket"></td> </tr> </table> </p> </form> </mgiToken> The following is an example database search results page that embeds database information in the mgiBuyMe tags. Notice there are 2 sets of HTML form tags. The first set adds products to the database and the second set posts "Next" and "Previous" results. <mgiToken> <form action="shoppingbasket.mgi" method="post"> <mgiComment> Determine which page of results to display </mgiComment> <mgiSet name="PageToDisplay" defaultValue="1"> <mgiInlineIf lhs={mgiPostArgument name="ResultsSet"} relationship="equals" rhs="Prev" then={mgiPostArgument name="PrevPage"}> <mgiInlineIf lhs={mgiPostArgument name="ResultsSet"} relationship="equals" rhs="Next" then={mgiPostArgument name="NextPage"}> </mgiSet> <mgiComment> Perform the search and display the search results </mgiComment> <mgiSet name="SearchCriteria"> <mgiIf lhs={mgiPostArgument name="keyword"} relationship="isNotEmpty"> *<mgiPostArgument name="keyword">* </mgiIf> </mgiSet> <center> <h2>Search Results</h2> <p> <table width="500" cellspacing="0" cellpadding="3" border="1"> <tr bgcolor="#eeeeee"> <th>ISBN</th> <th>Title/Description</th> <th>Price</th> <th>Quantity</th> </tr> <mgiSearchDatabase databaseName="Products" keyFieldName="ProductName" pageVariableName="SearchCriteria" orderByField="ProductID" resultsPerPage="5" page={mgiGet name="PageToDisplay"} resultVariableName="KeywordResults"> <tr> <td>&mgiDBFieldProductID;</td> <td><b>&mgiDBFieldProductName;</b> <p>&mgiDBFieldProductDescription;</td> <td align="right">$&mgiDBFieldProductPrice;</td> <td align="center"><mgiBuyMe productID="&mgiDBFieldProductID;" name="&mgiDBFieldProductName;" price="&mgiDBFieldProductPrice;"></td> </tr> </mgiSearchDatabase> <tr> <td colspan="4" align="right"> <mgiButton value="Add to Shopping Basket"></td> </tr> </table> </p> </form> <mgiComment> Pass search criteria and display dynamic Previous and Next Buttons </mgiComment> <form action="results.mgi" method="post"> <p><input type="hidden" name="keyword" value={mgiPostArgument name="keyword"}> <input type="hidden" name="PrevPage" value={mgiGet name="KeywordResults_PrevPage"}> <input type="hidden" name="NextPage" value={mgiGet name="KeywordResults_NextPage"}> <mgiIf lhs={mgiGet name="KeywordResults_Page"} relationship="greaterThan" rhs="1"> <input type="submit" name="ResultsSet" value="Prev"> </mgiIf> <mgiIf lhs={mgiGet name="KeywordResults_NextPage"} relationship="greaterThan" rhs="0"> <input type="submit" name="ResultsSet" value="Next"> </mgiIf> </center> </form> Step 9: Save the product pages. Save the changes you have made to the product pages. Step 10: Create a shopping basket page and open it in a text editor. Create a page named "shoppingbasket.mgi" to display the contents of a customer's shopping basket and open the page in a text editing program that allows you to view and modify the HTML and code. Step 11: Insert the mgiShoppingBasket and mgiButton tags. Insert your cursor in the HTML of the shopping basket page where you want the shopping basket to display and enter the beginning mgiShoppingBasket tag, handle parameter and ending mgiShoppingBasket tag. In the handle parameter, enter the name of the default handle you created in the shopping basket administration (i.e., "Default").   Below the mgiShopping basket tag, enter an mgiButton tag and value parameter. In the value parameter, enter the value that will display on the submit button to modify shopping basket quantities (e.g., "Modify Quantity").   Below the mgiShoppingBasket tag and modify quantity button, enter a second mgiButton tag and value parameter. In the value parameter, enter the value that will display on the submit button to proceed to the check out page (e.g., "Check Out").   On the shopping basket page, form actions perform two functions. One form action modifies the contents of the shopping basket (i.e., changes quantities). Enclose the mgiShoppingBasket tag and mgiButton tag used to modify the shopping basket with HTML form tags. Enter the name of the shopping basket page (shoppingbasket.mgi) in the action parameter of the <FORM> tag and enter "post" in the method parameter of the <FORM> tag.   Another form action links customers to the check out page to enter payment, billing and shipping information. Enclose the mgiButton tag used to check out with HTML form tags. Enter the name of the check out page (checkout.mgi) in the action parameter of the <FORM> tag and enter "post" in the method parameter of the <FORM> tag. Note: To use a secure server to collect payment information, enter the URL to a secure server running MGI in the action parameter of the <FORM> tag (e.g., https://secure.domain.com/checkout.mgi). You may substitute a text link for the check out button and form tags.   The default shopping basket uses tokens to track the purchases of individual customers. Enter a beginning mgiToken tag before the first HTML form tag and enter an ending mgiToken tag after the last closing HTML form tag. The mgiToken tags should enclose all links on the page including HREFs and FORM actions.   The following is an example shopping basket page. <mgiToken> <center> <h2>Shopping Basket</h2> <form action="shoppingbasket.mgi" method="post"> <p><mgiShoppingBasket handle="Default"> </mgiShoppingBasket> <p><mgiButton value="Modify Quantity"> </form> <form action="checkout.mgi" method="post"> <mgiButton value="Check Out"> </form> </center> </mgiToken> The default shopping basket contents display in a table with columns for product removal, product quantity, product ID, product name, product price, multiplied product subtotals and order total: Step 12: Save the shopping basket page. Save the changes you have made to the shopping basket page (shoppingbasket.mgi). Step 13: Create a check out page and open it in a text editor. Create a page named "checkout.mgi" to collect payment, billing and shipping information from the customer and open the page in a text editing program that allows you to modify the HTML and code of the page. Step 14: Insert the mgiCollectUserInfo and mgiButton tags. Insert your cursor in the HTML of the check out page where you want the payment, billing and shipping information tables to display and enter the mgiCollectUserInfo tag, handle parameter and shoppingBasketURL parameter. In the handle parameter, enter the name of the default handle you created in the shopping basket administration (i.e., "Default"). In the shoppingBasketURL parameter, enter the full URL to the region where items were added to the shopping basket (and thus where the internal MGI shopping basket database was created and populated).   Below the mgiCollectUserInfo tag, enter an mgiButton tag and value parameter. In the value parameter, enter the value that will display on the submit button to proceed to the order confirmation page (e.g., "Confirm Order").   Form actions on the check out page link customers to the order confirmation page to review their order and customer information. Enclose the mgiCollectUserInfo tag, mgiButton tag, and any custom form elements with HTML form tags. Enter the name of the order confirmation page (confirmorder.mgi) in the action parameter of the <FORM> tag and enter "post" in the method parameter of the <FORM> tag.   The default shopping basket uses tokens to track the purchases of individual customers. Enter a beginning mgiToken tag before the beginning HTML form tag and enter an ending mgiToken tag after the ending HTML form tag. The mgiToken tags should enclose all links on the page including HREFs and FORM actions.   The following is an example check out page. <mgiToken> <form action="confirmorder.mgi" method="post"> <center> <mgiCollectUserInfo handle="Default" shoppingBasketURL="http://www.domain.com/shop/"> <p><mgiButton value="Confirm Order"> </center> </form> </mgiToken> The default check out page display payment, billing and shipping information in tables. Custom form elements appear as you format them. Step 15: Save the check out page. Save the changes you have made to the check out page. Step 16: Create a confirm order page and open it in a text editor. Create a page named "confirmorder.mgi" to present the final shopping basket, payment information, billing information, and shipping information for review. Open the confirm order page in a text editing program that allows you to view and modify the HTML and code of the page. Step 17: Insert the mgiConfirmOrder and mgiButton tags. Insert your cursor in the HTML of the confirm order page where you want the shopping basket, payment, billing, shipping, and additional information tables to display and enter the beginning mgiConfirmOrder tag, handle parameter, shoppingBasketURL parameter, and ending mgiConfirmOrder tag. In the handle parameter, enter the name of the default handle you created in the shopping basket administration (i.e., "Default"). In the shoppingBasketURL parameter, enter the full URL to the region where items were added to the shopping basket (and thus where the internal MGI shopping basket database was created and populated).   Below the mgiConfirmOrder tag, enter an mgiButton tag and value parameter. In the value parameter, enter the value that will display on the submit button to proceed to the final order processing page (e.g., "Complete Order").   Form actions on the confirm order page link customers to the order processing page to complete and send their order. Enclose the mgiConfirmOrder tag and mgiButton tag with HTML form tags. Enter the name of the order processing page (completeorder.mgi) in the action parameter of the <FORM> tag and enter "post" in the method parameter of the <FORM> tag.   The default shopping basket uses tokens to track the purchases of individual customers. Enter a beginning mgiToken tag before the beginning HTML form tag and enter an ending mgiToken tag after the ending HTML form tag. The mgiToken tags should enclose all links on the page including HREFs and FORM actions.   The following is an example confirm order page. <mgiToken> <form action="completeorder.mgi" method="post"> <center> <mgiConfirmOrder handle="Default" shoppingBasketURL="http://www.domain.com/shop/"> </mgiConfirmOrder> <p><mgiButton value="Complete Order"> </center> </form> </mgiToken> The default confirm order page displays completed elements of the payment, billing and shipping information. Step 18: Save the confirm order page. Save the changes you have made to the confirm order page. Step 19: Create an order processing page and open it in a text editor. Create an page named "completeorder.mgi" to present a "thank you for purchasing" message to customers and to send a formatted email of the order to a specified address. Open the order processing page in a text editing program that allows you to view and modify the HTML and code of the page. Step 20: Insert the mgiSendOrder tag. Enter a "thank you" message to display to customers when they complete their order.   At any place on the order processing page, enter a beginning mgiSendOrder tag, handle parameter, shoppingBasketURL parameter, to parameter, from parameter, mailServer parameter, subject parameter, and ending mgiSendOrder tag.   In the handle parameter, enter the name of the default handle you created in the shopping basket administration (i.e., "Default"). In the shoppingBasketURL parameter, enter the full URL to the region where items were added to the shopping basket (and thus where the internal MGI shopping basket database was created and populated).   In the "to" parameter, enter the email address to receive shopping basket orders. In the "from" parameter, enter the email address that appears in the "from" line of shopping basket orders. In the mailServer parameter, enter the address for the outgoing SMTP mail server of your domain (e.g., mail.domain.com). In the subject parameter, enter the subject of the order email. The mgiSendOrder tag does not display information to the customer.   The following is an example order processing page. <center> <h2>Order Complete</h2> <p>Thank you for ordering. Your order has been processed and you should receive the merchandise within 2 to 4 weeks. <mgiSendOrder handle="Default" shoppingBasketURL="http://www.domain.com/shop/" to="sales@domain.com" from="webmaster@domain.com" mailServer="mail.domain.com" subject="Online Order"> </mgiSendOrder> </center> The default order email is formatted with payment, billing, shipping, and order information. Payment Information ------------------- Payment Method: Credit Card Type: Mastercard Number: 1234567891234567 Expiration Date: 01/2002 Name: Beverly Johnson Billing Information ------------------- Name: Beverly Johnson Address: 123 Main Ave. City: Raleigh State: NC Zip Code: 27606 Country: US Phone: 919-123-4567 Product Information -------------------- Quantity: 1 Product ID: 0-028-61010-5 Name: How to Cook Everything. Total Price: $23.99 Quantity: 1 Product ID: 0-425-17329-1 Name: Cook Right 4 Your Type Total Price: $12.55 Quantity: 2 Product ID: 0-060-16010-1 Name: The New York Times Cook Book Total Price: $52.00 Subtotal: $88.54 Tax: $0.00 Shipping: $0.00 Total: $88.54 Step 21: Save the order processing page. Save the changes you have made to the order processing page. Step 22: Tokenize all other pages of the web site. The default shopping basket uses tokens to track the purchases of individual customers. Using a text editor, enter a beginning mgiToken tag and ending mgiToken tag on all additional pages of the web site. The mgiToken tags should enclose all links on the pages including HREFs and FORM actions. <mgiToken> All tags and links appear here. </mgiToken> Step 23: Save the web site pages. Save the changes that you make as you tokenize each page. Step 24: FTP all pages to the web server running MGI. Upload all pages of the web site to the web server using an FTP program. If you are using a secure server, upload only the check out, order confirmation and order processing pages to the secure portion of your web site. Do not attempt to use the shopping basket page on a secure server. Step 25: View a product page in a web browser and purchase a product. View a hard-code or database-driven product page in a web browser. Enter a quantity to purchase in the quantity text field and click the "Add to Shopping Basket" button. The item(s) appears in the shopping basket display on the shopping basket page. Click the "Check Out" button to proceed to the check out page. On the check out page, enter a payment choice, billing information and shipping information (if it is different). Click the "Confirm Order" button to proceed to the confirm order page. On the confirm order page, review your order, payment information, billing information and shipping information, then click the "Complete Order" button to complete the ordering process. The message from the order processing page is displayed and the shopping basket order is formatted and emailed.