Customizing Templates
Each ecBuilder template is made up of several XSLT files, an INI file, and some supporting image files. These are the files you need to create and/or modify when designing your own template. For more information on using XSLT, refer to chapter 16 “Using XML and XSLT in ecBuilder” on page 149.
Note
The easiest way to create a template is to copy the existing template structure from the ecBuilder program folder and then edit the files. This folder is the "ecBuilder" subfolder stored under the Template folder where ecBuilder is installed. For purposes of the following procedural explanations, we will use this technique.
To create a new template
In Windows Explorer, browse to the Template\ecBuilder folder where ecBuilder is installed. Copy the ecBuilder folder and paste it into the Template folder. Change the name of the template folder to something suitable for the new template. Open the INI file and edit the header information: • Name - a description name for the template • Desc - a brief description of the template • Author - your name or company name • Class - the name of the class under which this template appears in the Site Design & Preview screen 5. Restart ecBuilder if you have the application open. The next time you open ecBuilder, the new template--and class if you specified a new one--appears in the drop-down list. 1. 2. 3. 4.
Note
The next step in customizing a template is to modify the XSL files. After you've finished the above procedure, follow the next steps.
To modify the new template
1. In Windows Explorer, browse to the location of your new template folder where ecBuilder is installed. Take note of the various XSLT files in the folder--you will edit these later in this procedure. 2. For each of the elements of the template you would like to customize, edit the corresponding XSLT file. Refer to the descriptions of the XSLT files below. 3. If you have ecBuilder open with the template selected, choose a different style or template and then do a preview. You must then select your original style or template to refresh the file list and pick up your changes. Alternately, you can restart ecBuilder to update the files with your changes.
To assign a template to a new class
1 2 Open the template's INI file and edit the class name in the header information. Restart ecBuilder if you have the application open. The next time you open ecBuilder, the new class appears in the drop-down list.
ecBuilder Template XSL File Descriptions
For the provided sample templates, ecBuilder uses these XSLT files to generate the Web site's HTML files. For example, Contact.xsl is used to generate Contact.htm. allcatalog.xsl - creates the entire catalog. This file uses the ecBuilder "split" tag to break the catalog into separate HTML files. allcatalognoorder.xsl - calls up the templates in allcatalog.xsl. This file is only used by the Basic Catalog Template. allcatalogorder.xsl - calls up the templates in allcatalog.xsl. This file is only used by the Express Checkout Template. allcontent.xsl - creates content from the Web Site Content wizard screen. The ecBuilder "split" tag is used to break the catalog content into separate HTML files. allitem.xsl - creates the catalog items. The ecBuilder "split" tag is used to break the catalog items into separate HTML files. This is an intermediate file created by createallitem.xsl.
Note
The "allcatalog", "allcontent", and "allitem" HTML files automatically deleted once the transformation to HTML is complete. These pages are not displayed as part of the Web site. The process is done through the use of the "I" (for "intermediate") flag in the INI file. For more information on these types of flags, refer to “ecBuilder Template Ini” on page 114 of the manual.
basket.xsl - creates the ecBuilder shopping basket. Although certain elements of this file should be modified with caution, you may easily change the layout of the shopping basket. For example, you may wish to modify the table or change the fonts and color schemes. basket_form.xsl - provides the shopping basket hidden fields for server. This file should not be modified. catalog_index.xsl - creates the index page for the first level of the catalog. Although certain elements of this file should be modified with caution, you may easily change the layout. For example, you may wish to rearrange the way items, descriptions, and images are displayed on the page. contact.xsl - reads and formats information entered in the Contact Profiles wizard screen. content.xsl - creates the index page for the content information pages. createallitem.xsl - associates the vertical (business type) to the catalog items. This file creates allitem.xsl, which will then be transformed into the item pages. This file should not be modified. delbask.xsl - used by the server to clear the shopping basket. This file should not be modified.
You can enable "E-mail to a Friend" for each catalog item. Use the Catalog screen to modify the catalog items to include this option.
emailerror.xsl - processes an error message when the "E-mail to a Friend" feature is enabled and the email action fails. Although some elements of this page should not be changed, you may modify elements such as the error message text. emailsuccess.xsl - processes an informational message when the "E-mail to a Friend" feature is enabled
and the e-mail message is successful. Although some elements of this page should not be changed, you may modify elements such as the message text. headerjavascript.xsl - used as a repository for all JavaScript in the entire Web site. Other XSL files that reference JavaScript call the code from this file. For example, the code in this file is used for the shopping basket, currency, and so on. This file should not be modified. home.xsl - reads and formats information entered in the Company Identity and Home Page Content wizard screens. Using the HTML feature in the wizard screen, you may customize the home page without modifying this file. policy.xsl - reads and formats information entered in the Policies and Statements wizard screen. Other than the layout, you would most likely not need to modify this file. shoppinginfo.xsl - contains order-related templates used by different pages. Although some elements of this page should not be changed, you may modify elements such as the error message text and the layout. link.xsl - reads and formats information entered in the Web Links wizard screen.
ecBuilder Template INI
The template INI is a file in the template folder that defines the properties of the template. Each section in the INI defines different areas of the template: Info, Copy, Colorswap, and Transform.
In the template folder, ecBuilder looks for a file with the INI extension; each template has an INI file, which is the specification for the XSLT processing.
At the start of site generation, ecBuilder copies all the selected skin files to the template folder for processing. This permits the template files to easily call the layouts defined in the skin files.
ecBuilder Template INI Description
Info Section
The "Info" section of the INI file stores the template and class names as well as some additional information such the version of the software. This information appears when you click the question mark button located beside the template name field in the Site Design & Preview screen and pertains to the selected template.
[Info]
Name=Basic Catalog Template
Author=Multiactive
Class=ecBuilder Templates
UserImagesFolder=usrimage
Version=1.0
Desc="This is the default template that ships with ecBuilder. This template creates all the pages as defined in the Site Structure section of ecBuilder. Each catalog item will generate its own Web page. This template is compatible with Skins created by the ecSkin Creator Wizard."
Copy Section
The "Copy" section of the INI file stores the location of where your images and other supporting files are copied to the output folder. • • In the example below, "FileSpec1" is used to copy the images from your "images" folder on your computer to the images output folder. "FileSpec2" and "FileSpec3" in the example below are used to copy the home page file (Index.htm) to file names that are compatible with certain other Web server software (i.e., "Index.html" and "Default.htm"). The "O" flag in these indicate that the input file "Index.htm" is located in the output folder. The copies of this file are put in the ouput folder. The numbering of the "FileSpec" items indicates the sequence of the operation. Each "FileSpec" matches with a "Destination" and optionally a "Flag".
• • [Copy]
FileSpec1=images\*.* Destination1=images FileSpec2=index.htm Destination2=index.html Flags2=O FileSpec3=index.htm Destination3=default.htm Flags3=O
ColorSwap Section
The "ColorSwap" section of the INI file changes the color schemes of your GIF files that are stored in the template and skin "images" folder depending on your color scheme selections in the Site Design & Preview screen. Specifically, ecBuilder modifies the first 16 colors in the GIF color palette. Because the colorswap process changes only the first 16 colors in the palette, you may wish to avoid setting any transparent backgrounds to any of these 16 colors. To disable the colorswap functionality in the template, leave this section blank. This process affects GIF files only. [ColorSwap] FileSpec1=myimages\*.gif Destination1=my images
Transform Section
The "Transform" section of the INI file controls how ecBuilder creates the output files from the XSL files. Each ecBuilder template INI uses flags that determine how an XSL file is generated. You can modify these flags for different results. For example, the "allcatalog", "allcontent", and "allitems" XSL files use the "S" flag ("split") in the template's INI. This tag creates separate pages for the final HTML pages. Removing or changing any of the flags in the "Transform" section of the INI--as shown in this sample--causes different results. • C - creates the file in the template folder. This can be used if you create an XSL file to be used as a step in the site generation. This flag allows you to create an intermediate XSL file; for example, createallitem.xsl is used to make allitem.xsl in the ecBuilder sample template. E - if the output file is empty, the file is deleted. H - creates HTML output files. The default output is XML. Note that all XSL files are flagged with the "H" flag in the standard ecBuilder INI file. I - the output XSL file is used as an intermediate file while the conversion to HTML is taking place. It is deleted after the transformation. O - the input file is read from the HTML output folder. S - the output file contains the ecBuilder "Split" markers and breaks the file into smaller HTML files. X - similar to the H flag, but is used to output XML rather than HTML.
• • • • • •
This example shows the use of the Transform section for one of the ecBuilder Standard templates. [Transform] XSLTFile1=home.xsl OutputFile1=index.htm Flags1=HE XSLTFile2=allCatalogNoOrder.xsl OutputFile2=allcatalog.htm Flags2=HSI XSLTFile3=contact.xsl OutputFile3=contact.htm Flags3=HE XSLTFile4=content.xsl OutputFile4=content.htm Flags4=HE XSLTFile5=allcontent.xsl OutputFile5=allcontent.htm Flags5=HSI XSLTFile6=catalog_index.xsl OutputFile6=catalog.htm Flags6=HE XSLTFile7=createallitem.xsl OutputFile7=allitem.xsl
Flags7=XCI XSLTFile8=allitem.xsl OutputFile8=items.htm Flags8=HS XSLTFile9=emailfriend.xsl OutputFile9=emailfriend.htm Flags9=HE XSLTFile10=policy.xsl OutputFile10=policy.htm Flags10=HE XSLTFile11=basket.xsl OutputFile11=basket.htm Flags11=HE XSLTFile12=link.xsl OutputFile12=link.htm Flags12=HE XSLTFile13=delbask.xsl OutputFile13=delbask.htm Flags13=HE XSLTFile14=emailsuccess.xsl OutputFile14=emailsuccess.htm Flags14=HE XSLTFile15=emailerror.xsl OutputFile15=emailerror.htm Flags15=HE XSLTFile16=emailpreview.xsl OutputFile16=emailpreview.htm Flags16=HE XSLTFile17=ApproxPrice.xsl OutputFile17=approxprice.htm Flags17=HE