for the standard buy button 
, save it as the same
name - buy.gif - and it will be used for all buy buttons
throughout the shop without having to identify it specifically
within the tame system. When you use Outline:
Return to Table of Contents
There are two areas to customize that will have the most visual impact on you site. The Tame Icons (tamicons) and the Tame Panels. A standard set of icons and panels are provided with your system.
The icons are located in the TAMICONS directory in the document or web root directory. This is the same location that shop directories are located and usually the place where your html files are. Contained in this directory are all the standard icons used within the system. Do not ever change the icons in this directory. Instead following the directions below to copy and customize icons.
Panels are in software directory, generally called tame. They are in the subdirectory global/panels. Do not ever change the panels in this directory. Instead follow the directions below to copy and customize your panels.
For more path information, see the directory trees in the Directory Permission Section
A list of the icons with file names can be view by selecting "Your Starter Icons Set" from your example shop home page. The example page a shop located in your mall and access by the path:
http://yourdomain/yourcgi/yourtamename/examples/index.tam.
A list of panels and their functionality is provided at the end of this section.
To customize your icons you should create a new directory on your web server. The most common location for this directory is in the shop. If the new icons will be used by multiple shops you may also wish to put a directory under your document or web root directory; that is, in the same directory where your shop directories are located.
Once you have created the new directory, copy all the files from the TAMICONS directory, located in the document or web root directory, to this directory that we will refer to as newicons for the remainder of this section. The reason this is so important is that when you update your system to a new version the tamicons directory is overwritten with new standard icons. Therefore, if you make changes in the tamicons directory and update you will lose all your special icons.
Next you must allow the system to access your new directory for icons instead of looking in the standard tamicon directory. Using the following steps to complete this process.
Often page designers want special buttons
for standard icons such as buy, home, prior and next that are
used throughout the system. To do this, create your new icon and
save it as the same name as the standard icon. This will allow
the system to use this icon automatically. For example, if you
substitute for the standard buy button , save it as the same
name - buy.gif - and it will be used for all buy buttons
throughout the shop without having to identify it specifically
within the tame system. When you use
<tame> ^buy: 123 </tame> the buy button will appear as below.
You can look at the standard icons listing provided in the example section of your system to see the standard image and the file name for these icons. That is easiest way to determine what the file name for your placement image should be.
New icons can simply be added to the newicons directory. You can use other subdirectories, if this is easier for your site management. The icons can then be used in one of the ways below. To make the new icon a tame image an additional step is required. Here are the options for using your new images on tame pages:
To present the image on your tame page you can use the standard html code associated with <img src> for example:
<img src="/newicons/heading.gif" alt="Page header" border="0">
Note: The <img src> command can not be used inside some tame tags. Instead the place tag or a defined tame image are required.
or
You can use the tame command, place, to present the image on your tame page. The place command puts an image, not currently defined as a tame image, on a button or within a page. Here is how place is used:
<tame> place: DOCUMENT-LOCATION HTML-OPTION-LIST </tame> Where the HTML-OPTION-LIST can be any valid option for the HTML<img src> tag. For example,
<tame> place: star.gif align=center width=50 height=50 alt="teststar" </tame>
will present
on your tame page.
or
You can use the steps in the next section to create a tame image and present that image on your page.
Note: The advantage of a tame image is ease of use. The functionality is the same as using the place command. However, the <img src> command can not be used inside some tame tags and the place command or a tame image must be used.
The advantages of a tame image are easier use in a tame command and reduced typing. The image and its properties, such as width, height, border etc. are defined once for an image. The image is then provided with a tame image name in the format {*imagename*}. This format can then be used through out the system, or a group a pages to show the image on your page.
<tame>
face: *TAGNAME* BUTTON-FACE-TEXT
DOCUMENT-LOCATION HTML-OPTION-LIST
</tame>
Here is an example of this
command to define this face, 
, as a tame face.
<tame> face: *scissors* "Coupons" scissors.gif alt="[ A Coupon Cutter ]" height=24 width=25 border=0</tame>
OR
<tame>
image: *TAGNAME* DOCUMENT-LOCATION
HTML-OPTION-LIST
</tame>
Here is an example of this
command to define this image, , as a tame image.
<tame> image: *scissors* scissors.gif alt="[ A Coupon Cutter ]" height=24 width=25 border=0</tame>
<tame> ^buy: 123 {*scissors*} </tame> Would you like to buy some scissors? Click to purchase
The screen would show:
Would you
like to buy some scissors? Click to purchase
<tame>include: PATH-FILE</tame>
For example if your images are in a file called coolimages.tag the put the following command at the top of the tame page where you wish to use these images.
<tame>include: coolimages.tag </tame>
<tame> ^buy: 123 {*scissors*} </tame> Would you like to buy some scissors? Click to purchase
The screen would show:
Would you
like to buy some scissors? Click to purchase
<tame> ^link: newfile.tam {*folder*} Go here for great buys on your office supplies</tame>
The screen would show:
Go here
for great buys on your office supplies
We have discussed a number of tags related to images and icons. Each is listed here with a definition and its syntax.
<tame>
face: *TAGNAME* BUTTON-FACE-TEXT
DOCUMENT-LOCATION HTML-OPTION-LIST
</tame>
- TAGNAME:
- The name to use as the tag name for the image.
- BUTTON-FACE-TEXT:
- The area containing the text to place on a hot-link or form button. This area may also contain one TAMEIMAGE to place on the face of a form button.
- Note: A BUTTON-FACE-AREA reverts to an HTML-ARGUMENT-AREA when it is not nested inside a <tame form> ... <tame /form> area.
- HTML-OPTION-LIST:
- List of options for the image. Can include any valid options for the HTML <image> tag.
<tame>include: PATH-FILE</tame>
<tame> place: DOCUMENT-LOCATION HTML-OPTION-LIST </tame>
Basic changes to panels can be made through the option process without actually reformatting a panel. Tame panels include options that can be change in the show_panel tag. These are options such as presenting buttons as graphic or text, which buttons to show and which columns to show in the table. Panels, such as the cart panel, are defined in the glossary with the options that you can set. To make these types of changes simple include the options or option-value pairs that support your needs. While these basic changes will support many of your need, we believe that you should be able to customize at any level further customization is discussed in the next section.
To complete this basic customization the show_panel tag is used. Panels are evaluated and shown using this tag. Here is the syntax:
- show_panel
- Presents the panel indicated by PANEL_NAME.
- <tame>
show_panel: PANEL_NAME OPTION-LIST
</tame>
- PANEL_NAME
- The name of a tame panel to present on the page. All the panels are listed in the panel list in the example section.
- OPTION-LIST
- The options associated with a panel to customize its presentation. Each panel has a specific set of options associated with the panel.
There are two kinds of option that can be placed in the option list:
SWITCH OPTIONS: These are switches that control whether an option is applied or not. The option "BUTTONS" is a switch option for the cart panel. It turns on or off the button toolbar. You can see this in the cart panel example below.
NAMED-VALUE OPTIONS: These are named values used to create the panel. The option "BORDER #" is a named value option for the cart panel. It allows supplying the value of the border width. You can see this in the cart panel example below.
Here is an example of customizing the cart panel.
<tame>
show_panel: cart.pan
HEADER
TITLE [This is a {*star*} cool basket]
BUTTONS checkstand clear redo
FILTER
TEXTBUTTONS
HOTLINKS
COLUMNS remove item descrip qty amount
BORDER 5
</tame>Here is the cart panel this will present.
To customize your panels, do not make changes in the panel directory of your tame root. Instead, you should copy the panel(s) you wish to change to your shop directory or a new panel directory, and make changes there. You must also make a change to the Admin Wizard to all these panels to override the panels in the panel directory.
If you want to change a large number of panels you should create a new directory on your web server and then define that directory in the configuration tag or through the Admin Wizard. If the new panels will be used by multiple shops or you wish to make changes to may of the panels you may wish to put a directory under your web root; that is, in the same directory where your shop directories are located. Once you have created the new directory copy all the files from the panel directory to this directory that we will refer to as newpanel for the remainder of this section. The reason this is so important is that when you update your system to a new version the panel directory is overwritten with new standard panels. Therefore, if you make changes in the panel directory and update you will lose all your special panels.
Whether you change one panel or many, you must allow the system to access your new directory for panels instead of looking in the standard panel directory . Using the following steps to complete this process.
Now you have a copy of the panels that you can edit.
Tame has a large select of panels to use within the system. Most of these panels have names that are self-explanatory, but to assist with finding the correct panel to achieve the desired results we have provided some additional help. In the examples section there is a listing of panels with a short description and in many cases a view of the standard panel. Use these descriptions and lists to select your panels for customization. The listing can be viewed at http://www.clickshop.com/examples/panelist.tam or look in your own example shop index for the listing.
Panels are created in application level syntax not document level syntax. This means that there are advanced command used to provide the extensive functionality required in these panels. In most cases the short cut { } command structure is used instead of the <tame> </tame> format. In addition document level syntax uses a tag followed by a colon (:) where many of the more advanced commands use dot (.) format. Final many panels make calls to libraries using: {include. ~ecs/shipping.lib}. Do not delete this command under any circumstances.
We mention all this not to deter you from making format changes to the panels but to avoid sections that are program areas and don't effect the look of the panel. The majority of formatting is completed with document level tags and you should be able to make changes using this information and the glossary of tags for assistance.
We will make changes to a number of panels to provide you with an understanding of this process. First a common change is to the shipping panel. While the data that is included in the shipping panel is defined through a database, see the shipping section, the titles and format are defined in the shipping.pan. Here is the code for that panel. Note the data in bold is the format section of this panel. By changing this information you can effect the look and feel of the shipping table
{include. ~ecs/shipping.lib}
<tame apptitle: {&shop_name} shipping selection>
{define: shipping_method <TR><TD>{&METHOD-BUTTON} {&METHOD}</TD><TD>{&SHIPPING-ZONE}</TD>}
{define: shipping_zone {&ZONE-SELECT}}
{define: single_method <TR><TD>Shipping Zone: {&ZONE-SELECT}</TD>}
{when_allow_tables:
{form}
<tame hidden: action.init_shipping y>
<center>
<table border={panel_border} cellpadding=3>
<tr><TH colspan=2><font color="#0000C0"><i>Select Shipping Method</i></font></TH></tr>
<TR><TH>method</TH><TH>zone</TH></TR>
{shipping_methods}
</table>
</center>
{/form}
}
{when_not_allow_tables:
{form}
<center>
<table border={panel_border} cellpadding=3>
<TH colspan=2><font color="#0000C0"><i>Select Shipping Method</i></font>
<TR><TH>method<TH>zone
{shipping_methods}
</table>
</center>
{/form}
}
Making the following changes to the format would create a more customized shipping panel for your site
<table border=4 cellpadding=3>
<tr><TH colspan=2><font color="#0000C0"><i>Select Shipping Method<br>Your shipping is free if you purchase over $100!</i></font></TH></tr>
<TR><TH>Location</TH><TH> Type of Shipment</TH></TR>
{shipping_methods}
</table>
Another common panel to change is the cart panel (cart.pan). The code for this panel follows. For complete syntax of a number of the tags used in this panel, look at the creating your own panels section below or in the glossary. The sections in color and bold are comments about the code.
<tame ifcart. {panel_option: FILTER {&cart_filter}} else ex>
<tame when_panel: shipping {verify_shipping}>
<tame include: ~ecs/cart.tag>
<tame>
when_allow_tables::
<tame form>
<center>
<table border={&cart_border} width=95% cellpadding=3>
The {&cart_border} is provided in the admin wizard.
<tame>
When the HEADER option is select this code becomes functional. (See the cart.pan description above.
when_panel:: HEADER
<tr><th colspan={&columns}>{panel_option: TITLE <i><font color="{color-blue}">Shopping {lan_cart}{for_cust}</font></i></th></tr>}
</tame>
<tr>
This section defines the column headings for the table. Each is selected through the option process. If you have additional columns they would be added in this area and then selected as an option with the show_panel. (See the cart.pan description above.
<tame>
when_panel: remove <th></th>;
when_panel: item <th>Item</th>;
when_panel: qty <th>Qty</th>;
when_panel: descrip <th>Description</th>;
when_panel: price <th>Price</th>;
when_panel: amount <th>Amount</th>;
</tame>
</tr>
<tame when_panel: TEXTBUTTONS {alltext}>
This section provide the actual customer purchase information for those columns selected as options.
<tame>
each_cart_item:: <tr>
{when_panel:: remove
{when_panel: REMOVEBOXES <td align=center>{box: {cart_del_item_name}}<font size=-1>remove</font></td>}
{when_not_panel: REMOVEBOXES <td align=center>{arg: {cart_del_item_name} y; goloop: {vo.. *remove* "remove"}}</td>}
}
{when_panel: item <td align=center><tt>{&item}</tt></td>}
{when_panel: qty <TD align=center><tt>{cart_qty}</td>}
{when_panel: descrip <td><tt>{cart_descrip when_qualities: <br>{&qualities}}</tt></td>}
{when_panel: price <td align=right><tt>{cur. &price}</tt></td>}
{when_panel: amount <TD align=right><tt>{cur. &amount nl}</tt></td>}
</tr>
</tame>
{when_subtotal:: <tr><th colspan={int. {&columns - 1}} align=right>Subtotal{nl}</th><td align=right><tt>{cur. &subtotal nl}</tt></td></tr>}
{when_shipping:: <tr><th colspan={int. {&columns - 1}} align=right>{&VIA then [Shipping via {&VIA}]; else "Shipping"}{nl}</th><td align=right><tt>{cur. &shipping nl}</tt></td></tr>}
{when_tax:: {each_tax_method:: <tr><th colspan={int. {&columns - 1}} align=right>{&tax_method nl}</th><td align=right><tt>{cur. &tax_value nl}</tt></td></tr>}}
<tr><th colspan={int. {&columns - 1}} align=right>Total{nl}</th><td align=right><tt>{cur. &total nl}</tt></td></tr>
</table>
<tame>
when_panel:: BUTTONS
<table border={&cart_border} width=95%>
<tr>
When shipping is included this section provides the shipping information and includes it in the totals on the cart.
{when_shipping_defined! when_panel:: shipping <TD align=center>{&cnoaccept then arg: no_accept y; allow_nofill ^shipping}</td>}
This section sets the buttons across the bottom of the screen to clear, continue or return to shopping.
{when_panel:: clear <TD align=center>{^clear}</td>}
{when_not_known: {when_panel:: identify <TD align=center>{&cnoaccept then arg: no_accept y; ^identify}</td>}}
{when_panel:: checkstand <TD align=center>{&cnoaccept then arg: no_accept y; ^checkstand}</td>}
{when_panel:: redo <TD align=center>{&cnoaccept then arg: no_accept y; ^redo}</td>}
</tr>
</table>
</tame>
<tame when_panel: TEXTBUTTONS {clralltext}>
</center>
{/form}
</tame>
{;-------------------------------------------------------------------}
<tame>
This section is similar to the section above "when_allow_tables" but for "when_not_allow_tables"..
when_not_allow_tables::
{form}
{when_panel:: HEADER
<center>
{panel_option:: TITLE <i><font color="#0000C0">Shopping {lan_cart}{for_cust}</font></i>}
</center>}
<pre>
item qty description amount
<hr>
{each_cart_item::
{win: 10 {&item}} {cart_qty: 3} {cart_descrip: 37} {win: -10 {cur. &amount}}
{when_qualities: {sp: 21}{&qualities nl}}}
{
when_subtotal: {win! &prod_wd [Subtotal {win! -10 cur. &subtotal}]}{nl};
when_shipping: {win!! &prod_wd &VIA then [Shipping via {&VIA} ]; else "Shipping "; win! -10 cur. &shipping}{nl};
when_tax: {win! &prod_wd [ Tax {win! -10 cur. &tax}]}{nl};
win! &prod_wd [ Total {win! -10 cur. &total}];
}
</pre>
{when_panel:: BUTTONS
<center>
{when_panel:: shipping {allow_nofill ^shipping}</td>}
{when_panel:: clear {^clear}</td>}
{when_not_known:: {when_panel:: identify {^identify}</td>}}
{when_panel:: checkstand {^checkstand}</td>}
{when_panel:: redo {^redo}</td>}
</center>}
{/form}
</tame>
You can create your own panels. A Tame Panel is a file of HTML and TAME code that is saved with the *.pan extension. This file can be in the designated panel directory for the shop, or in the current directory. There are three special tags used when constructing panels to get any options a page designer might have supplied to the panel on the show_panel line (show_panel is discussed at the end of this section).
when_panel_option:: HTML_AREA
when_not_panel_option:: HTML_AREA
panel_option:: NAME DEFAULT
For example, here is a small panel using these tags.
<table border={panel_option:: BORDER 6}>
<tr>
<td>
<tame> when_panel_option:: BOLD <B> </tame>
Here is the first column of the table.
<tame> when_panel_option:: BOLD </B></tame>
</td>
</tr>
</table>This panel is saved as bold.pan. The panel option BORDER is used to select the border width and defaults to 6. If the option BOLD is given, then the first column of the table will be displayed in bold.
When this panel is called on a tame page and you want the first column to be bold the following would be used:
<tame> show_panel: bold.pan BORDER 3 BOLD </tame>
Now the tame page will interpret this command as a table with a border of 3 instead of the default 6 and the first column will be bold. See below for further definitions of show_panel.
To customize the customer information, you need to complete a number of additional steps for the system to accept the changes. Customer information data fields are defined in the admin wizard. To add fields to the database complete the following process.
Here is an example of a new customer panel that includes a customer identification number that is in existence for customers who already may none internet purchase. This allows the back office to bill them through the current billing process on one bill. First the field cust_id was added to the admin wizard. Now the information that is requested of the customer upon registration is included in the customer.pan below.
{define! when_shipping_address ifyes. &shipping_address then :#1}
{define: filltxt {when_allow_tables: </td><td align=center bgcolor="#FF90A0">}<font color="#000000" face="Arial"><blink><b>FILL</b></blink></font>}
<tame>
when_allow_tables::
<tame form><tame hidden: edit_customer y>
<center>
<table border={panel_border} width=95%>
<TH colspan=3>Billing Address
{when_panel:: EMAIL
<tame> when_known:: <TR><TD align=center>Email<TD>{&email}</tame>
<tame> when_not_known:: <TR><TD align=center>Email<TD>{required text: &email 40}{when_empty: {filltxt}}</tame>
}
<TR><TD align=center>Name<TD>{required text: &name 40}{when_empty: {filltxt}}
<TR><TD align=center>Company<TD>{text: &company 40}
<TR><TD align=center>Corporate Purchasing ID<TD>{text: &cust_id 10}
<TR><TD align=center>Address<TD>{required text: addr 40}{when_empty: {filltxt}}
<TR><TD align=center>. . .<TD>{text: addr2 40}
<TR><TD align=center>City<TD>{required text: city 40}{when_empty: {filltxt}}
<TR><TD align=center>State/Province<TD>{required text: state 40}{when_empty: {filltxt}}
<TR><TD align=center>Zip/Postal Code<TD>{required text: zip 40}{when_empty: {filltxt}}
<TR><TD align=center>Country<TD>{text: country 40}
<TR><TD align=center>Phone<TD>{text: phone 40}
<TR><TD align=center>Fax<TD>{text: fax 40}
<tame>
when_shipping_address::
<TR><TD><TR>
<TH colspan=2>Shipping Address (if different than billing address)
<TR><TD align=center>Name<TD>{text: s_name 40}
<TR><TD align=center>Company<TD>{text: s_company 40}
<TR><TD align=center>Address<TD>{text: s_addr 40}
<TR><TD align=center>. . .<TD>{text: s_addr2 40}
<TR><TD align=center>City<TD>{text: s_city 40}
<TR><TD align=center>State/Province<TD>{text: s_state 40}
<TR><TD align=center>Zip/Postal Code<TD>{text: s_zip 40}
<TR><TD align=center>Country<TD>{text: s_country 40}
</tame>
</table>
</center>
<tame /form>
</tame>
<tame>
when_not_allow_tables::
<tame form><tame hidden: edit_customer y>
<pre>
<center><b>Billing Address</b></center>
{when_panel:: EMAIL {sp. 10}Email {required text: &email 40}{when_empty: {filltxt}}}
Name {required text: &name 40}{when_empty: {filltxt}}
Company {text: company 40}
Corporate Purchasing ID {text: &cust_id 10}
Address {required text: addr 40}{when_empty: {filltxt}}
{text: addr2 40}
City {required text: city 40}{when_empty: {filltxt}}
State/Province {required text: state 40}{when_empty: {filltxt}}
Zip/Postal Code {required text: zip 40}{when_empty: {filltxt}}
Country {text: country 40}
Phone {text: phone 40}
Fax {text: fax 40}
<tame>
when_shipping_address::
<center><b>Shipping Address (if different than billing address)</b></center>
Name {text: s_name 40}
Company {text: s_company 40}
Address {text: s_addr 40}
{text: s_addr2 40}
City {text: s_city 40}
State/Province {text: s_state 40}
Zip/Postal Code {text: s_zip 40}
Country {text: s_country 40}
</tame>
</pre>
<tame /form>
</tame>
Now when you use the customer panel or when the system calls this panel automatically, the new version will be presented and the information will be saved to the customer database.
You can also customize the subject of the invoice through the admin wizard.
Your email subject will now be customized for your shop. In addition, you can customize the receipt by editing the receipt.pan.
created: 9/16/97 Katherine C. Davis