.
. You will be transferred to the Main Template screen.
.The Main Template determines the layout and content that appears on your webpages. For example, you can add different sections to your pages like the header, menu, search form, footer, etc. In other words, the Main Template is the "outside" sections of a web page.
The Main Template ingredients include HTML, CSS, a smidgen of JavaScript and a dash of SearchFit Keywords. For the purposes of these instructions, we will assume that you have a strong knowledge of HTML, CSS and creating website templates.
SearchFit Keywords allow you to show unique content per page within your Main Template. For example, you may add keywords to your Main Template to add the page content and head tag content. SearchFit Keywords also allow you to add code to your template, like your menu code, that is automatically updated.
We recommend Using these 3 steps to create your Main Template:
The rest of the instructions will be guide you through the above 3 steps. If you are adventurous, feel free to skip straight to step 2, or just download the example main template files and modify them on your own.
View an Example Website written in standard HTML with no special SearchFit markup
Download a zip file of files used in Sample Website including HTML, CSS & images.
Tip: Before you start building your website template, take a look at the sample website. If you use the same class names for your website menu (as shown in the example) and follow the below instructions about directory structure and files, you will be off to a blazing start!
Create the following directory structure and files on your computer:
root/main_template.html
root/images_templ/image.gif [and the rest of your images]
root/styles_website/style4product.css
By using the above directory structure you will be able to smoothly perform step 2 of this guide: "Convert Your Website Template into a SearchFit Main Template".
What are you waiting for? Go now and build your Website Template! Come back with a working Website Template (including the files and folders listed above) and we'll show you how to convert it into your SearchFit Main Template.
View a Example SearchFit Main Template in action.
Download a zip file of files used in Main Template including HTML, CSS & images.
This Keyword automatically adds all the necessary elements that belong between your HTML <head> tags on a per-page basis including: Page Title, Meta tags, CSS links, JavaScript links and more.
How Do I Use The AUTO_GENERATED_HEADER Keyword? - Replace the existing <head> tag content with AUTO_GENERATED_HEADER.
Example of Code from Standard Template:
<head>
<TITLE>Main Template</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="STYLESHEET" type="text/css" href="styles_website/style4product.css">
</head>
Standard Code Modified for SearchFit Template:
<head>AUTO_GENERATED_HEADER</head>
This Keyword automatically populates the content area of your website on a per-page basis.
How Do I Use The AUTO_GENERATED_CONTENT Keyword? - The AUTO_GENERATED_CONTENT keyword should be inserted within the HTML tag that contains the template's content area.
Example of Code from Standard Template:
<div id="content_wrapper"> <h1>Filler Text</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adi... </div>
Standard Code Modified for SearchFit Template:
<div id="content_wrapper">AUTO_GENERATED_CONTENT</div>
There is no Keyword that automatically inserts the member login form. You should create your own form, then modify it to work with the SearchFit Main Template. There are hidden inputs that must be included within the <form> tag plus specific attribute values that must be used for the <form> and <input> tags.
How Do I Create a Member Login Form? - See the "Standard Code Modified for SearchFit Template" below as an example. Your form should include all the same tags, attributes and attribute values as the example (except for the size, value and onfocus attributes, which you may modify or omit as desired) .
Example of Code from Standard Template:
<p>Member Login: <span id="smalltext">(<a href="#">click here</a> to register)</span></p> <form>
<input type="text" class="username" name="_member_username" value="User Name" size="15" onfocus="_member_username.value = ''">
<input type="password" class="password" name="_member_password" value="Password" size="15" onfocus="_member_password.value = ''">
<input type="image" src="images_templ/go_button_w_bg.gif" value="Login">
</form>
Standard Code Modified for SearchFit Template:
<p>Member Login: <span id="smalltext">(<a href="tool_scart.php?action=member_loginregister&doit=member_login">click here</a> to register)</span></p> <form name="form_member_login" action="tool_scart.php" method="post">
<input type="hidden" name="action" value="member_loginregister">
<input type="hidden" name="doit" value="member_login">
<input type="text" class="username" name="_member_username" value="User Name" size="15" onfocus="_member_username.value = ''">
<input type="password" class="password" name="_member_password" value="Password" size="15" onfocus="_member_password.value = ''">
<input type="image" src="images_templ/go_button_w_bg.gif" name="submitit" value="Login">
</form>
A SearchFit Persistent Cart Display appears on your Main Template and displays the total cost and number of products added to the cart. The customer can see a live running total as he adds and removes items from the cart. The Checkout Link is usually located near the Persistent Cart Display, so I am showing you both in the below code examples.
How Do I Implement The Persistent Cart Display? - First, create your own design and code that displays one or more of these items: Items in Cart, Order Value and Checkout Link. Next, modify your code as shown in the example "Standard Code Modified for SearchFit Template". Note that the Persistent Cart is added using Javascript, while the Checkout Link is not.
Example of Code from Standard Template:
<strong>Items in Cart:</strong> <span class='cart_color'> 999 </span> | $999,999</span> | <a href="#">CheckOut</a>
Standard Code Modified for SearchFit Template:
<script language="JavaScript" type="text/javascript" src="tool_dynamic.php?action=get_cart_info"></script>
<script language="JavaScript" type="text/javascript">
if (typeof scart_order_qty_str != 'undefined') {
document.write("<strong>Items in Cart:</strong> <span class='cart_color'>" + scart_order_qty_str + "</span> | $" + scart_order_subtotal_str + "</span>");}</script> | <a href="tool_view_scart.php">CheckOut</a>
There is no Keyword that automatically inserts the Product Search form. You should create your own form, then modify it to work with the SearchFit Main Template. There are hidden inputs that must be included within the <form> tag plus specific attribute values that must be used for the <form> and <input> tags.
How Do I Create a Product Search Form? - See the "Standard Code Modified for SearchFit Template" below as an example. Your form should include all the same tags, attributes and attribute values as the example (except for the size, value and onfocus attributes, which you may modify or omit as desired). A variety of different Product Search Forms can be used including Search By Product Number, Price Range, Alphabet and more. See the Main Template Screen help documentation for details.
Example of Code from Standard Template:
<form class="top_search">
<input class="search_field" type="text" value="Enter Search Term" name="searchby_keywords" size="23" onfocus="searchby_keywords.value = ''">
<select name="searchby_category">
<option>[All Categories]</option>
<option>Televisions</option>
<option> - Flat Panel</option>
<option> - Projection</option>
<option> - Tube</option>
<option>Accessories</option>
<option> - HDMI Cables</option>
<option> - Mounts & Brakes</option>
<option> - Advanced Remotes</option>
<option>Gifts</option>
<option> - Gift Certificates</option>
<option>Demo</option>
<option> - Detailed Product Display Examples</option>
</select>
<input type="image" src="images_templ/go_button.gif" class="search_go" align="middle">
</form>
Standard Code Modified for SearchFit Template:
<form class="top_search" action="tool_dynamic.php" method="post">
<input type="hidden" name="action" value="search">
<input type="hidden" name="searchby1" value="keywords">
<input type="hidden" name="searchby2" value="category">
<input class="search_field" type="text" name="searchby_keywords" value="Enter Search Term" size="23" onfocus="searchby_keywords.value = ''">
<select name="searchby_category">
AUTO_GENERATED_OPTIONS_CATEGORIES
</select>
<input type="image" src="images_templ/go_button.gif" class="search_go" name="submitit" value="Search" align="middle">
</form>
The Newsletter Signup Form allows your visitors to submit their email address, which will be stored on the Mailing List screen of your SearchFit Control Panel. You have the ability to export a list of your Newsletter Subscribers, or email them from directly using the SearchFit Control Panel. There is no Keyword that automatically inserts the Newsletter Signup form. You should create your own Newsletter Signup form, then modify it to work with the SearchFit Main Template. There are hidden inputs that must be included within the <form> tag plus specific attribute values that must be used for the <form> and <input> tags.
How Do I Create a Newsletter Signup Form? - See the "Standard Code Modified for SearchFit Template" below as an example. Your form should include all the same tags, attributes and attribute values as the example (except for the size, value and onfocus attributes, which you may modify or omit as desired).
Example of Code from Standard Template:
<form>
<input class="email" type="text" value="Enter E-Mail" size="20" onfocus="form_email.value = ''">
<input class="news_submit" type="image" src="images_templ/go_button.gif" value="Go">
</form>
Standard Code Modified for SearchFit Template:
<form action="tool_dynamic.php" method="post" name="form_subscribe">
<input type="hidden" name="action" value="subscribe">
<input type="hidden" name="url_return" value="tool_subscribe.php">
<input class="email" type="text" name="form_email" value="Enter E-Mail" size="20" onfocus="form_email.value = ''">
<input class="news_submit" type="image" src="images_templ/go_button.gif" name="submit" value="Go">
</form>
Your SearchFit Website Menu automatically contains links to all of your Category Types, Categories and Sub Categories. Your Website Menu changes on a per-page basis:
To add your Website Menu to your SearchFit Main Template, replace your existing menu code with the keyword AUTO_GENERATED_MENU_MAIN. In the next section of this page, you will learn about the Website Menu Template, which controls the layout of your Website Menu. The menu is highly customizable and may be constructed in a many different ways. See the Website Menu Screen help documentation for more information.
Example of Website Menu Code from Standard Template:
<ul id="menu_categorytypes">
<li class="class_menuitem_categorytype"><a class="menuitem_categorytype_link" href="#" title="Televisions">Televisions</a>
<ul class="class_menu_categorytype">
<li class="class_menuitem_category"><a class="menuitem_category_link" href="#" title="Flat Panel">Flat Panel</a></li>
<li class="class_menuitem_category"><a class="menuitem_category_link" href="#" title="Projection">Projection</a></li>
<li class="class_menuitem_category"><a class="menuitem_category_link" href="#" title="Tube">Tube</a></li>
</ul>
...continues with the rest of the links...
</ul>
Standard Code Modified for SearchFit Template:
AUTO_GENERATED_MENU_MAIN
The Website Menu Template controls the layout of your Website Menu, which contains links to your Category Types, Categories and Sub Categories. The below Website Menu Template Code will generate a Website Menu matching the above example Example [Website Menu] Code from Standard Template. The Website Menu Template is not stored within the Main Template, but it is assigned to the Main Template. See part 3 of these instructions for assignment details. Save your Weblinks Menu Template to your hard drive and name it website_menu_template.html. See the Website Menu Template Screen help documentation for more details.
Website Menu Template Code:
<menu-categorytypes>
<ul id="menu_categorytypes">
<foreach-categorytype>
<li class="class_menuitem_categorytypeAUTO_GENERATED_CATEGORYTYPE_ISSELECTED_SUFFIX">
AUTO_GENERATED_CATEGORYTYPE_LINK
<menu-categories show-when="always">
<ul class="class_menu_categorytypeAUTO_GENERATED_CATEGORYTYPE_ISSELECTED_SUFFIX">
<foreach-category>
<li class="class_menuitem_categoryAUTO_GENERATED_CATEGORY_ISSELECTED_SUFFIX">
AUTO_GENERATED_CATEGORY_LINK
<menu-subcategories show-when="parent_is_selected">
<ul class="class_menu_categoryAUTO_GENERATED_CATEGORY_ISSELECTED_SUFFIX">
<foreach-subcategory>
<li class="class_menuitem_subcategoryAUTO_GENERATED_SUBCATEGORY_ISSELECTED_SUFFIX">
AUTO_GENERATED_SUBCATEGORY_LINK
</li>
</foreach-subcategory>
</ul>
</menu-subcategories>
</li>
</foreach-category>
</ul>
</menu-categories>
</li>
</foreach-categorytype>
</ul>
</menu-categorytypes>
Your SearchFit Weblinks Menu automatically contains links to all of your Custom Pages and Custom Menus. Custom Pages are pages from your website like "Home" and "Contact Us" that don't fit into your Product Structure. Custom Menus are website pages themselves PLUS they contain Custom Pages. For example, you could have a Custom Menu named "Articles" that lists links to each of your articles AND contains one Custom Page for each of your articles. It is not required to use Custom Menus (the example template does not). For more information see the help documentation for the Custom Menus and Custom Pages screens.
Your Weblinks Menu changes on a per-page basis:
To add your Weblinks Menu to your SearchFit Main Template, replace your existing menu code with the keyword AUTO_GENERATED_MENU_LINKS. In the next section of this page, you will learn about the Weblinks Menu Template , which controls the layout of your Weblinks Menu. The menu is highly customizable and may be constructed in a many different ways. See the Weblinks Menu Screen help documentation for more information.
Example of Weblinks Menu Code from Standard Template:
<ul id="menu_mainitems">
<li class="class_menuitem_mainitem"><a class="menuitem_mainitem_link" href="#" title="Contact Us"> Contact Us </a></li>
<li class="class_menuitem_mainitem"><a class="menuitem_mainitem_link" href="#" title="Home">Home</a></li>
<li class="class_menuitem_mainitem"><a class="menuitem_mainitem_link" href="#" title="Privacy Policy">Privacy Policy</a></li>
<li class="class_menuitem_mainitem"><a class="menuitem_mainitem_link" href="#" title="Promotions">Promotions</a></li>
<li class="class_menuitem_mainitem"><a class="menuitem_mainitem_link" href="#" title="Sitemap">Sitemap</a></li>
</ul>
Standard Code Modified for SearchFit Template:
AUTO_GENERATED_MENU_LINKS
The Weblinks Menu Template controls the layout of your Weblinks Menu, which contains links to your Custom Menus and Custom Pages. The below Weblinks Menu Template Code will generate a Weblinks Menu matching the above Example Weblinks Menu Code from Standard Template. The Weblinks Menu Template is not stored within the Main Template, but it is assigned to the Main Template. Save your Weblinks Menu Template to your hard drive and name it weblinks_menu_template.html. See part 3 of these instructions for assignment details. See the Weblinks Menu Template Screen help documentation for more details.
Example Website Menu Template Code:
<menu-mainitems>
<ul id="menu_mainitems">
<foreach-mainitem>
<li class="class_menuitem_mainitemAUTO_GENERATED_MAINITEM_ISSELECTED_SUFFIX">
AUTO_GENERATED_MAINITEM_LINK
<menu-subitems show-when="parent_is_selected">
<ul class="class_menu_mainitemAUTO_GENERATED_MAINITEM_ISSELECTED_SUFFIX">
<foreach-subitem>
<li class="class_menuitem_subitemAUTO_GENERATED_SUBITEM_ISSELECTED_SUFFIX">
AUTO_GENERATED_SUBITEM_LINK
</li>
</foreach-subitem>
</ul>
</menu-subitems>
</li>
</foreach-mainitem>
</ul>
</menu-mainitems>
At this point, you should have all the files needed for your SearchFit Main Template. The next step is to add all these files to your SearchFit Control Panel and publish your site.
Hint: Once you have finished Step 3, you will be able to view your SearchFit Main Template as applied on your website. In order for this to be possible, you will need to have a Custom Page in your SearchFit Control Panel named default.htm (your Home Page). By default, your SearchFit installation should have included a Custom Page named default.htm. If it's not there, please create a Custom Page named default.htm. It is not required to add content to default.htm. It just needs to exist. See the Custom Page Screen help documentation for more details.
Your Main Template file is the modified main_template.html file you created in Step 2 of this guide. The below instructions will guide you through copying your Main Template from your hard drive to the Main Template screen of the SearchFit Control Panel.
.. You will be transferred to the Main Template screen..Upload your images to the images_templ folder using the Website File Storage screen. Note that SearchFit does not allow you to use standard FTP to upload your images. You must use the File Storage screen.
.
. You will be transferred to the Website File Storage screen.
. Your zip file will be uploaded and (automatically) unzipped. A status report will be shown that lists all uploaded files.Your CSS Main file is the style4product.css file you created in Step 1 of this guide. The below instructions will guide you through copying your CSS Main from your hard drive to the CSS Main screen of the SearchFit Control Panel.
.
. You will be transferred to the Main CSS screen..Your Website Menu Template should have been created in Step 2 of this guide and named website_menu_template.html. The below instructions will guide you through copying your Website Menu Template from your hard drive to the Template Storage | Website Menu Template screen of the SearchFit Control Panel.
.
. You will be transferred to the Template Storage screen.
.The process of adding your Weblinks Menu Template to the SearchFit Control Panel is similar to adding your Website Menu Template, but is added to the Template Storage | Weblinks Menu Template screen. Your Weblinks Menu Template should have been created in Step 2 of this guide and named weblinks_menu_template.html. The below instructions will guide you through copying your Weblinks Menu Template from your hard drive to the Template Storage | Weblinks Menu Template screen of the SearchFit Control Panel.
.. You will be transferred to the Template Storage screen.).You must assign your Website Menu Template and Weblinks Menu Template to your website pages using the Configuration Per User screen.
.
. The Configuration Per User screen will appear.
. The Configure Per User | Generation screen will appear..
To Generate your website means to instruct SearchFit to prepare and publish your website. You must Generate your website to see any changes (as listed above) take effect. You must have popup blockers disabled in order to Generate.
. It's located on the SearchFit Control Panel beneath the SearchFit logo on the upper left (it's the third button from the left). You will be transferred to the Generate screen.
. A prompt will appear asking "Start New Generation?". Click the OK button.