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
- Open the shopping basket page in a text editor.
- Customize the shopping basket.
- Save the shopping basket page.
- FTP the shopping basket page to the web server running MGI.
- 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:
|