Integrating a Shopping Basket with Database-Driven Searches

Example

Purchasing tshirts from the searchable catalog of a Clothing store.

MGI Tags

  • mgiSBQuantity
  • mgiSBPrice
  • mgiSBField
  • mgiShoppingBasket
  • mgiSBShippingCost
  • mgiPaymentInfo
  • mgiShippingInfo
  • mgiConfirmOrder
  • mgiSendOrder
  • mgiToken

Steps

  1. Create a searchable product database.
  2. Open the results format file in a text editor and insert a new header.
  3. Save the results format file.
  4. Open the results template file and/or display template in a text editor.
  5. Insert the mgiSBQuantity, mgiSBField and mgiSBPrice tags and a submit button.
  6. Insert a form action and a form method.
  7. Save the results template or display template file.
  8. Create a shopping basket page.
  9. Save the shopping basket page and open it in a text editor.
  10. Insert the mgiShoppingBasket, mgiSBPrice, mgiSBShippingCost and mgiButton tags.
  11. Insert form actions and form methods.
  12. Save the shopping basket page.
  13. Create a check out page.
  14. Save the check out page and open it in a text editor.
  15. Insert the mgiPaymentInfo, mgiShippingInfo, and mgiButton tags.
  16. Insert a form action and a form method.
  17. Save the check out page.
  18. Create a confirm order page.
  19. Save the confirm order page and open it in a text editor.
  20. Insert the mgiConfirmOrder and mgiButton tags.
  21. Insert a form action and a form method.
  22. Save the confirm order page.
  23. Create an order processing page.
  24. Save the order processing page and open it in a text editor.
  25. Insert the mgiSendOrder tag.
  26. Save the order processing page.
  27. Tokenize all pages of the web site.
  28. Save the web site pages.
  29. FTP all pages to the web server running MGI.
  30. Search the database and purchase a product.

Step 1: Create a searchable product database.

Create a searchable product database to search product information and display search results. See the Searching Databases and Displaying Results tutorial for instructions.

Step 2: Open the results format file in a text editor and insert a new header.

Open the results format file of the searchable database in a text editing program that allows you to view and modify the HTML. The results format file specifies the layout of the search results list. To integrate the shopping basket into the search results, insert a table cell and header for the quantity field and "Add to Shopping Basket" submit button.
 
In the Clothing database example, add a table cell and the header "Purchase" after the "Price" header. The following is the complete results format file for the Clothing database with an integrated shopping basket. 
<CENTER><TABLE CELLSPACING="3" WIDTH="500">
<TR>
<TD WIDTH="350"><B>T-Shirt Description</B></TD>
<TD WIDTH="50" ALIGN="CENTER"><B>Price</B></TD>
<TD WIDTH="100" ALIGN="CENTER"><B>Purchase</B></TD></TR>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD></TR>

<mgiGet name="mgiSearchResults">

</TABLE>
</CENTER>

<p><center><mgiGet name="mgiPreviousButton">
<mgiGet name="mgiNextButton"></center>

Step 3: Save the results format file.

Save the changes you have made to the results format file.

Step 4: Open the results template file and/or display template in a text editor.

The shopping basket can be integrated with a searchable database in the results template and/or display template file. This example shows the integration in the results template fil. Open the results template or display template file in a text editing program that allows you to view and modify the HTML.

Step 5: Insert the mgiSBQuantity, mgiSBField and mgiSBPrice tags and a submit button.

The results template file specifies the layout of each result in the results list. To integrate the shopping basket with each search result (i.e., each product), enter an mgiSBQuantity tag, mgiSBField tag, mgiSBPrice tag, and a submit button.
 
