Сервис электронной коммерции Notando

Themming overview

Table of contents

  1. Howto documentation
  2. Theme structure
  3. Folders structure
  4. Template cutting into layouts and content blocks
  5. Template packaging
  6. Theme metadata and layout rules
  7. Common view variables
  8. Layout pages
  9. Content blocks
  10. Common view parts
  11. Variable modifiers and custom template functions

Overview

Notando eCommerce is a newest webshop platform using state of the art code technologies, proven approach used for data storage and treatment. That is why our clients get reliable, high-speed and easy-to-use webshop that once you try never want to use another. And our designer partners get the webshop platform design templates for which will always be in demand from customers.

This documentation has been prepared for you to learn the Notando eCommerce webshop solution themes structure. It explains the ways you can create any theme you want to. As you will see, making new theme using Notando eCommerce is very easy. You are not have to learn how the platform work inside, API and core concernig stuff. Our system use MVC patter for application as a whole and for the client side. That is why making design you will deal with the 'designers' things only. More over, business logic and presentation logic at client side are separated what allows you to concentrate more on the development of each individual part and get the more perfect results.

Notando eCommerce solution, has powerfull and flexibile themming engine. You are not have to create a theme from scratch each time, Notando platform provides default themes and you may create custom templates for parts you want to change only. Or you maybe want to change some resources such as Cascading Style Sheets files or images and left other parts as they are, this is possible too. So whether you are only beginner in themes design and want to spend only few hours to build your custom theme, or you are experienced professional and want to crate unique high-quality design — Notando eCommers is for you. So, lets start working together.

Structure of theme templates

Visual representation of template

Usually when create new design you see it as a parts: some adverticing at the top, product list at the central part, search form near products etc. After you thought over all parts placement you are ready to create design layout and you are sure that none of the important parts be missed. This idea applied in Notando webshop layout making — business logic parts of page devided for content blocks which are separated and independed. You can see at the right image 'category/menu-tree', 'filter/form' and others. And from another side, page layout devided onto structural blocks according to their positiion which we can call 'left', 'footer', 'content-top' (see image on the left). This structuring helps easier discussing and developing theme templates.


Theme structure

Folders structure

To set up new theme you should create the following folders structure:

Or you can just download one of common themes from download section at our site, unzip it and edit to make you personal theme. In this case, you should just be careful not to damage the listed above folders structure of downloaded theme.

Cutting template into layouts and content blocks

As you probably already noticed, blocks pattern is used in Notando webshop solution for making webshop pages. If one set up pages in such a way, one's webshop theme will be more organized and easy to work with. So, after creating pages (X)HTML markup your should cut it into content blocks and layouts. There are no restrictions for templates naming and cutting rules, but separate parts should be meaningfull and properly assosiated by means of blocks.xml file rules. You can see content block template file and layout template file examples above. Templates must be stored as .html files according to your theme folder structure.

Templates reuse

You only have to create templates you need to customize, templates from common/default theme will be used for the rest, you can change fallback theme from common/default to any other with metadata.xml. For example if you want to change product details page only, you should create corresponding template with your custom design and save it as 'templates/controllers/product/details.phtml' template file. Complete list of avaiable default content block templates and default layout templates is here. To create your custom pages you can also edit existing default templates, avaiable to download in download secrion at our site. And it is possible to use common view parts into your theme templates as well.

Theme metadata and layout rules

Layouts and content blocks behaviour described as XML rules in blocks.xml file. This file is the tool which allows you to assign content blocks to structural blocks, move blocks around in a page, set their position or disable them. Also in blocks.xml you are able to redefine page layout template and tune some page settings, like number of products per page or default list style. You can read more detailed information about blocks.xml here.

Metadata about your theme such as author or version are placed in metadata.xml file. This information will appear in theme selection interface in webshop backoffice. To get more information visit metadata files description page.

Theme resources

Theme resources are stored under resources/* folders. Common resource folders naming is the following:

This is recommended folder structure. It is necessary only if selectable_resource smarty modifier is used in your theme. For example it is used in default theme templates. Due to this modifer it is possible to redefine resources only without changes in themplates. E. g. if you want only redefine images in default theme — create proper files and put them to resources/images. Then your images will have higher priority and will be used by default theme. You can read more about using smarty modifiers in your templates here.

Theme translations

All translations for Notando default theme are avaiable at our site's download section. These files are in Gettext format. If you want to change some tranlsations there, your should edit proper strings in downloaded .po file and then complie it to get .mo file as it is described at GNU 'gettext' documentation. Or you may create translation files yourself with translations you want to customize only. In this case you theme's translation priority higher then default translation.

Translation files should be placed accourding to folders structure in such a way:
languages/[your_language1].mo
languages/[your_language2].mo
As you can see in this example Notando webshop engine provides multilingual interface: en, ru, is language translations are avaiable for default theme now.

Theme packaging

To create theme package — just add all theme metadata files, resources and templates into zip file. It should have the following structure: 

	/
	|-templates
	|-resources
	|-languages
	|-metadata.xml
	|-blocks.xml

You theme package should contain at least one of the following: resources, templates, blocks.xml to be fully flegged theme. Theme folder in filesystem will be named after zip file, so use unique names for all your themes.

Please notice, content of existing theme will be replaced in case you've loaded theme zip file with same name.