Page Templates:Creating Your First Template

Page Template Managers Page Templates First Look First Page Template Template Examples Core Variables Custom Fields Functions

This section assumes you have a completed html/css page that will be used to build this template.

Start by pasting the full code of the home page into your HTML editor of choice.

Escape quotes

As the template code is in PHP and all this content will have to be 'echo'd' be sure to escape all quotes so the echo statements do not fail. Search and Replace double quote (") with escaped double quote (\")

Replace image / file paths

Chances are the html was built referencing file and image paths that are not the same as the file structure set up on the ecommerce platform website. Search all file paths and replace with the path to the file on the new server. For example if the originating html uses "images/x/filename.jpg" and the images are located on the ecommerce platform website in "/files/imageshere/" you may want to search "images/" with "/files/imageshere". Don't forget to repath any javascript source and css files (I recommend creating css and js folders under the file folder designated for the site). Double check your files and images are uploaded to the correct folders on the ecommerce platform website. Note: if file paths are used in the CSS and JS files, they will need to be modified as well!

Place PHP tags and Echo the whole thing

Place an "echo" statement at the top and close the echo statement at the end. Note the beginning and ending PHP tags will NOT be copied into the template code - I only place them in my editor so that it activates the color coding for the PHP code:

// start echo
<?php
echo "
... all html here ...
";
// end echo with ";
?>

Get your data

The Core Page Data is automatically available to you, but all additional content will need to be requested via the appropriate calling functions. The ecommerce engine provides a series of functions that return content in strings and arrays that can be used to control the html output. Initialize these functions at the beginning of your template. Example:

// start of template
 
