Customizing the Shopping Basket Display

Example

Customizing the shopping basket display on the Shopping Basket and Confirm Order pages. (Note: the shopping basket display can be customized with a static or database-driven shopping basket. Examples of both are included below).

MGI Tags

  • mgiConfirmOrder
  • mgiGet
  • mgiShoppingBasket

Steps

  1. Open the shopping basket page in a text editor.
  2. Insert the format and template file parameters in the mgiShoppingBasket tag.
  3. Save the shopping basket page.
  4. Create the shopping basket format file in a text editor.
  5. Save the shopping basket format file.
  6. Create a shopping basket template file in a text editor.
  7. Save the shopping basket template file.
  8. Open the confirm order page in a text editor.
  9. Insert the format and template file parameters in the mgiConfirmOrder tag.
  10. Save the confirm order page.
  11. Create the shopping basket format file for order confirmation in a text editor.
  12. Save the confirm order format file.
  13. Create a shopping basket template file for order confirmation in a text editor.
  14. Save the confirm order template file.
  15. FTP the shopping basket page, confirm order page and 4 format and template files to the web server running MGI.
  16. Add a product to the shopping basket, check out and view the order confirmation.

Step 1: Open the shopping basket page in a text editor.

Open the shopping basket page in a text editing program that allows you to view and modify HTML.

Step 2: Insert the format and template file parameters in the mgiShoppingBasket tag.

The shopping basket display is customized with a format file and a template file. Insert the formatFileLocation parameter and the templateFileLocation parameter in the mgiShoppingBasket tag. In the formatFileLocation parameter, enter the name of the shopping basket format file that you will create (e.g., "sbformat.txt"). In the templateFileLocation parameter, enter the name of the shopping basket template file that you will create (e.g., "sbtemplate.txt").
 
Static Shopping Basket Example: 
<mgiShoppingBasket formatFileLocation="sbformat.txt" 
templateFileLocation="sbtemplate.txt">
<mgiSBShippingCost name="Shipping" method="BasePlusPerItem" 
baseShippingCost="2.00">
</mgiShoppingBasket>
<mgiButton name="Modify Shopping Basket">
<mgiButton name="Check Out">
Database-Driven Shopping Basket Example: 
<mgiShoppingBasket formatFileLocation="sbformat.txt" 
templateFileLocation="sbtemplate.txt">
<mgiSBPrice name="Price" pricefieldname="Price">
<mgiSBShippingCost name="Shipping" method="BasePlusPerItem" 
baseShippingCost="2.00">
</mgiShoppingBasket>
<mgiButton name="Modify Shopping Basket">
<mgiButton name="Check Out">

Step 3: Save the shopping basket page.

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

Step 4: Create the shopping basket format file in a text editor.

Create a new file in a text editing program to format the static structure of the shopping basket display (e.g., table headers and summary variables). Enter HTML and summary variables using the mgiGet tag and name parameter. In the name parameter of the mgiGet tag, enter the name of the variable that you wish to display.
 
The mgiSBProductList variable is required in the shopping basket format file. The mgiSBProductList variable denotes the location of the template file structure for each product in the shopping basket. In the example below, the mgiSBProductList variable is entered below the table headers where the table row for each product will appear.
 
