Difference between revisions of "Page Templates:Creating Your First Template"

Revision as of 13:19, 1 October 2008

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 ...

Note: Only request the minimum number of functions, and fields within functions, necessary to support the template to ensure optimal performance

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\"/>
...";