Book Image

Joomla! VirtueMart 1.1 Theme and Template Design

By : Joseph Kwan
Book Image

Joomla! VirtueMart 1.1 Theme and Template Design

By: Joseph Kwan

Overview of this book

VirtueMart is the best shopping cart solution around for the Joomla! CMS. A VirtueMart template is a Joomla! template that is designed to create the overall look of a store. It puts in things such as a shopping cart bar, more shop-like graphics, more readable colors, and so on. A VirtueMart theme only impacts the area of the site actually controlled by the VirtueMart component. Themes work inside the overall framework. Applying custom templates and themes to give a unique look and feel to your VirtueMart web store will really attract customers! This book will guide you to build VirtueMart custom themes and templates. Joomla! VirtueMart 1.1 Theme and Template Design explains how the VirtueMart theme and template system works and points out ways to configure the default theme. It then goes on to look at each of the major templates with an emphasis on how to customize them. It then discusses individual page groups such as product list, product details, shopping cart, checkout, and invoice e-mails in the order they appear to your customer. After-sale services like invoice e-mail, account management, and order list are also discussed. The book also discusses the different components of a VirtueMart theme and will teach you how to build a theme from scratch. You will also learn advanced features like child products, advanced attributes, custom attributes, and product types. Topics like integration with Joomla! plugins and AJAX functions are also included. An Appendix provides a comprehensive template reference of the use and available fields of every template. Joomla! VirtueMart 1.1 Theme and Template Design is a practical guide for all those who want to make VirtueMart work for them. It will put many advanced features of this popular open source e-Commerce application at your finger tips.
Table of Contents (16 chapters)
Joomla! VirtueMart 1.1 Theme and Template Design
About the Author
About the Reviewer

Roles of VirtueMart themes and templates

It should be clear by now that template files control the HTML display on the browser. So the color, font style, font size, data field arrangement, and layout are the major jobs of a template. By invoking a different template file, the browser display will look very different. Depending on the nature of an HTML page, the final HTML code may be generated by one or more template files. The product detail page (usually referred to as the flypage), for example, makes use of several template files and its appearance will change when any one of the templates change. We will work on the details of this in Chapter 4, Product Details Templates.

Since the final look of a page may vary with a group of template files, it is important that the templates are consistent with each other. Mix and match of various template files may work sometimes, but will definitely seem not so well-organized and professional. Furthermore, the output of a template also depends on various configuration settings of VirtueMart. So there is a need to group the template files into a full unit. Each of these full units is named as a theme in VirtueMart.

The original intention of the template system is to separate processing logic from the final presentation. So you will find that most of the templates only take care of presentation, that is, the look of the final browser page. However, as highly diversified customization demands come up, more and more processing logic is introduced into the template. Initially, the processing logic is added by amateur developers into the template because they are not aware of the importance of separating the data from presentation. However, soon even professionals will find it necessary to place some processing logic into the template file when they do customizations.

There are two major reasons to introduce logic into templates. The first one is to restrict the changes made to the core files. Often, when processing logic changes, the presentation will need to be changed to make use of the new logic. So each change will involve both the processing logic in the HTML file as well as the presentation code in the template file. Putting the processing logic in the template will avoid the changes in the HTML file and thus reduce the number of modified files.

The second reason for putting processing logic into a template is for backward compatibility during version upgrade. As the major role of template files is for presentation, essential changes to the template are less frequent than the HTML pages. This is especially true for security upgrades. Template files are less prone to security problems and compelling changes are usually not needed. Restricting changes just to template files will affect customization less during version upgrade.

Due to the need for restricting changes to within the template file, VirtueMart even introduces a new way to extend the core functions using theme starting from version 1.1.4 onwards. In the previous section, we explained that the ps_ class files in VirtueMart handle most of the data logic. From version 1.1.4, all the ps_ class files can be overridden using a custom-built class file by putting that custom-built file in the theme directory. A new configuration item is added to VirtueMart to enable the new feature. This means that in case we need to modify or introduce new logic to the data model, the modifications can be done through a custom file in the theme. Since these custom files are not core files, they will not be modified during version upgrade. The new feature thus helps to reduce the impact of version upgrade on customization. Unfortunately, this feature only applies to class files, but not to HTML files. So, in case you need to change the processing logic, you cannot override the HTML file using a theme. Instead, you will either need to overwrite the HTML file with your changes or place the logic in the template file, if that is an option.