You may also include these summary variables in the shopping basket format file:
  • mgiSBPriceSubtotal - The subtotal of the extended item prices (i.e. price multiplied by quantity) for all products in the shopping basket appears at the location of the mgiSBPriceSubtotal variable.
  • mgiSBBaseShippingCost - When using the BasePlusPerItem shipping method, the mgiSBBaseShippingCost variable displays the base shipping cost for the order.
  • mgiSBShippingCostPerPound - When using the Weight shipping method, the mgiShippingCostPerPound variable displays the shipping rate per pound for the order.
  • mgiSBTotalWeight - When using the Weight shipping method, the mgiTotalWeight variable displays the sum of weights for all items in the shopping basket.
  • mgiSBShippingPercentage - When using the Percentage shipping method, the mgiSBShippingPercentage variable displays the shipping percentage rate for the order.
  • mgiSBShippingCostPerItem - When using the TotalItems shipping method, the mgiSBShippingCostPerItem variable displays the per item shipping rate for the order.
  • mgiSBShippingCostSubtotal - The subtotal of the extended shipping costs (as defined by the shipping method) for all products in the shopping basket appears at the location of the mgiSBShippingCostSubtotal variable.
  • mgiSBTotal - The grand total, including the mgiSBPriceSubtotal and the mgiSBShippingCostSubtotal, appears at the location of the mgiSBTotal variable. In the shopping basket format file, the mgiSBTotal variable does not include tax information (tax information is added in the shopping basket display of mgiConfirmOrder).
 
The following is an example shopping basket format file. The format file variables are highlighted in red. 
<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="3">
<TR>
<TH VALIGN="BOTTOM" BGCOLOR="#ccccff">Remove<BR>Product</TH>
<TH VALIGN="BOTTOM" BGCOLOR="#ccccff">Quantity</TH>
<TH VALIGN="BOTTOM" BGCOLOR="#ccccff">Product<BR>ID</TH>
<TH VALIGN="BOTTOM" BGCOLOR="#ccccff">Brief<BR>Description</TH>
<TH VALIGN="BOTTOM" BGCOLOR="#ccccff">Price</TH>
<TH VALIGN="BOTTOM" BGCOLOR="#ccccff">Price Subtotal</TH>
<TH VALIGN="BOTTOM" BGCOLOR="#ccccff">Shipping<BR>Cost</TH>
<TH VALIGN="BOTTOM" BGCOLOR="#ccccff">Shipping<BR>Subtotal</TH>
<TH VALIGN="BOTTOM" BGCOLOR="#ccccff">Product<BR>Total</TH></TR>

<mgiGet name="mgiSBProductList">

<TR>
<TD COLSPAN="8" ALIGN="RIGHT" BGCOLOR="#ccccff">&nbsp;
<B><FONT SIZE=+1>Price SubTotal</FONT></B>:</TD>
<TD>&nbsp;<mgiGet name="mgiSBPriceSubtotal"></TD></TR>
<TR>
<TD COLSPAN="8" ALIGN="RIGHT" BGCOLOR="#ccccff">&nbsp;
<B><FONT SIZE=+1>Shipping SubTotal</FONT></B>:</TD>
<TD>&nbsp;<mgiGet name="mgiSBShippingCostSubtotal"></TD></TR>
<TR>
<TD COLSPAN="8" ALIGN="RIGHT" BGCOLOR="#ccccff">&nbsp;
<B><FONT SIZE=+1>SubTotal</FONT></B>:</TD>
<TD>&nbsp;
<B><FONT COLOR="#FF0000"><mgiGet name="mgiSBTotal"></FONT></B>
</TD></TR>
</TABLE>

Step 5: Save the shopping basket format file.

Save the changes you have made to the shopping basket format file and name it "sbformat.txt".

Step 6: Create the shopping basket template file in a text editor.

Create a new file in a text editing program to format the structure of each product in the shopping basket. Enter HTML and product variables using the mgiGet tag and name parameter. In the name parameter of the mgiGet tag, enter the name of the variable that you wish to display.
 
