4.5. Region Templates
Interchange region templates (or "regions") are portions of HTML and ITL that are included in pages within a catalog. Using regions, along with the cascading style sheet defined in theme.cfg, allows you to control the look and feel of specific parts of each catalog page.
The default Foundation region set, found in CATROOT/templates/foundation/regions, includes the following:
LEFTONLY_TOP
LEFTONLY_BOTTOM
LEFTRIGHT_TOP
LEFTRIGHT_BOTTOM
NOLEFT_TOP
NOLEFT_BOTTOM
The Foundation demo uses the Variable feature extensively to simplify hand page editing. Basically, a Variable is a define that permits the substitution of text for a simple __VARIABLE__ string in a page. For example, in the test page above, the variables LEFTONLY_TOP and LEFTONLY_BOTTOM correspond to region templates that provide a logobar, menubar, leftside menu, and copyright footer. Content, consisting of HTML and ITL, is placed within the BEGIN and END CONTENT comments. The following illustration shows how this looks on the page:
+--------------------------------------------------------+ | LOGOBAR | |--------------------------------------------------------+ | MENUBAR | |--------------+-----------------------------------------+ | | | | | | | | | | LEFTSIDE | This is your content | | | | | | | | | | | +-----------------------------------------| | | COPYRIGHT | +--------------------------------------------------------+
In this diagram, LEFTONLY_TOP contributes the LEFTSIDE, LOGOBAR, and MENUBAR sections, while LEFTONLY_BOTTOM contributes the COPYRIGHT section.
The following subsections provide an inventory of where each of the region templates, included with the Foundation demo, are used in the pages and template definition files that make up the catalog.
4.5.1. LEFTONLY_TOP
The LEFTONLY_TOP template region is used in the following template pages:
pages/aboutus.html
pages/account.html
pages/affiliate/index.html
pages/affiliate/login.html
pages/canceled.html
pages/contact.html
pages/customerservice.html
pages/flypage.html
pages/help.html
pages/login.html
pages/logout.html
pages/modular_modify.html
pages/new_account.html
pages/ord/basket.html
pages/privacypolicy.html
pages/process_return.html
pages/quantity.html
pages/query/check_orders.html
pages/query/order_detail.html
pages/query/order_return.html
pages/returns.html
pages/saved_carts.html
pages/ship_addresses.html
pages/ship_addresses_added.html
pages/ship_addresses_removed.html
pages/stock-alert-added.html
pages/stock-alert.html
The LEFTONLY_TOP template region is used in the following templates:
templates/foundation/cart
templates/foundation/leftonly
templates/foundation/simple
4.5.1.1. Region Template Walkthrough -- LEFTONLY_TOP
1 <!-- BEGIN LEFTONLY_TOP -->
2 [if scratch members_only]
3 [set members_only][/set]
4 [if !session logged_in]
5 [set mv_successpage]@@MV_PAGE@@[/set]
6 [bounce page=login]
7 [/if]
8 [/if]
9
10 <html>
11 <head>
12 <title>[scratch page_title]</title>
13 __THEME_CSS__
14 </head>
15
16 <body marginheight="0" marginwidth="0">
17
18 <!--- top left and right logo --->
19 <table width="100%" border="0" cellspacing="0" cellpadding="0">
20 <tr>
21 <td align="left" valign="middle" class="maincontent">
22 <img src="__THEME_IMG_DIR____LOGO__">
23 </td>
24 <td align="right" valign="middle" class="maincontent">
25 <img width="174" height="60" src="__THEME_IMG_DIR__logo2.gif">
26 </td>
27 </tr>
28 </table>
29
30 <!--- menu bar along the top --->
31 <table width="100%" border="0" cellspacing="0" cellpadding="0">
32 <tr>
33 <td width="100%" class="menubar">
34 <a href="[area index]"> \
<img name="Home" border="0" src="__THEME_IMG_DIR__home.gif"></a>
35 <img src="__THEME_IMG_DIR__sep.gif">
36 <a href="[area login]">
37 [if session logged_in]
38 <img alt="Log Out" border="0" src="__THEME_IMG_DIR__logout.gif"></a>
39 [else]
40 <img alt="Log In" border="0" src="__THEME_IMG_DIR__login.gif"></a>
41 [/else]
42 [/if]
43 <img src="__THEME_IMG_DIR__sep.gif">
44 <a href="[area ord/basket]">
<img alt="Your Cart" border="0" src="__THEME_IMG_DIR__cart.gif"></a>
45 <img src="__THEME_IMG_DIR__sep.gif">
46 <a href="[area ord/checkout]"> \
<img alt="Check Out" border="0" src="__THEME_IMG_DIR__checkout.gif">\
</a>
47 <img src="__THEME_IMG_DIR__sep.gif">
48 <a href="[area customerservice]">
<img alt="Customer Service" border="0"
src="__THEME_IMG_DIR__service.gif"></a>
49 <img src="__THEME_IMG_DIR__sep.gif">
50 <a href="[area aboutus]">
<img alt="About Us" border="0"
src="__THEME_IMG_DIR__about.gif"></a>
51 </td>
52 </tr>
53 </table>
54
55 <!--- left category column, main content column, and right special column --->
56 <table width="100%" border="0" cellspacing="0" cellpadding="0">
57 <tr>
58 <td width="20%" valign="top" align="left" class="categorybar">
59 <!--Left Sidebar-->
60 <table width="100%" border="0" cellspacing="0" cellpadding="0">
61 [include file="templates/components/[control component none]"][control]
62 [include file="templates/components/[control component none]"][control]
63 [include file="templates/components/[control component none]"][control]
64 </table>
65 </td>
66 <td width="80%" valign="top" align="center" class="maincontent">
67 [include file="templates/components/[control component none]"][control]
68
4.5.2. LEFTONLY_BOTTOM
The LEFTONLY_BOTTOM template region is used in the following template pages:
pages/aboutus.html
pages/account.html
pages/affiliate/index.html
pages/affiliate/login.html
pages/canceled.html
pages/contact.html
pages/customerservice.html
pages/flypage.html
pages/help.html
pages/login.html
pages/logout.html
pages/modular_modify.html
pages/new_account.html
pages/ord/basket.html
pages/privacypolicy.html
pages/process_return.html
pages/quantity.html
pages/query/check_orders.html
pages/query/order_detail.html
pages/query/order_return.html
pages/returns.html
pages/saved_carts.html
pages/ship_addresses.html
pages/ship_addresses_added.html
pages/ship_addresses_removed.html
pages/stock-alert-added.html
pages/stock-alert.html
The LEFTONLY_BOTTOM template region is used in the following templates:
templates/foundation/cart
templates/foundation/leftonly
templates/foundation/simple
4.5.3. LEFTRIGHT_TOP
The LEFTRIGHT_TOP template region is used in the following template pages:
pages/browse.html
pages/index.html
pages/results.html
pages/results_big.html
pages/swap_results.html
The LEFTRIGHT_TOP template region is used in the following templates:
templates/foundation/leftright
4.5.4. LEFTRIGHT_BOTTOM
The LEFTRIGHT_BOTTOM template region is used in the following template pages:
pages/browse.html
pages/index.html
pages/results.html
pages/results_big.html
pages/swap_results.html
The LEFTRIGHT_BOTTOM template region is used in the following templates:
templates/foundation/leftright
4.5.5. NOLEFT_BOTTOM
The NOLEFT_BOTTOM template region is used in the following template pages:
pages/ord/checkout.html
pages/splash.html
The NOLEFT_BOTTOM template region is used in the following templates:
templates/foundation/fullwidth
4.5.6. NOLEFT_TOP
The NOLEFT_TOP template region is used in the following template pages:
pages/ord/checkout.html
pages/splash.html
The NOLEFT_TOP template region is used in the following templates:
templates/foundation/fullwidth