How to create tomatocart templates
TomatoCart is a professional and innovative open source eCommerce solution. The back-end is an impressive desktop-like ExtJS-powered interface, offering significant usability improvements and user experience. It’s the most easy-to-use shopping cart. Click here to find more about tomatocart.
Now that we understand how the template engine works. It’s time to learn how to build a new template. Firstly, let’s see the template structure that is shown in the figure below.
Template structure
As shown in the figure above, the template is composed of the sections that are illustrated below.
- content directory: include all the views of the page content based on the group and module.For example, if we are interviewing the index module of the index group, the index.php in the index directory will be included.
- ext directory: this is optional,if you have any third-party code need to be used in the template, just put them here.
- images directory: include all the images that will be used in the template.
- javascript directory: include all the javascript file that will be used in the template.
- modules directory: include all the views of the modules and the files in the jsons that deal with the ajax request triggerd in the template.The views of the box modules should locate in boxes and the content modules should locate in content.
- index.php: the view entry of the template which is responsible for generating the whole page.
- stylesheet.css: CSS Stylesheet of a template used to customize the layout of a template.
- template.php: it includes the template class that is used for installing the template or removing the template.
Normally, as building a new template, we just need to modify the template.php, index.php and the stylesheet.css files. other files can be the same or different. For example, if we want to implement a new template named test, the required steps are illustrated below.
- Build a directory named test.
- Build a template.php file in the test directory. It should include a class named osC_Template_test that is derived from the osC_TemplateInfo class. The class diagram about both classes are as follows.
-
Template class diagram
- Let’s have a look at the attributes and methods defined in these two classes:
- Attributes
- $_id: Holds the template id
- $_title: Holds the template title.
- $_code: Holds the template code, for the test template, it must be test.
- $_author_name: Holds the template author name.
- $_author_www: Holds the template author site.
- $_markup_version: Holds the template markup version. It can be ‘XHTML 1.0 Transitional’.
- $_css_based: Indicates whether the template is css based or not. In generally, it should be ‘1’.
- $_medium: Holds the template medium. In generally, it should be ‘Screen’.
- $_groups: Holds the template groups. For example, We can define box and content group. The box group can include right and left section. And the content group can include the slideshow, before and after section.
- $_keys: Holds the keys of the template.
- $_logo_width: Holds the template logo width.
- $_logo_height: Holds the template logo height.
- Methods
- Install: Insert the template information into the database, generate the template id, define the default modules of the template and insert the modules into database. Finally, resize the logo.
- remove: Delete the boxes of the template, delete the template and delete the configuration keys about the template.
-
- Copy the content directory of the glass_gray template to the test directory. Since the templates shared the same groups and modules in the ‘includes/content’, we can use the same page content view of the grass gray in the test template.
- Copy the modules directory of the glass_gray template to the test directory. So the test template has the same modules with the grass_gray.We can add modules to the ‘test/modules/boxes’ or the ‘test/modules/content’ an also can delete the modules. We’ll mention about this later.
- Copy the index.php of the glass_gray template to the test directory. So, the page should looks like:
-
index.php of Template
-
- Build a stylesheet.css in the test directory and write css rules in it to customize the template theme.
- Put the js file in the javascript directory.
- Put the images in the images directory.
- Compress the test directory to a zip file, upload the zip file in the admin area and install the test template under ‘startmenu->Templates->Templates’.
- Close the web browser and restart it again the new template will be displayed in the frontend.Clearing the cookie of the browser and refreshing the template can also make the new template available.
As long as all steps described above are done, the new template will be available for you.