You may also include these variables in the shopping basket template file:
  • mgiSBKeepRemoveRadioButtons - The mgiSBKeepRemoveRadioButtons variable displays two radio buttons labeled "Keep" and "Remove". Modifying the shopping basket with the "Remove" button selected will remove the product from the shopping basket.
  • mgiSBKeepRemoveCheckbox - The mgiSBKeepRemoveCheckbox variable displays a checkbox labeled "Remove". Modifying the shopping basket with the checkbox selected will remove the product from the shopping basket.
  • mgiSBKeepRemoveTrashcan - The mgiSBKeepRemoveTrashcan variable displays a trashcan image as a button. Clicking the trashcan image will remove the product from the shopping basket.
  • mgiSBKeepRemoveHyperlink - The mgiSBKeepRemoveHyperlink variable displays the word "Remove" as a link. Selecting the link will remove the product from the shopping basket.
  • mgiSBQuantity - The mgiSBQuantity variable displays the quantity of each product in the shopping basket.
  • mgiSBQuantityModify - The mgiSBQuantityModify variable displays the quantity of each product in the shopping basket as a modifiable quantity text field.
  • mgiSBProductID - The mgiSBProductID variable displays the unique productID for each product in the shopping basket.
  • mgiSBBriefDescription - The mgiSBBriefDescription variable displays the brief description and any values from mgiSBPopUp tags for each product in the shopping basket.
  • mgiSBPrice - The mgiSBPrice variable displays the single-product price of each product in the shopping basket.
  • mgiSBItemPriceTotal - The mgiSBItemPriceTotal variable displays the price multiplied by the quantity for each product in the shopping basket.
  • mgiSBShippingCost - When using the BasePlusPerItem shipping method, the mgiSBShippingCost variable displays the single-product shipping price of each product in the shopping basket.
  • mgiSBItemWeight - When using the Weight shipping method, the mgiSBItemWeight variable displays the weight of each product in the shopping basket.
  • mgiSBItemWeightTotal - When using the Weight shipping method, the mgiSBItemWeightTotal variable displays the weight multiplied by the quantity for each product in the shopping basket.
  • mgiSBItemShippingCostTotal - The mgiSBItemShippingCostTotal variable displays the shipping cost multiplied by the quantity for each product in the shopping basket.
  • mgiSBItemTotal - The mgiSBItemTotal variable displays the sum of the mgiSBItemPriceTotal and mgiSBItemShippingCostTotal for each product in the shopping basket.
 
The following is an example shopping basket template file. The template file variables are highlighted in red. 
<TR>
<TD>&nbsp;<mgiGet name="mgiSBKeepRemoveTrashcan"></TD>
<TD>&nbsp;<mgiGet name="mgiSBQuantityModify"></TD>
<TD>&nbsp;<mgiGet name="mgiSBProductID"></TD>
<TD>&nbsp;<mgiGet name="mgiSBBriefDescription"></TD>
<TD>&nbsp;<mgiGet name="mgiSBPrice"></TD>
<TD>&nbsp;<mgiGet name="mgiSBItemPriceTotal"></TD>
<TD>&nbsp;<mgiGet name="mgiSBShippingCost"></TD>
<TD>&nbsp;<mgiGet name="mgiSBItemShippingCostTotal"></TD>
<TD>&nbsp;<mgiGet name="mgiSBItemTotal"></TD>
</TR>

Step 7: Save the shopping basket template file.

Save the changes you have made to the shopping basket template file and name it "sbtemplate.txt".

Step 8: Open the confirm order page in a text editor.

Open the confirm order page in a text editing program that allows you to view and modify HTML.

Step 9: Insert the format and template file parameters in the mgiConfirmOrder tag.

The shopping basket display on the order confirmation page is customized with a format file and a template file. Insert the formatFileLocation parameter and the templateFileLocation parameter in the mgiConfirmOrder tag. In the formatFileLocation parameter, enter the name of the confirm order format file that you will create (e.g., "coformat.txt"). In the templateFileLocation parameter, enter the name of the confirm order template file that you will create (e.g., "cotemplate.txt").
 
Confirm Order Example: 
<FORM ACTION="orderprocessing.html" METHOD="Post">
<mgiConfirmOrder taxRate=".06" state="North Carolina" 
formatFileLocation="coformat.txt" templateFileLocation="cotemplate.txt">
Garden Supply Co.
1007 Main Ave
Raleigh NC 27606
</mgiConfirmOrder>
<mgiButton name="Send Order">
</FORM>

