Template structure

Each of the templates in Hostedshop is built by a standard file-structure. This structure ensures that the template works as intended. The file-structure can be found in its entirety via the Design Manager > Edit files, or via Design Manager > For developers > Copy files to FTP.

Inheritance and maintenance

The Hostedshop templates are built on a principle of inheritance that distinguishes between files on the server and the files locally. The minimum requirement for a template to be installed locally is that the file meta.json has been installed in the folder /upload_dir/templates/[template]/. This happens automatically when you install a template via the design module.

When the template has been installed, it will point to a template on the server through its "PARENT" in meta.json. If it locates a parent on the server, the following rules for inheritance will apply:

1. Check for file locally
2. Check for file on server

Files that are not located locally will be retrieved and maintained automatically on the server. For example, you may want to change the look of the template, but don't want to change or maintain modules. Then you only change the files that relates to the specific functions.
This also means that if you want a 100% independent template, you should download all files to the solution and delete "PARENT" in meta.json. That way, the template becomes independent from the other templates on the server.

It is possible to create multiple parent templates locally, but we do not recommend it - it makes it more difficult to keep an overview over the files and changes. One more level would mean:

1. Check for file locally
2. Check for file on server
3. Check for file on parent template locally
4. Check for file on parent template on server

Note: In the design manager under Edit files, local files are shown with a (c) after the filename. In other words, it is a custom file.

Page types

When a link is loading, the Hostedshop system assesses which page and page type it belongs to (Page type). Based on the page type, the relevant module file is retrieved from/modules/[module]/. For example, a blog-page with the link /blog/ will point to the files in /modules/blog/. If a file in this folder is changed, all blog modules will be changed. If you want specific rules for each page, check the page ID. Note that controllers on the individual modules automatically use the pages data by setting primary=true. Read more about this under controllers.

File structure

The file structure is reviewed below.

The root

The folder contains:

• index.tpl - the index file for the website.
• index.closed.tpl - the index file for the website, if it is closed.
• meta.json - contains master data of the template that is generated from "Edit design" in the design module. It entails, among others:
  • TEMPLATE_NAME - name of the template
  • PARENT - points to an overlay template, if applicable.
• gruntfile - grunt project file.
• package.json - note project file for Grunt.
• mb_settings.json - contains data about the boxes placed via the structure tab.

The Assets folder

The assets folder contains the versions of javascript and CSS that the website uses, and in addition, an image folder.

These are compressed versions of the files that are built together for the best speed.

The modules folder

The modules folder contains every module-template file, e.g. blog. Der er en mappe for hver side-type i systemet. F.eks. repræsenterer mappen "blog" en Blog-side og "product" en produktkatalog-side.

Alle moduler er opbygget med et modul-template, som inkluderer sub-templates for lister eller entiteter. Modulet kan så have en undermappe med assets (f.eks. javascript) og partials (template filer).

Eksempel for blog:

• blog.tpl - den overordnede styring af blog-modulet, som håndterer, om det er en liste eller et indlæg.
• blog-list.tpl - en liste af blog indlæg.
• blog-entity.tpl - et blog indlæg.
• blog.js - javascript til brug i blog modulet.

Note that the product catalogue has a template for Angular product listing, as well as a template for search engines and Internet Explorer 7.
Two folders contain special files:

• column - column boxes controlled via Structure in the Design module.
• widgets - elements that can be reused in a template, such as newsletter sign-ups and menus.

The partials folder

The Partials folder contains partial elements of the template, such as body, top and bottom. These elements are included by index.tpl. These elements are typically the ones edited in order to make to the design.

The source folder

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

In addition, the source contains the folder /settings/settings.json, which contains the settings that "Right Design" reads in. Saving in "Right Design" saves settings_values.json.

Reseller logo
If you want your logo to appear in the admin, you can upload it via the file manager here:

/upload_dir/templates/resellerlogo.png