The mgiSBQuantity tag displays a quantity text field. Enter the mgiSBQuantity tag, productID parameter, and name parameter in the location where the quantity field displays. In the productID parameter, dynamically enter the product ID with an mgiGet tag. In the mgiGet tag's name parameter, enter the name of the database field that contains the unique product ID for each product. Database field names are case-sensitive. In the name parameter of the mgiSBQuantity tag, enter a name for the quantity field. The name parameter is used by MGI only and does not display to customers. 
<mgiSBQuantity productID="<mgiGet name="ProductID">" name="Quantity">
The mgiSBField tag specifies the name of the brief description database field for each product and specifies the label of the product description in the shopping basket. Enter the mgiSBField tag, productID parameter, fieldName parameter and name parameter. In the productID parameter, dynamically enter the product ID with an mgiGet tag. In the mgiGet tag's name parameter, enter the name of the database field that contains the unique product ID for each product. Database field names are case-sensitive. In the fieldName parameter of the mgiSBField tag, enter the name of the database field that contains the brief description of each product. Database field names are case-sensitive. In the name parameter of the mgiSBField tag, enter the label for the brief description of each product as it appears in the shopping basket display. 
<mgiSBField productID="<mgiGet name="ProductID">" 
fieldName="Description" name="Product">
The mgiSBPrice tag specifies the name of the price database field for each product. Enter the mgiSBPrice tag, name parameter and priceFieldName parameter. In the name parameter, enter a name for the price tag. The name parameter is used by MGI only and does not display to customers. In the priceFieldName parameter, enter the name of the decimal database field that contains the price of each product. 
<mgiSBPrice name="Price" pricefieldname="Price">
Enter an mgiButton tag and name parameter to display an "Add to Shopping Basket" submit button. In the name parameter, enter the name that will display on the submit button. 
<mgiButton name="Add to Shopping Basket">
The following is the complete results template file for the Clothing database example with an integrated shopping basket. 
<TR>
<TD><mgiGet name="Description"></TD>
<TD ALIGN="RIGHT">
<P ALIGN=CENTER>$<mgiGet name="Price"></TD>
<TD>
<mgiSBQuantity productID="<mgiGet name="ProductID">" name="Quantity">
<mgiSBField productID="<mgiGet name="ProductID">" name="Description" 
fieldName="Description">
<mgiSBPrice name="Price" pricefieldname="Price">
<mgiButton name="Add to Shopping Basket"></TD></TR>

Step 6: Insert a form action and a form method.

A form action adds the quantity entered in the quantity box to the shopping basket page for processing when the submit button is clicked. Enter the name of the shopping baket page (shoppingbasket.html) in the action parameter of the <FORM> tag. Enter "post" in the method parameter of the <FORM> tag. 
<FORM ACTION="shoppingbasket.html" METHOD="post">
mgiSBQuantity, mgiSBField, mgiSBPrice and mgiButton tags appear here.
</FORM>
Enclose the mgiSBQuantity, mgiSBField, mgiSBPrice and mgiButton tags with HTML form tags. 
<FORM ACTION="shoppingbasket.html" METHOD="post">
<TR>
<TD><mgiGet name="Description"></TD>
<TD ALIGN="RIGHT">
<P ALIGN=CENTER>$<mgiGet name="Price"></TD>
<TD>
<mgiSBQuantity productID="<mgiGet name="ProductID">" name="Quantity">
<mgiSBField productID="<mgiGet name="ProductID">" name="Description" 
fieldName="Description">
<mgiSBPrice name="Price" pricefieldname="Price">
<mgiButton name="Add to Shopping Basket"></TD></TR>
</FORM>

Step 7: Save the results template or display template file.

Save the changes you have made to the results template or display tempalte file.

Step 8: Create a shopping basket page.

Create a page to display the contents of a customer's shopping basket. Insert a placeholder for the default shopping basket table which contains the product ID, description, price and shipping information for each product in addition to subtotals.

Step 9: Save the shopping basket page and open it in a text editor.

Save the shopping basket page and open the shopping basket page in a text editor before proceeding with the next step.

Step 10: Insert the mgiShoppingBasket, mgiSBPrice, mgiSBShippingCost and mgiButton tags.

