Editing Templates

X-Cart shopping software has built-in development environment which allows  you to easily access and modify the templates from which your store is built. X-Cart templates engine is very flexible and extremely configurable, so you can completely change the look and feel of your site according to your taste and actual needs. But be careful! The powerful flexibility requires basic HTML, CSS and Smarty PHP template engine knowledge and experience.

When working with templates it is useful to enable X-Cart Debugging console: General settings > General options. The Debugging console enables you to view the template structure of the page at which your store is opened currently. The template structure of a page is presented in the form of a tree to show the hierarchy of the templates from which it is assembled.  admin/home.tpl, provider/home.tpl and customer/home.tpl are the main templates which include other templates (which in their turn can also include templates).  

For example, if we use the Debugging console to explore the template structure of the customer zone front page, the result may be something like this:

Picture 1: Debugging console (Customer zone front page template structure).

Note. What you see in your actual debugging console may not look exactly like in the picture.

If you look at the picture of the customer front end below you will notice that this page contains several distinctive areas the representation of which depends on certain templates.  

Picture 2: Customer zone front page template structure.

 

Knowing what template is 'responsible' for the look of the area you would like to modify enables you to modify the necessary template and change the look of your store.

You can click on the name of a template in the X-Cart Debugging console window to get quick access to editing this template.

Another way to edit templates is to use Edit templates from the Administration menu. It opens the 'Browse templates' section. You can use either the preset files menu or the 'Browse templates' form to access the files you need.

Picture 3: Preset files menu.

Picture 4: Browse templates form.

------------------------------------------------------------------------break-----------------------------------------------------------------------

The 'Browse templates' section allows you to:

• Create a new file

• Create a new directory

• Create a copy of a file

• Delete a file or a directory

• Upload a file from the local computer

• Edit a template

• Restore all files

• Compile templates to use only one language

To create a new file:

  1. Click on Edit templates in the Administration menu, the 'Browse templates' form will appear.

  2. Browse to the necessary location (If you want your file to be located in one of the directories, click on the name of the directory).

  3. In the 'Create new file' subsection enter the name of the file you want to create into the 'New file name' text box.

  4. Click on Create next to it and a new empty file will be created.

To create a new directory:

  1. Click on Edit templates in the Administration menu, the 'Browse templates' form will appear.

  2. Browse to the necessary location (If you want to create a new sub-directory in one of the directories, click on the name of the directory).

  3. In the 'Create new directory' subsection enter the name of the directory/sub-directory you want to create into the 'New directory name' text box.

  4. Click on Create next to it and a new directory will be created.

To create a copy of a file:

  1. Click on Edit templates in the Administration menu, the 'Browse templates' form will appear.

  2. On the 'Browse templates' form select the radio button next to the file you want to copy.

  3. In the 'Copy selected file to...' subsection enter the location and the name of the copy you want to create (e.g. 'main/homebackup.tpl') into the 'Copy file name' text box.

  4. Click on Copy next to it and a copy of the file will be created.

To delete a file or a directory:

  1. Click on Edit templates in the Administration menu, the 'Browse templates' form will appear.

  2. On the 'Browse templates' form select the radio button next to the file or directory you want to delete.

  3. Click on Delete selected. Confirm the deletion.

Note. When you delete a directory all the files and sub-directories under that directory are deleted.

To upload a file from the local computer:

  1. Click on Edit templates in the Administration menu, the 'Browse templates' form will appear.

  2. In the 'Upload file to the current directory' subsection click on Browse, locate the file you want to upload and click on  Open.

  3. Click on Upload.

If the file with the same name already exists in the selected directory, you can select the 'Replace file if exists' check box.

Note. The maximum file size that can be uploaded is 2Mb.

To edit a template:

If you want to edit templates successfully, you need to possess basic knowledge and experience in HTML, CSS and Smarty PHP template engine.

  1. Click on Edit templates in the Administration menu, the 'Browse templates' form will appear.

  2. Locate the file you would like to edit.

  3. Click on the name of the file. The 'Edit file' form will appear.

Picture 5: Edit file form.

  1. Edit the file.

  2. Do one of the following:

• Click on Save to save the changes.

• Click on Cancel to cancel editing the file.

• Save the file and click on Preview to see the file preview. Select the 'Use default stylesheet for template preview' if necessary.

• Click on the Restore file button to restore the original file if you have any problems while editing the template.  

Warning. The preview of some file may display incomplete template due to the lack of real-time data.

To restore all files:

  1. Click on Edit templates in the Administration menu, the 'Browse templates' form will appear.

  2. Click on Restore All and all the templates will be restored.

To compile templates to use only one language:

If you do not need multilingual support for your store, you can compile templates to use only one selected language. The compilation of templates simplifies the process of editing templates.

  1. Click on Edit templates in the Administration menu, the 'Browse templates' form will appear.

  2. From the drop-down list select the language which you want to use in the compiled templates.

  3. Click on Compile templates.

Warning. If you compile the templates at your store to use only one language all the text messages will be editable from the template editor directly, but you will not be able to edit the text messages using the Languages menu any more.

Note. The compilation process can take up several minutes. If you want to restore the original templates, click on  Restore All.

 

Related topics:

Webmaster mode

Working with Languages