MGI | User Guide | Using MGI | Shopping

Integrating a Shopping Basket with Static Products

Example

Purchasing products from a Garden Supply store.

Steps

Create product pages.
Save the product pages and open them in a text editor.
Insert an mgiBuyMe tag and submit button for each product.
Insert a form action and a form method.
Save the product pages.
Create a shopping basket page.
Save the shopping basket page and open it in a text editor.
Insert the mgiShoppingBasket, mgiSBShippingCost and mgiButton tags.
Insert form actions and form methods.
Save the shopping basket page.
Create a check out page.
Save the check out page and open it in a text editor.
Insert the mgiPaymentInfo, mgiShippingInfo, and mgiButton tags.
Insert a form action and a form method.
Save the check out page.
Create a confirm order page.
Save the confirm order page and open it in a text editor.
Insert the mgiConfirmOrder and mgiButton tags.
Insert a form action and a form method.
Save the confirm order page.
Create an order processing page.
Save the order processing page and open it in a text editor.
Insert the mgiSendOrder tag.
Save the order processing page.
Tokenize all 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 product pages.

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 and a submit button for each product. The default quantity box is 6 characters wide. To help with your layout, an example quantity box and submit button might appear as:

Step 2: Save the product pages and open them in a text editor.

Save each product page and open the product pages in a text editor before proceeding with the next step.

Step 3: Insert an mgiBuyMe tag and submit button for each product.

Replace the quantity box placeholder for each product with an mgiBuyMe tag, productID parameter, briefDescription parameter, price parameter, and shippingCost parameter. In the productID parameter, enter a unique code for the product. Product information is tracked through the shopping basket by the productID. In the briefDescription parameter, enter a brief description of the product. The brief description is displayed in the shopping basket. In the price parameter, enter the per item price of each product as a decimal number. Do not enter characters (such as dollar signs) in the price parameter. The shipping choices for a shopping basket integrated with static products is a base shipping cost for each order (entered in the mgiSBShippingCost tag on the shopping basket page) and/or a shipping cost for each item (entered in the mgiBuyMe tag). In the shippingCost parameter, enter the per item shipping cost of each product. If there is no shipping cost, enter "0.00" in the shippingCost parameter. When the product page is processed through a web server running MGI, the mgiBuyMe tag will appear as a quantity box with a width of 6 characters.

Replace the submit button placeholder for each product with an mgiButton tag and name parameter. In the name parameter, enter the name that will display on the submit button (e.g., "Add to Shopping Basket").

<mgiBuyMe productID="334920A" briefDescription="Wooden Rake" 
price="14.99" shippingCost="1.50">
<mgiButton name="Add to Shopping Basket">

Step 4: Insert a form action and a form method for each product.

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">
mgiBuyMe tag and submit button for a product appears here.
</FORM>

Enclose the mgiBuyMe tag and "Add to Shopping Basket" submit button for each product with HTML form tags.

<FORM ACTION="shoppingbasket.html" METHOD="post">
<mgiBuyMe productID="334920A" briefDescription="Wooden Rake" 
price="14.99" shippingCost="1.50">
<mgiButton name="Add to Shopping Basket">
</FORM>

Step 5: Save the product pages.

Save the changes you have made to the product pages.

Step 6: 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 7: 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 8: Insert the mgiShoppingBasket, mgiSBShippingCost and mgiButton tags.

Replace the shopping basket table placeholder with the mgiShoppingBasket tag, mgiSBShippingCost tag, name parameter, method parameter, and baseShippingCost parameter. The mgiSBShippingCost tag and its parameters should be placed in the body of the mgiShoppingBasket tag. 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 only shipping method available for shopping baskets with static products is "BasePlusPerItem". In the baseShippingCost parameter, 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 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>
<mgiSBShippingCost name="Shipping" method="BasePlusPerItem" 
baseShippingCost="2.00">
</mgiShoppingBasket>
<mgiButton name="Modify Shopping Basket">
<mgiButton name="Check Out">

Step 9: 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, 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>
<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 10: Save the shopping basket page.

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

Step 11: 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 12: 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 13: 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 14: 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 15: Save the check out page.

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

Step 16: 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 17: 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 18: 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">
Garden Supply Co.
1007 Main Ave
Raleigh NC 27606
</mgiConfirmOrder>
<mgiButton name="Send Order">

Step 19: 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">
Garden Supply Co.
1007 Main Ave
Raleigh NC 27606
</mgiConfirmOrder>
<mgiButton name="Send Order">
</FORM>

Step 20: Save the confirm order page.

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

Step 21: 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 Garden Supply Co. 
Your order will be sent within 2 weeks. 
Please contact us if you have any questions about your order.

Step 22: 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 23: 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@gardensupplydomain.com" 
from="webmaster@gardensupplydomain.com" 
mailServer="mail.gardensupplydomain.com"
subject="Online Order" taxRate=".06" state="North Carolina">

Step 24: Save the order processing page.

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

Step 25: 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 26: Save the web site pages.

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

Step 27: 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 28: View a product page in a web browser and purchase a product.

View a product page in a web browser. Enter a quantity to purchase in the quantity text field and click the "Add to Shopping Basket" button for a product. 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]