3.4 Template Structure

Every one of SmartWebs templates are built around a standard file structure. This structure creates the foundation, so the template can work as intended.

The whole file structure can be viewed/edited in the Design Manager > Edit Files or via Design Manager > For Developers > Copy Files via FTP.

Overview

  • Inheritance and Maintenance
  • Page Types
  • File Structure

 

 

Inheritance and Maintenance

SmartWebs templates are built on an inheritance principle, distinguishing between files on the server, and files locally. The minimum requirements for the templates are installed locally in the meta.json file, which can be found in the template folders (/upload_dir/templates/[template]/). This happens automatically, when you install a template via Design Manager.

When a template is installed, it will point to a template on the server via its 'PARENT' in meta.json. If it finds a parent on the server, the following rules apply:

  1. Check for local files.
  2. Check for files on the server.

Files that are not stored locally, will be downloaded and retrieved automatically by the server. Example: You might wish to change the look of the template, but do not wish to change or maintain the modules. To accomplish this you only need to change the files that relate to this.

At the same time you might also want a 100% independant template, This can be achieved by downloading all the files from a solution and then deleting the 'PARENT' i meta.json. This way you will have a template that is independant from the server templates.

It is possible to create more parent templates locally, but we reccommend that this not be done with regard to clarity for the users. A level more will mean:

  1. Check for local files.
  2. Check for files on the server.
  3. Check for files from the parent template locally.
  4. Check for files from the parent template on the server.

Note: When you look in the Design Manager > Edit Files, you will see that local files are marked with a '©' after the file name, It means that these files have been customised.

 

 

Page Types

When a link loads, SmartWeb assesses which page and page type it adheres to (Page Type). From the page type it gets the relevant module file from /modules/[module]/*-*

Example:

A blog page with the link /blog/, Points to: /modules/blog/.

Changing a file in this folder, will change all blog modules. You can also specify rules for a single page by making a check against a page id.

Remember that the controllers of the individual modules automatically use the pages data by setting primary=true.

Read more about this under controllers.

 

 

File Structure

Root Directory

This folder contains:

  • index.tpl - This is the index file for the website.
  • index.closed.tpl - This is the index file, if the website is closed.
  • meta.json - This contains master data about the template, as generated from "Edit Design" in the Design Module. This contains: TEMPLATE_NAME, PARENT (This points to a possible overlying template).
  • Gemfile - This is a Ruby project file for Sass.
  • gruntfile - This is a Grunt project file.
  • package.json - Note project file for Grunt.
  • mb_settings.json - This contains data about the boxes that are placed via the structure tab in Design Manager > Edit Design > Structure.

 

Assets Folder

The assets folder contains the versions of Javascript and CSS that the website uses. Additionally there is also an image folder.

It is comprised of compressed versions of files that have been consolidated into the same file to increase speed.

 

Modules Folder The modules folder contains all module template files, e.g. blog. There is a folder for every page type in the system. e.g. The "blog" folder contains: a blog page and "product" a product catalog page.

All modules are built with a module template, some include sub templates for lists or entities. Modules can have sub folders with assets (e.g. Javascript) and partials (template files).

Example for blog:

  • blog.tpl - The overall management of the blog module which handles if it is a list or a post.
  • blog-list.tpl - A list of blog posts.
  • blog-entity.tpl - A blog post.
  • blog.js - Javasscript for use in the blog module.

Remember that the product catalog has a template for Angular product list, as well as a template for the search engine and Internet Explorer 7.

Two folders contain important files:

  • column - Columns box that is controlled via Structure in Design Manager > Edit Design.
  • widgets - These are elements that can be reused in a template, e.g. Newsletter Subscription and Menus.

 

Partials Folder

The partials folder contains part-elements of the template, like body, top and bottom. These elements are included in the index.tpl. It is typically these elements that you choose to change the design.

 

Source Folder

The source folder contains the original versions of CSS, Javascript etc They can be built by using Sass and Grunt into the assets folder, which is then used on the website.

Furthermore the source folder contains /settings/settings.json, which contains the settings that are set in Design Manager > Edit Design. When the settings are saved in "Edit Design" they are saved to settings_values.json.

 

Reseller Logo

If you want your logo shown in the administration, you can upload it with the filemanager to:

/upload_dir/templates/resellerlogo.png