// information to populate menu bars
$arrMenu = eV::pageMenuGet() ;
// children for this page. Note $pageId is a core variable available in the template
$arrChildren = eV::pageChildrenGet($pageId,"title,summary,summaryImage,link")
// get banner zones for this page
$zoneA = eV::pageZoneGet(1,$pageId);
$zoneB = eV::pageZoneGet(2,$pageId);
$zoneC = eV::pageZoneGet(3,$pageId);
// get data to populate breadcrumbs
$arrBC = eV::pageBreadcrumbsFamilyGet($pageId;
// get recently viewed items
$arrRV = eV::recentlyViewedGet("title,summaryImage,link");
 
// ... rest of template code ...

Only request the minimum number of functions, and fields within functions, necessary to support the template to ensure optimal performance. Many functions are dependent on the existence of other objects in order to write the function. For instance, the eC::pageZoneGet() function requires the entry of a zoneId - the zone needs to be created in banner management before the ID exists, therefore you may need to create the banner zones before you can write the functions in your template code.

Setup the 'message' output

The ecommerce platform passes messages from page to page, action to page with the URL variable "message". The message is used to inform the visitor of actions that have occured (examples: "New coupon as been added to your cart", "invalid login - please try again", "You have been logged out", etc, etc). Many of these messages can by customized in the settings are of the administration console. You may also specify your own 'messages' when creating URLs in your code (example: href="index.php?pageId=123&message=You are in a very special page"). This message can be accessed in the page template code by the core variable "$message". It is recommended that on EVERY template you display this message prominently when passed. Example:

// ... code before message
 
if(!empty($message)) echo "<p><font color=\"red\">$message</font></p>";
 
// code after message ...

Mark template include divisions

Chances are, much of the code in this html will be reused in other templates. Most of the time a header and footer include can be identified, separated and later used as includes for other templates. The header usually includes all code from the beginning up until the center content that will vary from page to page, the footer begins immediately after the varying center content and continues to the end of the code. Often the header and footer are split into additional templates (header-top, header-left, footer-right, footer-bottom) in order to easily adapt to templates that may or may not use the left nav bar or right column contents.

Identify where these template includes began and end, end/begin echo statements at these points and mark them with comments denoting as such.

Note that sometimes the includes may by 'mostly' identical from template to template with some slight variations. Use variables to control these variations and pass values to the template include. For instance if the css file governing the page style is different for each template, substitute a variable for the css file path and set the variable in the template calling the include:

/* old code */
 
// start header-top include
echo "...<link href=\"/path/to/cssfile.css\" rel=\"stylesheet\" type=\"text/css\" media=\"screen\" />...";
// end header-top include
 
/* new code using variable */
 
// set path in template calling the include
$css= "/path/to/cssfile.css";
// change code in tag in include
// start header-top include
echo "...<link href=\"/$css\" rel=\"stylesheet\" type=\"text/css\" media=\"screen\" />...";
// end header-top include

This method is often used for banner ad zones, tag classes/ids that will vary from template to template but be part of a common include.

Place variables in meta tags

Place the $metaTitle, $metaKeywords, $metaDescription in the meta tags so they will auto populate with page data:

echo "...
<title>$metaTitle</title>
<meta name=\"description\" content=\"$metaDescription\"/>
<meta name=\"keywords\" content=\"$metaKeywords\"/>
...";

Setup the menus

• Make sure you are calling the pageMenuGet function in the beginning of your code.
• Identify which menus you will need (top, left, bottom, right). Any of the four menu areas can be placed anywhere on the template, the names are simply for easy reference - so if a template actually has two top menus (tabs and then and action bar) but no right menu, use the right menu as the 2nd top menu.
• Create a menu in administration via menu manager, so you have some data to test. Set the menu as the default. If any of your menus are tiered, be sure to set up those menu bars with tiered content for an adequate test subject.
• Build your menus into the code. Refer to pageMenuGet for usage and examples.

Setup the banner zones

• Create the zones you will need for this page in Banner Management. Fill them with sample campaigns/banners so they will display when we test.
• Make sure you are calling the pageZoneGet function once for each banner zone you will place on the page.
• Identify the locations of the banner zones and place the variables you assigned to the pageZoneGet functions at those locations.

Setup Perpetual Cart

Only perform this task if this page will display a perpetual cart

• Be sure you are calling the orderGetSummary function to retrieve the summarized cart data.
• Use the dollarFormat function to convert decimal currency values to formatted dollar amounts.

Setup Cart and Checkout Links

The following links are available to jump to stages in the checkout process:

• Shopping Cart: index.php?fa=ORDER.cartView
• Checkout Registration Page: index.php?fa=ORDER.register
• Checkout Shipping Address Page: index.php?fa=ORDER.checkoutShipping
• Checkout Billing Address Page: index.php?fa=ORDER.checkoutBilling
• Checking Payment Entry Page: index.php?fa=ORDER.checkoutPayment
• Checkout Confirmation Page: index.php?fa=ORDER.checkoutConfirmation

Typically the links to the shopping cart and checkout registration page (checkout link) are used in the perpetual cart. Note that these will link to empty pages until the checkout process templates are created, pages are created with the checkout process templates assigned to them AND the pageIds are entered into settings: eCommerce area for each of these pages.

Setup any Custom Search Group fields

Custom search groups are used to control select drop downs that jump to specific pages when options are selected. You must first create the group via Custom Search Groups in the administration console, than you can output the select field in a page template. Using Custom Search Groups gives content managers the ability to modify the contents of the drop down, and the target locations, using the administration console.

• Identify candidates for custom search groups
• Create groups in Custom Search Groups for each candidate (enter some temporary options for testing if you do not have real options available). Mark down the group IDs as each Custom Search Group is created, you will need for the next step.
• Create the select fields in administration by first calling the pageCustomSearchGroup function at the beginning of your template code, then coding the select field at the point in the template the field is to appear (see examples in the pageCustomSearchGroup function for options on how to utilize and output the select field)

Setup Page Specific Content

Page specific content is all content that will be controlled by page management that is specific to this page. Since menu bars, perpetual carts, banner zones and other items listed before this section are shared by multiple pages, they do not fall into this category. Typically the center page content qualifies for this category. This can be populated with utilizing the Content fields in the Core Variables. Any areas of control that cannot use core variables can be controlled by creating Custom Fields.

• Identify your core variable controlled content and place the core variables into the code.
• Identify your custom field controlled content, create the custom fields and place the custom field variables into the code.

Setup Children

Skip this area if this page template is not to display children (as controlled by relationships in Page Management)

• Place your call to the pageChildrenGet function at the beginning of your page template code
• Output the children data in the appropriate location(s) in the template code. See the pageChildrenGet function for examples.

Setup breacrumbs

Skip this area if the template does not display breadcrumbs. There are two methods of acquiring breadcrumbs:

• Use pageBreadcrumbsFamilyGet to build breadcrumbs by moving up through the relationships family tree
• Use pageBreadcrumbsHistoryGet to build breadcrumbs based on the page visit history

Post Page Templates

• Extract template includes and post each as an individual template
• Place template include code into remaining page template code ($component#Template)