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

VirtueMart presentation framework

VirtueMart 1.1 was conceived during the time of Joomla! 1.0.x when the MVC structure was a new introduction to the computing world and was not yet widely adopted. In particular, why Joomla! ultimately decided to pick the MVC as its presentation framework is not clear at the time. However, the VirtueMart development team already understands the importance of structuring the web page building process, especially on the separation of data and presentation. Actually, this concept has been used in VirtueMart 1.0.x, although it is not implemented as fully as in version 1.1. Without a standard framework by then, they chose a very similar structure with three data, presentation, and controlling tiers but different nomenclature. Of course, the detailed working of the structure has many differences from the MVC framework, especially from a theoretical point of view. Nevertheless, this presentation structure works on the three-tier structure without a well-defined name for each of the tiers. So, you may not find these tiers named explicitly in the official VirtueMart developer documentation. However, the presentation framework still adheres to a close pattern as a Joomla! 1.5 component.

The class files - Data tier

In the VirtueMart world, data manipulation is the responsibility of class files located in the classes subdirectory, which we looked at briefly while navigating through the Joomla! file structure. The class file starts with a prefix ps_ (probably derived from the historical name phpShop) followed by the data name. Let's go back to the VirtueMart file structure we've been looking at in the first section of this chapter. Navigate to the classes subdirectory under the VirtueMart administrator directory. You can see a lot of files starting with the ps_ prefix. Most of these files define a class in the data tier of VirtueMart. So you will expect the ps_product.php file to handle the product data, ps_shopper.php to handle the shopper data, and so on.

The templates files - Presentation tier

On the other end of the framework is the presentation tier, which is responsible to send back the HTML to the browser for display. VirtueMart 1.1 adopted a very flexible template structure where the major HTML code is separated from the data and processing logic. These template files are placed in the frontend VirtueMart directory and have been grouped into sets under the structure called theme. A VirtueMart theme is basically a collection of template files which control the frontend look of a VirtueMart shop. Thus, you can compare template files to a similar structure like a Joomla! view. Different template files will present VirtueMart data in different ways. For example, you can change the product listing page of the shop from a vertical list of items to a tabular view of items by simply changing one of the templates. For an example of how this can be done, you can refer to Chapter 3, Exercises 3.7 and 3.8.

The page files - Business logic tier

So far, we haven't touched on the processing logic where data is converted into the presentation. In VirtueMart, we do not have controllers. Instead, the processing is done in the page files located within the html subdirectory under the VirtueMart administrator directory. All the page files are named in the pattern of {module}.{page}.php where module is a section of functions in VirtueMart, as we explained in the introduction.

Before we carry this similarity too far, it should be noted that VirtueMart is not actually implementing the MVC framework. So it deviates from this separation of data and presentation principle from time-to-time, as we shall see. Many times, the output of HTML code mingles with the data processing logic in the class file, making customization very difficult.

Let's look again at the real VirtueMart administrator directory for more insight. By navigating to the html subdirectory under the VirtueMart administrator directory, we can see a lot of files named in the pattern {module}.{page}.php. We see, for example, files such as shop.cart.php, shop.browser.php, checkout.index.php, admin.show_cfg.php, and so on. .php of course is the file extension which tells us (and also the operating system) that this is a PHP script file. {module} is the name of a VirtueMart module. {page} is the page name within the VirtueMart module. From the name shop.cart.php, we know this page belongs to the shop module and has a page name cart. Actually, this is the PHP script responsible for the processing of the shopcart page. Similarly, shop.browse,php will control the processing of the browse page, also part of the shop module. On the other hand, checkout.index,php will control the major logic of checking out. checkout is another module in VirtueMart and the name index suggests this is the starting page for the checkout process.

With all the background information, we will be able to appreciate the importance of themes and templates in the VirtueMart engine. When you type a VirtueMart URL on the browser (that is, URL that consists of index.php?option=com_virtuemart), the browser will send the request to the Joomla! site. After some initialization and routing code, the Joomla! engine will feed the request to VirtueMart for rendering the main part of the page.

The first thing VirtueMart will do is the section of initialization, including loading some basic classes, setting up the session, checking the permissions of the user, and so on. It will then check whether the request includes a pending function that needs to be done. If there is any, it will invoke the function before processing the page.

After the function is complete, VirtueMart will pass the processing to the HTML page (for example, shop.cart) requested. The page will load the relevant data using the appropriate class file, combining it with the session and/or configuration data already loaded. All necessary data will then be fed into the relevant template file to generate the HTML code that needs to be passed back to Joomla!. After a further filtering process by Joomla!, the HTML code will be sent as a response back to the browser for display.