The difference between templates and web pages


	The difference between templates and web pages
	Last Edited - 06/7/2013 9:27am PDT
	Category Path - Shopping Cart Software Components > Administration Area > Design > FAQs & Tutorials

templates vs. web pages

I'm trying to add an "About Us" page to our store. I've created a new template in my Template Package named about_us.tpl. I would like to view this new page and add a link to it. But, when I go to www.mywebsite.com/about_us.tpl, I get a "Page Not Found" error. What is the URL of the new webpage I've added by creating this template?

This is an excellent question. In order to answer it, we must first clarify the difference between templates and web pages. Both serve a specific purpose in the shopping cart software, but they do not function the same as each other.

key concept: web page

For the purpose of this tutorial, a web page is any page in the shopping cart software that is publicly viewable when you visit its URL.

For example, the web address of a storefront's home page may be something like this:
http://www.mystore.com/index.php

The shopping cart software includes roughly three-dozen web pages, which are the pages one sees when viewing the storefront: the storefront's product pages, category pages, search results, checkout pages, the customer account area, etc.

The source code of these web pages is not available for editing. This is because these pages are full of scripting code that's busy making database queries, formatting variables and error-checking data. There's no HTML code present in the source code of any of the cart's web pages!

Huh? If the cart's web pages don't contain any HTML code, then what controls their design? The design of a web page's content is controlled by a template.

key concept: template

The design (the layout, color scheme, images, etc.) of each of the shopping cart's roughly 36 pages is controlled by a template. Each page of the cart has a corresponding template associated with it.

A set of templates, one for each of the store's webpages, is called a Template Package. (Click here for a list of available templates for use in Template Packages.)

Templates contain the HTML and CSS code that is applied to its corresponding web page. These templates are what's editable within the Design section of the store's Administration Area.

Templates are never viewed directly by a user. The template's corresponding web page is viewed instead. When a page is viewed in the storefront, that page's template is applied to it.

Another way to think of it is that there's several steps that take place when a store page is viewed in a web browser:

First, before any content is displayed to the user, the web page retrieves information from the store's database.
Then, the template for that store web page is loaded by the shopping cart software.
Finally, the database information obtained in step one is inserted into the template loaded in step two. The resulting HTML code and page content is then rendered in the user's web browser.

example

For example, a store's home page is http://www.mystore.com/index.php

When the index.php web page is loaded, the shopping cart software first runs the series of commands that the index.php file contains, such as connecting to the store's database to obtain the information for the products that need to be displayed on that page.

After the index.php page runs all its commands and loads all of its data into memory, it then says to itself, "Okay, now that I've obtained all my data. Now I'm ready to render this page in the user's web browser."

The software then goes and looks up the index.tpl template file from the live Template Package. (If the Template Package does not contain that page's template file, it defaults to using the universal.tpl template in its place.)

The server then uses a series of complex algorithms and hand gestures to mash all of the product data it has stored in memory into the appropriate locations in the index.tpl template.

After the page's data has been spliced into its template, the completed amalgam is then rendered in the user's web browser.

The result: The content obtained by the web page is displayed in the design established by that page's template.

So, how do I add more web pages to my store?

There are several tools available to add more custom-made pages to a store. It's recommended that additional pages be added to the store by using one of these two methods:

1) Use the Custom Web Page Editor
The Custom Web Page editor is located in the store's administration area at [Design > Add a Custom Web Page]. This tool allows additional pages to be added to the store's website. The pages created with this tool will have SEO-friendly URLs, and they have the option to either have custom-made templates applied to them, or stand on their own with no template applied to them. See the Custom Webpage Editor article for more details.

-OR-

2) Upload additional pages to the site via FTP
Silver and higher account plans provide the option to set up a hosting account for a store. This provides a means for a user to create as many web pages as they like using a web design program, such as Dreamweaver, and then upload those pages directly to the website using FTP. See the connecting to a website using SFTP article for more details.