Back to CS-Cart.com

Templates

Templator

CS-Cart uses the Smarty 4 template engine. It allows separation of presentation and application code. You can learn more about it at https://www.smarty.net/.

This chapter will be particularly interesting for the developers. There you will find out what constructions can be used in templates.

Templates structure

Templates are stored in the theme templates directory. It has the following structure:

  • The addons directory - templates for add-ons. Further you can read more information.

  • The blocks directory - templates used in the Layout and in block settings. These are template and wrapper that can be defined for a block. Further you can read more information.

  • The buttons directory - buttons templates. Templates are sorted according to the role of the button.

  • The common directory - templates with the common functionality for different pages.

    For example, templates for breadcrumbs, calendar, or pagination.

  • The pickers directory - templates of the dialogs that allow adding products and categories.

  • The views directory - templates for the controllers. Further you can read more information.

  • The 404.tpl file - a template for the 404 page.

  • The demo_theme_selector.tpl file - a template for the Theme Editor.

  • The index.tpl file - the main template file. It contains:

    • DOCTYPE - the required element. Using <!DOCTYPE html> is recommended.
    • Title - page title.
    • Connection of the meta.tpl file.
    • Connection of the common/styles.tpl file.
    • Connection of the common/scripts.tpl file.
    • Connection of Theme Editor, demo panel, translate and template mode, if they are active.

  • The meta.tpl file - site meta information: description, keywords, viewport, etc.

Add-on templates

Templates for the add-ons are stored in the templates/addons directory.

Add-on templates structure

  • The blocks directory - add-on blocks templates. You can choose the desired template in block settings.

In the blocks/product_tabs directory add-on templates for product tabs are stored.

  • The hooks directory - templates that implement hooks.
  • The views directory - templates that are added to a page.

In the add-on directory, there also can be other directories and files that are necessary for the add-on correct work. Such as the providers directory in the Social Buttons add-on.

Blocks templates

Blocks templates are stored in the templates/blocks directory. Depending on a block role, different templates can be applied to it. Template applications are defined in the app/schemas/block_manager/blocks.php file.

For example, for the categories block:

‘templates’ => ‘blocks/categories’

That means that it is possible to apply all templates from the blocks/categories directory.

The file name depends on a language variable, which is generated as follows:

  • If the file code has the following part: {**block-description:name_of_template **}, then the name_of_template name is used.
  • If there is no such construction in the file, the language variable is formed based on the template file name.

Views templates

The Model-View-Controller (MVC) architectural pattern is used in CS-Cart.

The views directory contains templates for site pages. Directories that are placed in the views directory define controllers to be addressed to.

Files that are stored in directories define mode.

Also there are the components directories inside the directories that define controllers. Templates that are stored there perform additional functionality that is added with the help of include in files.

Let us see how to define a template that is used on the following page: /index.php?dispatch=categories.view&category_id=166

  • categories - controller that is referred to for receiving data. We need the category data, so, we take the categories directory in the views directory.
  • view - defines what we have to do. In this example we need to show products belonging to the category. So, we need the view.tpl file.
  • category_id - id of the category that we want to show.