Difference between revisions of "Page Templates:Creating Your First Template"
| Line 3: | Line 3: | ||
Start by pasting the full code of the home page into your HTML editor of choice. | Start by pasting the full code of the home page into your HTML editor of choice. | ||
| − | Escape quotes | + | ;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 (\") | 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 | + | ;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. | + | 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! |
| − | Echo the whole thing | + | ;Place PHP tags and Echo the whole thing |
| − | Place an "echo" statement at the top and close the echo statement at the end: | + | 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: |
<source lang="php"> | <source lang="php"> | ||
// start echo | // start echo | ||
| + | <?php | ||
echo " | echo " | ||
... all html here ... | ... all html here ... | ||
"; | "; | ||
// end echo with "; | // end echo with "; | ||
| + | ?> | ||
| + | </source> | ||
| + | |||
| + | ;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. | ||
| + | |||
| + | ;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: | ||
| + | |||
| + | <source lang="php"> | ||
| + | /* 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 | ||
| + | |||
| + | </source> | ||
| + | |||
| + | 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: | ||
| + | |||
| + | <source lang="php"> | ||
| + | echo "... | ||
| + | <title>$metaTitle</title> | ||
| + | <meta name=\"description\" content=\"$metaDescription\"/> | ||
| + | <meta name=\"keywords\" content=\"$metaKeywords\"/> | ||
| + | ..."; | ||
</source> | </source> | ||
Revision as of 12:53, 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.
- 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\"/> ...";
