Introduction Template system

Written by Max Milbers on . Posted in Templating & Layouts

Hints for the use of the template system

This page is for users and designers and developers, but since users of the administrator level can also get inflicted with it, we moved it to the user chapter.

The new template system of virtuemart allows fine grained overrides for each category and product. Even the views can have different templates. We did not implement our own template system, it is based upon what is already there. So we have the joomla template system and some methods to override, but this leads to some limitations.

The joomla template system is described here:

The virtuemart default shop template is overriding the joomla configurations. You can choose in the configuration the template and layout for the shop, the category and the product view and you can override these values per category and product.

The problem behind this construction is that the joomla template override system does only work for the template loaded by joomla. So when you have the "Rhuk_milkyway" template set as default in joomla, but you use for example the "Beez" template for categories and placed a layout for override in it, then it is not used! Because joomla looks only in the "Rhuk_milkyway" template for layouts.

So you can use a lot different templates, but the layouts must be stored in the template which is the default of joomla.

Hints for designing your own templates

VirtueMart uses javascript to make the shop more dynamic, so it relies on some HTML classes being present to identify certain parts of the page. These classes are already set up in the default views so you can see how it should work.

  • The product details should be wrapped with the "productdetails" class. This is for the productdetails view, the product module and any other custom modules displaying products. Pre-2.0.8f releases expect the productdetails view to also use the class "productdetails-view".
  • The add to cart forms should be given the class "product" in the productdetails view, the product module and any other custom modules displaying the add to cart form. 
  • The prices block should be wrapped with the class "product-price" in the productdetails view and the product module.