Replace the shopping basket table placeholder with the mgiShoppingBasket tag, productDatabaseFileLocation parameter, productTableName parameter, productIDFieldName parameter, mgiSBPrice tag, and mgiSBShippingCost tag. In the productDatabaseFileLocation parameter, enter the name of the database file that contains the product information (e.g., Clothing). The database file name is case-sensitive. In the productTableName parameter, enter the name of the database table that contains the product information (e.g., Tshirts). The table name is case-sensitive. In the productIDFieldName, enter the name of the database field name that contains the unique product ID for each product (e.g., ProductID). The database field name is case-sensitive.
 
The mgiSBPrice tag and mgiSBShippingCost tag should be placed in the body of the mgiShoppingBasket tag.
 
The mgiSBPrice tag specifies the name of the price database field for each product. Enter the mgiSBPrice tag, name parameter and priceFieldName parameter. In the name parameter, enter a name for the price tag. The name parameter is used by MGI only and does not display to customers. In the priceFieldName parameter, enter the name of the decimal database field that contains the price of each product.
 
The mgiSBShippingCost tag specifies the shipping method. Enter the mgiSBShippingCost tag, name parameter, method parameter, and additional parameters for each shipping method. In the name parameter, enter a name for the shipping cost value for use by MGI only (e.g., Shipping). In the method parameter, enter the shipping method. The available shipping methods are:
  • "BasePlusPerItem" where shipping charges are a base shipping cost for each order and/or a shipping cost for each item. (18 additional optional parameters)
  • "Weight" where shipping charges are based on the total weight of items in an order. (2 additional required parameters).
  • "Percentage" where shipping charges are a percentage of the order subtotal price. (1 additional required parameter).
  • "TotalItems" where shipping charges are based on the total quantity of items in an order. (1 additional required parameter).
See the mgiSBShippingCost tag reference for details about the required and optional parameters of each shipping method.
 
In the Clothing database example, the BasePlusPerItem method is used. In the baseShippingCost parameter of the mgiSBShippingCost tag, enter the shipping amount that is charged for each order. Shipping charges for each product will be added to the base shipping cost. If you do not charge a base amount for shipping, enter "0.00" in the baseShippingCost parameter.
 
Below the shopping basket, price, and shipping tags enter two mgiButton tags and name parameters. The first submit button is associated with the shopping basket and allows customers to modify the contents of the shopping basket (i.e., remove products and change quantities). To create this button enter an mgiButton tag and enter "Modify Shopping Basket" as the value of the name parameter. The second submit button links customers to the check out page to enter payment and shipping information. To create this button enter an mgiButton tag and enter "Check Out" as the value of the name parameter. 
<mgiShoppingBasket productDatabaseFileLocation="Clothing" 
productTableName="Tshirts" productIDFieldName="ProductID">
<mgiSBPrice name="Price" pricefieldname="Price">
<mgiSBShippingCost name="Shipping" method="BasePlusPerItem" 
baseShippingCost="2.00">
</mgiShoppingBasket>
<mgiButton name="Modify Shopping Basket">
<mgiButton name="Check Out">

Caution: The mgiSBShippingCost tag is required in a database-driven shopping basket even if your shipping cost is zero. If your shipping cost is zero, use the BasePlusPerItem method with a base shipping cost of "0.00".

Step 11: Insert form actions and form methods.

On the shopping basket page, form actions perform two functions. One form action modifies the contents of the shopping basket (i.e., removes products and changes quantities). Enclose the mgiShoppingBasket tag, mgiSBPrice tag, mgiSBShippingCost tag, and mgiButton tag used to modify the shopping basket with HTML form tags. Enter the name of the shopping basket page (shoppingbasket.html) 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 and shipping information.
Enclose the mgiButton tag used to check out with HTML form tags. Enter the name of the check out page (checkout.html) 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.html). 
<FORM ACTION="shoppingbasket.html" METHOD="Post">
<mgiShoppingBasket productDatabaseFileLocation="Clothing" 
productTableName="Tshirts" productIDFieldName="ProductID">
<mgiSBPrice name="Price" pricefieldname="Price">
<mgiSBShippingCost name="Shipping" method="BasePlusPerItem" 
baseShippingCost="2.00">
</mgiShoppingBasket>
<mgiButton name="Modify Shopping Basket">
</FORM>

