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

Joomla! 1.5 presentation framework

Since VirtueMart is a Joomla! component, it cannot exist outside Joomla!. So before diving into the detail of the VirtueMart engine, it pays to take a brief look at how Joomla! actually works. While an understanding of the presentation framework of Joomla! and VirtueMart may be useful for themes and templates development, it is not essential for the actual customization design. In case you don't want to bother with the detail of Joomla!/VirtueMart engine, feel free to skip to the section Roles of VirtueMart themes and templates. (For those more practically oriented readers, you can even skip directly to Chapter 3, Product List Templates, as you can always come back to these theoretical discussions afterwards.)

Joomla! emerged from version 1.0 and later developed into 1.5. In this upgrade, Joomla! has been basically rewritten from the ground up. A presentation structure called Model-View-Controller or MVC has been adopted in Joomla! 1.5. While a detailed explanation of the MVC structure is out of the scope of this book, a basic understanding of its working will help us understand why and how VirtueMart 1.1 behaves in the way it is right now.

Joomla! is a web application. Each page of Joomla! is in fact a text file consisting of HTML code. Depending on the detail parameters of a web request, Joomla! will generate a dynamic HTML page by combining data stored in the database and site configuration data stored in various PHP files. In the early history of dynamic web pages, program code were written in a way that HTML tags are mixed with presentation logic in one place. The spaghetti code, as it is sometimes called, makes maintenance and extension of the coding very difficult. As the basic structure of a dynamic web page is better understood, more and more new coding patterns emerge to make the life of a web developer easier. The MVC presentation framework is one of those patterns that have been proposed to build computer applications. This framework has gradually become the standard pattern for building web applications and has been adopted by many open source web projects.


In the MVC presentation framework, the job of building a web page is divided into three main tiers. The backend tier is the data that is stored in the database (strictly speaking, there is no prescribed data storage format though a database is a natural way to manage the data). We need to grab data needed to build the web page. This tier of the job is done by the Model, which describes how data is stored and how data can be retrieved from the data server.


The frontend tier determines what and how data is presented on the browser. This is the job of the View. For a given dataset from a Model, there can be many different ways to present the data. Let's say, we have a set of statistical data, for example. We can present this data as a bar graph or a pie chart. Each of these presentations is called a View of the same Model.


Now statistical data is just a set of numbers. How can we convert them into a bar graph or a pie chart? That is exactly how the Controller comes into place. A Controller is a routine specifying how to convert the Model into various Views. One major advantage of this separation of data (Model) and presentation (View) makes changes to the application much easier. We can change the presentation independent of the underlying data and vice versa.

So, in the Joomla! 1.5 world, we will have a set of Models which interface with the database, a set of Views to tell the browser how to present the data, and a set of Controllers that control how to convert the Model into the View. According to the best practice, all Joomla! 1.5 components should follow this same structure. Thus, each Joomla! 1.5 component should have two subdirectories called models and views. Also, the root directory will contain a controller.php which extends the Joomla! controller's capability. This structure is revealed as we look at the contents of a Joomla! component which we had done previously. However, because of historical reasons and others, not all components follow this best practice. VirtueMart is one of those exceptions.