Template Editing Guide for 4.1.x

[topvip]

Template editing overview

X-Cart uses Smarty templates to display all of the pages in X-Cart. Each template controls a different part of the site, so there is no central file to edit to change the look of your site. I will list the major templates in the next section, along with what they control. You can also use Webmaster Mode to show you which template is which. You can read more about Webmaster Mode in the manual.

The templates themselves are made up of HTML/CSS and Smarty. Dreamweaver has a plug-in that recognizes Smarty tags, which may help you: http://smartydwt.klitsche.org/

You need to be very careful when editing templates, as you can easily break the Smarty tags. Some pieces of a template only display when a certain condition is met. For example you may see a statement like this:

{if $usertype eq "C"}
a
{else}
b
{/if}

That essentially tells the browser to display 'a' if the usertype is C, or a Customer. Otherwise, it will display b. There are literally hundreds of these types of statements mixed in the templates. Soon you will get to know what each of them means. Good thread here on {if} statements: http://forum.x-cart.com/viewtopic.php?t=12234

Template Guide

Below are the major templates in X-Cart along what what each controls. All of them are located in your skin1 directory, and I'll group them by the folder they are in, starting with the root folder:
auth.tpl - this is the side menu login box. Shared between admin and customer side
authbox.tpl - this is the side menu login box for logged in customers. Shared between admin and customer side
bottom.tpl - this is the 'footer' of the site. It contains the Powered by (poweredby.tpl) and 'copyright' text (copyright.tpl). The style of this row is controlled by the .bottom class in skin1.css
copyright.tpl - the copyright year and store name in the footer
currency.tpl - this controls the format of the currency. If you want to change the location of the symbol, this is the place to do it
dialog.tpl - this is the main 'wrapper' of all content in the main window of X-Cart. It is essentially a table that contains a row for the title and a row for the content. It also has a border around it. By default, the title has a graphic background. This template is shared by the admin and customer sides, so again you may want to write an {if} statement to show a different version for each. The style of the border, title and box are controlled by the Dialogbox, DialogBorder and DialogTitle classes in skin1.css.
dialog_message.tpl - this is that little confirmation dialog box that pops up at the top of the main window, mainly in admin.
head.tpl - this is the 'header' row. By default, it contains the logo, tabs (which are in customer/top_menu.tpl), the search box (in customer/search.tpl) and language selector (if you have multiple languages). The admin side version of this file is head_admin.tpl
help.tpl - this is the side menu help box containing links to the help pages. It also contains the code that automatically adds a link when you add a new embedded static page
location.tpl - contains the code for the breadcrumb navigation (at the top of the main content area)
menu.tpl - this is the 'wrapper' for the side menu boxes. It is similar in structure to dialog.tpl in that it has a title row and a content row. The style of the border, title and box are controlled by the VertMenu classes in skin1.css.
meta.tpl - contains all of the meta tag info for the site
news.tpl - the side menu newsletter sign-up box. Contains today_news.tpl
pages_menu.tpl - the code that lists the embedded static pages on the side menu
poweredby.tpl - Contains the 'powered by...' text
printable.tpl - the print this page link
product_thumbnail.tpl - controls the thumbnail of a product. DO NOT edit this template unless you know what you are doing!
rectangle_top.tpl - this controls the overall width and height of your layout. By default, it is set to 100% high and 100% width. You can set it to a fixed width (like 900px) or a percentage. Keep in mind that this is a shared template between the admin and customer sides, so you might want to put in an {if} statement to show something different for each side.
rectangle_bottom.tpl - this closes the main table of the 'wrapper' (counterpart to rectangle_top.tpl). It is shared by the admin side as well.
skin1.css - this is the master stylesheet for the customer side. All of the classes that are referenced in the tables themselves are defined here. This is where you control the size and color of fonts, background colors, spacing, link colors, etc. The admin side is controled by skin1_admin.css.
today_news.tpl - the side menu that shows the current news blurb

Customer sub-directory
customer/categories.tpl - the side menu category template
customer/home.tpl - this is the main template that controls the customer side of the store. In it are the main components of a web page including the <title> and <head> tags, along with the table structure of the actual layout. You will also see all of the other templates that are called within it. This is where you would move around the side menu boxes such as the news and categories menus and also where you would add anything that needs to be included in the <head> tags (such as tracking codes, javascript, etc)
customer/home_main.tpl - controls what is displayed when in the main content area. A useful source for {if} tags as well.
menu_cart.tpl - the side menu cart template and member options template
search.tpl - the search box
special.tpl - the side menu Special template
tab.tpl - formatting for the Speed Bar tabs
top_menu.tpl - within the head.tpl template, this template has the include for tab.tpl, as well as the company phone information

Customer/main sub-directory
customer/main/cart.tpl - the main shopping cart structure page.
customer/main/checkout.tpl - the checkout process structure NOTE: If you are using Fast Lane checkout, all of the templates for the checkout are in skin1/modules/Fast_Lane_Checkout
customer/main/featured.tpl.tpl - the featured products template
customer/main/minicart.tpl.tpl - controls the side menu minicart display
customer/main/navigation.tpl.tpl - the page navigation menu (the little page numbers when you have products spanning more than one page)
customer/main/order_message.tpl - the confirmation screen for checkout. Where you would place tracking conversion codes (Google AdWords, Yahoo, etc)
customer/main/pages.tpl - the static page display template
customer/main/payment_xx.tpl - these are the payment templates on the checkout screen
customer/main/product_prices.tpl - - wholesale pricing grid on the product detail page
customer/main/product.tpl - the product detail page
customer/main/products.tpl - controls the products display under a category for a single column layout (if your setting in General Settings/Appearance options is empty)
customer/main/products_t.tpl - controls the products display under a category for a multi-column layout (if your setting in General Settings/Appearance options has a number in it)
customer/main/payment_wait.tpl - the screen you see when an order is submitted - it says 'Your order is being processed....'
customer/main/register.tpl - the main user registration template
customer/main/search_result.tpl - the advanced search screen as well as the search results display
customer/main/send_to_friend.tpl - the send to friend template that appears on the product detail page
customer/main/subcategories.tpl - this controls the sub-category display, and also is the 'wrapper' for the products display.
customer/main/welcome.tpl - the display of the main content area on the home page. Calls the featured products template and where you would add anything you would want to appear only on the home page in the middle area (welcome message, slideshow, etc)

Main sub-directory
main/error_xxxx.tpl - all of the error templates
main/history_order.tpl - order history, order search (both admin and customer side)
main/register_xxxx.tpl - all of the registration sections (billing, shipping, account, etc)

Misc
mail/html/order_invoice.tpl - the invoice on the order confirmation screen and order e-mails
mail/html/order_data.tpl - the product data on the invoice

Buttons - All of the buttons are controlled via the files in the Buttons sub-directory

Modules - All of the modules (bestsellers, reviews, gift certificates, discount coupons, etc) all have their own folders in the skin1/Modules folder.

Mail - All of the mail templates are in mail/ and mail/html. Most of you will use mail/html. All of the text in these templates can be controlled via the 'languages' area, so unless you want to edit the actual layout of the e-mail, you won't need to edit them.

Please see the next post for some template editing guidelines....