<FORM ACTION="checkout.html" METHOD="Post">
<mgiButton name="Check Out">
</FORM>

Step 12: Save the shopping basket page.

Save the changes you have made to the shopping basket page.

Step 13: Create a check out page.

Create a page to collect payment and shipping information from the customer. Insert a placeholder for the default payment table and shipping table. The payment information table includes fields for the payment type (Credit Card, Purchase Order, and Check) and the required information for each payment type (e.g., credit card number, etc.). The shipping information table inicludes fields for Name, Company, Address, City, State, Province, Postal Code, Country, Phone, Fax, and Email. To collect any additional information from customers, enter form elements such as text fields, text boxes, radio buttons, checkboxes and pop-up menus. Enter a unique name for each form element that you add. For example, you might want to include an "Additional Comments" text box: 
Additional Comments or Questions:

Step 14: Save the check out page and open it in a text editor.

Save the check out page and open the check out page in a text editor before proceeding with the next step.

Step 15: Insert the mgiPaymentInfo, mgiShippingInfo, and mgiButton tags.

Replace the payment table placeholder with the mgiPaymentInfo tag, visa parameter, mastercard parameter, amex parameter, discoverNovus parameter, carteBlanc parameter, dinersClub parameter, purchaseOrder parameter, and check parameter. For all parameters (visa, mastercard, etc.), enter "Yes" if you accept that form of payment and enter "No" if you do not accept that form of payment. 
<mgiPaymentInfo visa="Yes" mastercard="Yes" amex="Yes" 
discoverNovus="Yes" carteBlanc="No" dinersClub="No" 
purchaseOrder="No" check="Yes">
Replace the shipping table placeholder with the mgiShippingInfo tag. There are no required or optional parameters for the mgiShippingInfo tag. 
<mgiShippingInfo>
At the bottom of the check out page, enter an mgiButton tag and name parameter. This submit button forwards the payment and shipping information to the confirm order page for review. To create this button enter an mgiButton tag and enter "Confirm Order" as the value of the name parameter. 
<mgiButton name="Confirm Order">

Step 16: Insert a form action and a form method.

On the check out page, enclose the mgiPaymentInfo tag, mgiShippingInfo tag, mgiButton tag, and any additional form elements that you entered with HTML <FORM> tags. Enter the name of the confirm order page (confirmorder.html) in the action parameter of the <FORM> tag and enter "Post" in the method parameter of the <FORM> tag. 
<FORM ACTION="confirmorder.html" METHOD="Post">
<mgiPaymentInfo visa="Yes" mastercard="Yes" amex="Yes" 
discoverNovus="Yes" carteBlanc="No" dinersClub="No" 
purchaseOrder="No" check="Yes">

<mgiShippingInfo>

<P>Additional Comments or Questions:</P>
<TEXTAREA NAME="Comments" ROWS="5" COLS="50"></TEXTAREA>

<mgiButton name="Confirm Order">
</FORM>

Step 17: Save the check out page.

Save the changes you have made to the check out page.

Step 18: Create a confirm order page.

Create a confirm order page to present the final shopping basket, payment information, shipping information and additional information for review. Insert a placeholder for the table of information to review.

Step 19: Save the confirm order page and open it in a text editor.

Save the confirm order page and open the confirm order page in a text editor before proceeding to the next step.

Step 20: Insert the mgiConfirmOrder and mgiButton tags.

Replace the confirm order placeholder with the beginning mgiConfirmOrder tag, taxRate parameter, state parameter, the confirm order body, and the ending mgiConfirmOrder tag. In the taxRate parameter, enter the in-state tax rate as a decimal number (e.g., ".06"). In the state parameter, enter the full name of the state where the in-state tax is applicable (e.g., "North Carolina"). In the body of the mgiConfirmOrder tag, enter each line of the mailing address for payments made by check.
 