Step 10: Save the confirm order page.

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

Step 11: Create the shopping basket format file for order confirmation in a text editor.

Create a new file in a text editing program to format the static structure of the shopping basket display (e.g., table headers and summary variables) on the confirm order page. Enter HTML and summary variables using the mgiGet tag and name parameter. In the name parameter of the mgiGet tag, enter the name of the variable that you wish to display.
 
The mgiSBProductList variable is required in the shopping basket format file on the confirm order page. The mgiSBProductList variable denotes the location of the template file structure for each product in the shopping basket. In the example below, the mgiSBProductList variable is entered below the table headers where the table row for each product will appear.
 
You may also include these summary variables in the confirm order format file:
  • mgiSBPriceSubtotal - The subtotal of the extended item prices (i.e., price multiplied by quantity) for all products in the shopping basket appears at the location of the mgiSBPriceSubtotal variable.
  • mgiSBBaseShippingCost - When using the BasePlusPerItem shipping method, the mgiSBBaseShippingCost variable displays the base shipping cost for the order.
  • mgiSBShippingCostPerPound - When using the Weight shipping method, the mgiShippingCostPerPound variable displays the shipping rate per pound for the order.
  • mgiSBTotalWeight - When using the Weight shipping method, the mgiTotalWeight variable displays the sum of weights for all items in the shopping basket.
  • mgiSBShippingPercentage - When using the Percentage shipping method, the mgiSBShippingPercentage variable displays the shipping percentage rate for the order.
  • mgiSBShippingCostPerItem - When using the TotalItems shipping method, the mgiSBShippingCostPerItem variable displays the per item shipping rate for the order.
  • mgiSBShippingCostSubtotal - The subtotal of the extended shipping costs (as defined by the shipping method) for all products in the shopping basket appears at the location of the mgiSBShippingCostSubtotal variable.
  • mgiSBTax - The subtotal of all taxes for the order appears at the location of the mgiSBTax variable.
  • mgiSBTotal - The grand total including the mgiSBPriceSubtotal, the mgiSBShippingCostSubtotal, and the mgiSBTax appears at the location of the mgiSBTotal variable.
 
The following is an example shopping basket format file. The format file variables are highlighted in red. 
<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="3">
<TR>
<TH VALIGN="BOTTOM" BGCOLOR="#ccccff">Quantity</TH>
<TH VALIGN="BOTTOM" BGCOLOR="#ccccff">Product<BR>ID</TH>
<TH VALIGN="BOTTOM" BGCOLOR="#ccccff">Brief<BR>Description</TH>
<TH VALIGN="BOTTOM" BGCOLOR="#ccccff">Price</TH>
<TH VALIGN="BOTTOM" BGCOLOR="#ccccff">Price Subtotal</TH>
<TH VALIGN="BOTTOM" BGCOLOR="#ccccff">Shipping<BR>Cost</TH>
<TH VALIGN="BOTTOM" BGCOLOR="#ccccff">Shipping<BR>Subtotal</TH>
<TH VALIGN="BOTTOM" BGCOLOR="#ccccff">Product<BR>Total</TH></TR>

<mgiGet name="mgiSBProductList">

<TR>
<TD COLSPAN="8" ALIGN="RIGHT" BGCOLOR="#ccccff">&nbsp;
<B><FONT SIZE=+1>Price SubTotal</FONT></B>:</TD>
<TD>&nbsp;<mgiGet name="mgiSBPriceSubtotal"></TD></TR>
<TR>
<TD COLSPAN="8" ALIGN="RIGHT" BGCOLOR="#ccccff">&nbsp;
<B><FONT SIZE=+1>Shipping SubTotal</FONT></B>:</TD>
<TD>&nbsp;<mgiGet name="mgiSBShippingCostSubtotal"></TD></TR>
<TR>
<TD COLSPAN="8" ALIGN="RIGHT" BGCOLOR="#ccccff">&nbsp;
<B><FONT SIZE=+1>Tax</FONT></B>:</TD>
<TD>&nbsp;<mgiGet name="mgiSBTax"></TD></TR>
<TR>
<TD COLSPAN="8" ALIGN="RIGHT" BGCOLOR="#ccccff">&nbsp;
<B><FONT SIZE=+1>SubTotal</FONT></B>:</TD>
<TD>&nbsp;
<B><FONT COLOR="#FF0000"><mgiGet name="mgiSBTotal"></FONT></B>
</TD></TR>
</TABLE>

