This chapter is meant for users who have some basic knowledge of html and web publishing. New users who are familiar with computers may like to go through this chapter to gain an understanding on how our program creates the online store files. Once you are familiar with the process, it should be relatively easy to make changes to these templates to suit your needs.

Zilron StoreCreator uses the following to create your online store files:

1. Your store database *.zsd (the items, categories and images you entered)
2. Your chosen template specification file *.ini
3. Your template files *.html, *.js, *.cpp residing at the chosen template folder

Your store database *.zsd is located at \..\Zilron\ZilronStoreCreator\
Your template specification file *.ini is locate at \..\Zilron\ZilronStoreCreator\templates\
Your template files are located at \..\Zilron\ZilronStoreCreator\templates\selected_template\

Here are the steps:

1. Create a new template folder and place it under \..\templates\ e.g. c:\Zilron\ZilronStoreCreator\templates\my_new_template\
2. Create a template specification file (*.ini) and place it in the \..\templates folder e.g. c:\Zilron\ZilronStoreCreator\templates\my_new_template.ini
3. Create your template files and place them in \templates\my_new_template\ folder.
4. Create preview image. This step is optional.

You can use a text editor to edit all the *.ini and template html files. However, you must save them as text file with the same extension i.e. *.ini, *.html. Do not change the *.html to *.htm.

 

Understanding Zilron StoreCreator’s Templates

The template specification is a text file that tells Zilron StoreCreator the parameters to use when generating the online store files. It tells the program the path of the template files, the sources and outputs of various components of your online stores (index.html, cart.html, search.html, intro.html…).

The template files are the actual output formats that the program will use to generate the online html and JavaScript files. These template files are somewhat similar to the regular html and JavaScript files. However they are different in that they also contain our own template commands that are specially designed for our program use. The template html files do not necessarily have all the components of a complete html file. E.g. missing header section. But when combined with our template commands and other html files, they become complete html files. It is for these reasons that it is not advisable for you to use popular html editors like FrontPage 98 to edit these templates. You may if you wish use FrontPage 98 to tweak the html files after they have been generated by our program.

Note: You are responsible for any errors caused by changes you make to the generated html/JavaScript files.

Creating Your Template Specification (*.ini) File

You can use a text editor like Notepad to create the template specification file. You can also use Zilron StoreCreator to create one.

At the Store Editor screen:

• Click on the ‘Edit Template’ button.
• Click on the ‘Create’ button to create a new template specification file
• Click on the ‘Edit’ button to edit an existing template specification file
• Click on the ‘Exit’ button to exit the dialog

Select the ‘template1.ini’ and click on ‘Edit’

On the next screen, notice the template specification file template1.ini and all the template files for template1 are listed (note also these template files are located right under template1 folder).

• Edit – to edit the selected file
• View – to view the file using your default text editor
• New File – to create a new file for use with this template
• Delete – to remove the selected file (do not delete unless you are sure you don’t need the file)
• Insert/Copy File – to copy a file into this template folder
• View Template Command Document – to view the template commands in Word
• Editor Setup – to setup which text editor program to use to edit these files, default is Notepad
• Exit – to exit this dialog

Open template1.ini with Notepad and you should see the following:

[Template]
Version=3
Directory=template1\
Description=Ver 3.0 template -- This is test sample demo template -- for testing with template commands

[Preview]
###########################
# Preview for the template
# Set the image from Image1 to ImageN...
TotalImages=3
Image1=preview1.gif
Image2=preview2.gif
Image3=preview3.gif

[Index]
########################################
# Index file, the frame setup file index
# source is the file that in the template
# directory and output is the output filename
# for the source
Source=index.html
Output=index.html

[Cart]
###################
# Shopping cart frame
Source=cart.html
Output=cart.html

[Intro]
################
# Intro Frame, where your client will first see when they visit your store
Source=frame1.html
Output=intro.html

[Search]
################
# Search html -- where your client enter search key word
Source=search.html
Output=search.html

[Info]
#########
# Company information
# it is the Order Info
Source=info.html
Output=info.html

[Category]
###############
# Your catalogs page will be generated according to
# the template command in category.html
Source=category.html
# use it for version 2.0 of template only
DisplayType=0

[Item]
##############
# Your item page will be generated according to
# the template command in item.html
Source=item.html
DisplayType=1
#maximum item per page
MaxItems=10
AllItemsOutput=allitems.html

[AdditionalPage]
###########################################
#additional template page for processing...
TotalPage=1
# uncomment to add more page for template script processing
Page1=SpecialItem.html
#Page2=
#Page3=
#Page4=
#Page5=

[JavaScript]
################################################
# Please edit this if you have different version of JavaScript
StoreCreator=StoreCreator.cpp
Search=Search.cpp

# in this specification file comments out the line. Source means the html file name in the template files folder. Output means new name of the generated html in the upload folder.

Your template *.ini file should contain the required parameters:

[Template] - Version 3, Directory (path to your template files folder), Description (your description)
[Preview] - specify how many preview images are available, preview1.gif, preview2.gif… are just screenshots of the stores with different templates. You create this screenshots yourself.
[Index] - specify the name of the index.html at Source (in the template folder) and the name when it is generated in the \..\upload\store_id\ folder. Always leave this section unchanged.
[Cart] - html file for your shopping cart frame
[Intro] - Introduction html file
[Search] - Search html file
[Info] - Company info and ordering info
[Category] - html file to indicate how your categories are displayed
[Item] - html file to indicate how your items are displayed
[AdditionalPage] - this is optional, specify how many other html files you wish the program to process and specify the names of the html files - this is great for displaying the Special items, New items, Updated Items.
[JavaScript] -specify which JavaScript files to use - plan for foreign languages

Creating Your Basic HTML Files for Your New Template

From the template specification file, you notice these are the basic html files required by the program:
index.html, cart.html, intro.html, search.html, info.html, category.html and item.html. We suggest you do not change these file names until you are familiar with our template commands.

To create your own template html files, we suggest you copy one of our 6 template html files to your own template folder and then modify them to suite your store design. You may add/modify the images.

Understanding the Template Commands

Please study the actual html files we created in template1 to template6. You will notice it contains not only the usual html tags but also our own template commands which has '#' in front of the command and each must be on a line by itself. A section of the template1 frame1.html is show below:

#CopyFile oinfo.gif oinfo.gif
#CopyFile shopcart.gif shopcart.gif
<html>
<head>
<title>
#InsertTitle
</title>
</head>
<BODY Text='
#PrintHTMLText
' BGCOLOR='
#PrintHTMLBGColor
' LINK='
#PrintHTMLLink
' VLINK='
#PrintHTMLVLink
' ALINK='
#PrintHTMLALink
'
#SaveReturnPath
>
<center>
<img src='
#InsertLogoFileName
…

The first line #Copy is copying the image file from the template1 folder to the upload folder.

The #InsertTitle command is inserting the 'store name' as the title of the html file.

Notice each of the template commands begins with'#' and is on a line by itself.

You may have to place the beginning and closing symbols of the html tag (e.g. ', <, >) on a separate line.

Complete listings of the template commands are available by selecting:

• 'Edit Template'
• Select any template
• 'View Template Command Document'