Customize the Shopping Basket Display

Introduction

Please review the basic shopping online tutorial. This tutorial is an extension of the basic shopping online tutorial and explains how to customize one aspect of the shopping basket system. View the other advanced tutorials to customize other aspects of the shopping basket system.

The default shopping basket table displays a trashcan icon to delete items, a modifiable quantity field, the product ID, product name, product price, extended product price, shipping total and total (does not include tax which is added in the mgiConfirmOrder tag). You may customize the shopping basket text, layout, item information and totals using the mgiShoppingBasket placeholders and variables

MGI Tags

Steps

  1. Open the shopping basket page in a text editor.
  2. Customize the shopping basket.
  3. Save the shopping basket page.
  4. FTP the shopping basket page to the web server running MGI.
  5. Add items to the shopping basket.


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

Open the shopping basket page (e.g., shoppingbasket.mgi) in a text editing program that allows you to view and modify the HTML and code of the page.

Step 2: Customize the shopping basket.

If the default shopping basket does not fit with your site design, you may customize the shopping basket layout and the content of the shopping basket using the mgiShoppingBasket placeholders and variables. With a custom layout you can add font properties, cell colors, images, etc.
 
In a custom shopping basket, the code in the body of the mgiShoppingBasket tags is repeated for each item in the shopping basket and the placeholders are replaced with the item's specific information. After the mgiShoppingBasket tags, the shopping basket variables display information calculated from the current shopping basket contents.
 
You may format the text and HTML of your shopping basket in any way. The following placeholders are available to display information for each item. The placeholders will be replaced with each product's specific information.
  • &mgiDBFieldQuantity; is the quantity of the product.
  • &mgiDBFieldQuantityMultiplier; is the quantity multiplier of the product.
  • &mgiDBFieldProductID; is the product ID.
  • &mgiDBFieldName; is the product name (short description).
  • &mgiDBFieldDescription; is the product description
  • &mgiDBFieldPrice; is the product price.
  • &mgiDBFieldShipping; is the product shipping cost.
  • &mgiDBFieldQualifier1; is the first product qualifier.
  • &mgiDBFieldQualifier2; is the second product qualifier.
  • &mgiDBFieldQualifier3; is the third product qualifier.
  • &mgiDBFieldQualifier4; is the fourth product qualifier.
  • &mgiDBFieldQualifier5; is the fifth product qualifier.
  • &mgiDBFieldWeight; is the product weight.
  • &mgiSBDeleteTrashcan; is a clickable trashcan icon that removes the product from the shopping basket.
  • &mgiSBDeleteRadioButtons; is a set of Keep/Remove radio buttons that allows the product to be removed from the shopping basket.
  • &mgiSBModifiableQuantity; is a text input containing the quantity purchased for the product. This value can be modified.
  • &mgiSBItemPriceTotal; is the price of a product multiplied by the quantity purchased and includes any price rules that have been applied.
 
The following variables are available anywhere after the ending mgiShoppingBasket tag to display order totals. Variables can be displayed with the mgiGet tag.
  • mgiSBShippingTotal is the shipping price of the order after all shipping rules have been applied.
  • mgiSBTotal is the total price of the order after all price rules have been applied.
 
Customizing the display of the shopping basket page does not require you to customize any other aspect of the shopping basket system. The shopping basket may be customized independently of the check out page, order confirmation page and order email.
 
The following is the code of a custom shopping basket:
<mgiToken>

<form action="shoppingbasket.mgi" method="post">

<p><table cellpadding="5" cellspacing="1" border="0">
<tr bgcolor="#EEEECC">
<td align="center"><font size="-1" 
face="helvetica, arial, sans-serif">
<b>Remove</b></font></td>
<td><font size="-1" face="helvetica, arial, sans-serif">
<b>Qty</b></font></td>
<td><font size="-1" face="helvetica, arial, sans-serif">
<b>Description</b></font></td>
<td><font size="-1" face="helvetica, arial, sans-serif">
<b>Price</b></font></td>
</tr>

<mgiShoppingBasket handle="Default">

<tr>
<td align="center">&mgiSBDeleteTrashcan;</td>
<td>&mgiSBModifiableQuantity;</td>
<td><font size="-1" face="helvetica, arial, sans-serif">
&mgiDBFieldName;</font></td>
<td align="center">
<font size="-1" face="helvetica, arial, sans-serif">
$&mgiSBItemPriceTotal;</font></td>
</tr>

</mgiShoppingBasket>

<tr bgcolor="#EEEECC">
<td colspan="2"><font size="-2" 
face="helvetica, arial, sans-serif">
Tax and Shipping will be calculated during Checkout.
</font></td>
<td><font size="-1" face="helvetica, arial, sans-serif">
<b>Subtotal</b></font></td>
<td><font size="-1" face="helvetica, arial, sans-serif">
<b>$<mgiGet name="mgiSBTotal"></b></font></td>
</tr>
</table>

<p><mgiButton name="Update Basket">

<p><a href="checkout.mgi">Proceed to Checkout</a>

</form>

</mgiToken>

Step 3: Save the shopping basket page.

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

Step 4: FTP the shopping basket page to the web server running MGI.

Upload the shopping basket page from your local computer to the web server using an FTP program.

Step 5: Add items to the shopping basket.

Add items to your shopping basket to display the shopping basket page. The custom shopping basket in this example has the following display:


[Return to the Shopping Online Menu]


[Understanding MGI Menu] [Using MGI Menu] [Referencing MGI Menu]


[MGI Guides Main Menu] [User Guide Main Menu]