Step 12: Save the confirm order format file.

Save the changes you have made to the confirm order format file and name it "coformat.txt".

Step 13: Create a shopping basket template file for order confirmation in a text editor.

Create a new file in a text editing program to format the structure of each product in the shopping basket on the confirm order page. Enter HTML and product variables using the mgiGet tag and name parameter. In the name parameter of the mgiGet tag, enter the name of the variable that you wish to display.
 
You may also include these variables in the confirm order template file:
  • mgiSBQuantity - The mgiSBQuantity variable displays the quantity of each product in the shopping basket.
  • mgiSBProductID - The mgiSBProductID variable displays the unique productID for each product in the shopping basket.
  • mgiSBBriefDescription - The mgiSBBriefDescription variable displays the brief description and any values from mgiSBPopUp tags for each product in the shopping basket.
  • mgiSBPrice - The mgiSBPrice variable displays the single-product price of each product in the shopping basket.
  • mgiSBItemPriceTotal - The mgiSBItemPriceTotal variable displays the price multiplied by the quantity for each product in the shopping basket.
  • mgiSBShippingCost - When using the BasePlusPerItem shipping method, the mgiSBShippingCost variable displays the single-product shipping price of each product in the shopping basket.
  • mgiSBItemWeight - When using the Weight shipping method, the mgiSBItemWeight variable displays the weight of each product in the shopping basket.
  • mgiSBItemWeightTotal - When using the Weight shipping method, the mgiSBItemWeightTotal variable displays the weight multiplied by the quantity for each product in the shopping basket.
  • mgiSBItemShippingCostTotal - The mgiSBItemShippingCostTotal variable displays the shipping cost multiplied by the quantity for each product in the shopping basket.
  • mgiSBItemTotal - The mgiSBItemTotal variable displays the sum of the mgiSBItemPriceTotal and mgiSBItemShippingCostTotal for each product in the shopping basket.
 
The following is an example shopping basket template file. The template file variables are highlighted in red. 
<TR>
<TD>&nbsp;<mgiGet name="mgiSBQuantity"></TD>
<TD>&nbsp;<mgiGet name="mgiSBProductID"></TD>
<TD>&nbsp;<mgiGet name="mgiSBBriefDescription"></TD>
<TD>&nbsp;<mgiGet name="mgiSBPrice"></TD>
<TD>&nbsp;<mgiGet name="mgiSBItemPriceTotal"></TD>
<TD>&nbsp;<mgiGet name="mgiSBShippingCost"></TD>
<TD>&nbsp;<mgiGet name="mgiSBItemShippingCostTotal"></TD>
<TD>&nbsp;<mgiGet name="mgiSBItemTotal"></TD>
</TR>

Step 14: Save the confirm order template file.

Save the changes you have made to the confirm order template file and name it "cotemplate.txt".

Step 15: FTP the shopping basket page, confirm order page and 4 format and template files to the web server running MGI.

Upload the shopping basket page, confirm order page and 4 format and template files to the web server using an FTP program.

Step 16: Add a product to the shopping basket, check out and view the order confirmation.

Access the static or database-driven shopping basket and add a product to the shopping basket. The product displays in the custom shopping basket format. Proceed to the checkout process. Enter payment and shipping information and click the submit button. The shopping basket on the order confirmation page displays in the custom shopping basket format.

[Return to the Shopping Online Menu]

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