Below the mgiConfirmOrder tag, enter an mgiButton tag and name parameter. This submit button submits the shopping basket order to the send order page for final processing. To create this button enter an mgiButton tag and enter "Send Order" as the value of the name parameter. 
<mgiConfirmOrder taxRate=".06" state="North Carolina">
The TShirt Store
1007 Main Ave
Raleigh NC 27606
</mgiConfirmOrder>
<mgiButton name="Send Order">

Step 21: Insert a form action and a form method.

On the confirm order page, enclose the mgiConfirmOrder tag and mgiButton tag with HTML <FORM> tags. Enter the name of the order processing page in the action parameter of the <FORM> tag and enter "Post" in the method parameter of the <FORM> tag. 
<FORM ACTION="orderprocessing.html" METHOD="Post">
<mgiConfirmOrder taxRate=".06" state="North Carolina">
The TShirt Store
1007 Main Ave
Raleigh NC 27606
</mgiConfirmOrder>
<mgiButton name="Send Order">
</FORM>

Step 22: Save the confirm order page.

Save the changes you have made to the confirm order page.

Step 23: Create an order processing page.

Create an order processing page to present a "thank you for purchasing" message to customers and to send a formatted email of the order. Enter the thank you message. 
Thank you for purchasing from the The TShirt Store.
Your order will be sent within 2 weeks. 
Please contact us if you have any questions about your order.

Step 24: Save the order processing page and open it in a text editor.

Save the order processing page and open the order processing page in a text editor before proceeding to the next step.

Step 25: Insert the mgiSendOrder tag.

At any place on the order processing page, enter the mgiSendOrder tag, to parameter, from parameter, mailServer parameter, subject parameter, taxRate parameter, and state parameter. 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 the email header. In the mailServer parameter, enter the address for the outgoing mail server of your domain (e.g., mail.domain.com). In the subject parameter, enter the subject of the order email. In the taxRate parameter, enter the in-state tax rate as a decimal number (e.g., ".06"). The value of the taxRate parameter in the mgiSendOrder tag must match the value of the taxRate parameter in the mgiConfirmOrder tag. In the state parameter, enter the full name of the state where the in-state tax is applicable (e.g., "North Carolina"). The value of the state parameter in the mgiSendOrder tag must match the value of the state parameter in the mgiConfirmOrder tag. The mgiSendOrder tag does not display information to the customer. 
<mgiSendOrder to="sales@tshirtstoredomain.com" 
from="webmaster@tshirtstoredomain.com" 
mailServer="mail.tshirtstoredomain.com"
subject="Online Order" taxRate=".06" state="North Carolina">

Step 26: Save the order processing page.

Save the changes you have made to the order processing page.

Step 27: Tokenize all pages of the web site.

MGI uses tokens to track the purchases of individual customers. Open each page of the web site in a text editor including pages associated with the shopping basket and other pages of the web site. Enter a beginning mgiToken tag after the <BODY> tag and enter an ending mgiToken tag before the </BODY> tag. The mgiToken tags should enclose all links on the page including HREFs and FORM actions. 
<BODY>
<mgiToken>
All tags and links appear here.
</mgiToken>
</BODY>

Step 28: Save the web site pages.

Save the changes that you make as you tokenize each page.

Step 29: FTP all pages to the web server running MGI.

Upload all pages of the web site to the web server using an FTP program.

Step 30: Search the database and purchase a product.

Access the database search page in a web browser. Perform a search. In the list of search results, select a product, enter a quantity to purchase in the quantity text field and click the "Add to Shopping Basket" button. The item 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 and shipping information. Click the "Confirm Order" button to proceed to the confirm order page. On the confirm order page, review your order, payment information and shipping information, then click the "Send Order" button to complete the ordering process. The message from the order processing page is displayed and the shopping basket order is formatted and sent via email.

[Return to the Shopping Online Menu]

[User Guide Main Menu] [Understanding MGI Menu] [Using MGI Menu] [Referencing MGI Menu]