We will explain the basic structure of the VirtueMart themes and templates and go into the detail of all important templates. We will also show you how to customize the templates and add new features to your theme with lots of real-world exercises. The customization is not just on HTML elements and CSS styles. Many of them involve changing the PHP and JavaScript code, adding new features and behaviors. We even included exercises that demonstrate how to integrate Joomla! plugins, JavaScript frameworks, existing JavaScript code, and Joomla! components into VirtueMart themes and templates.

We understand your customization projects will have many diverse varieties. So we've tried to include examples of different types, templates, and module pages as much as possible within the limitation of the text. Yet there may be areas we cannot touch on in the exercises or areas we didn't go into as much details as you would have liked. In that case, you can refer to the comprehensive template reference in Appendix, VirtueMart Template Reference, where we have covered all 86 templates in seven different template groups (up to version 1.1.5).

VirtueMart is one of the most complex components in Joomla!. It is impossible to cover every area of VirtueMart in a little book like this. The main subject of this book is VirtueMart themes and templates. Themes and templates are those parts of VirtueMart responsible for the final presentation of data to the browser. In particular, most of the templates, if not all, only deal with the frontend. While we will explain the VirtueMart engine in some detail and touch on other areas, our focus will remain on themes and templates. That means we will not touch on the many details of classes and module pages, except when they are related directly to the themes and templates. That also means we will not discuss customization of the backend VirtueMart modules. Creation or customization of payment modules and shipping modules are not part of the presentation engine and so they will not be discussed in this book. Also, we will not talk about the VirtueMart database structure.

If you are seeking help solely for a VirtueMart backend project or for payment and shipping module, this book is not for you. You can treat this book as a first step in knowing how VirtueMart works, though. After you thoroughly grasped the idea presented here, you will definitely have a solid foundation in researching ways to hack into the backend.

To be successful in your customization project, you will probably need to tweak some PHP code or include some JavaScript handlers. However, this book is not a textbook on programming and so will not tell you all the bells and whistles of writing PHP or JavaScript programs. We will give you a basic idea of how to tweak code but do not expect that you will become a seasoned programmer after reading this book.

While we will touch on simple techniques on tweaking Joomla! to work in our way, this book will not tell you the detailed structure of Joomla!. In some exercises, we may step into Joomla! technicalities such as customizing a Joomla! module. However, Joomla! is not the focus of this book and so you may need to refer to other textbooks on Joomla! if you want to work further on the modules.

Chapter 1, The Virtuemart Engine, will briefly review the Joomla!/VirtueMart file structure. We will then continue to explain the presentation framework of Joomla! and VirtueMart. A high-level view of the VirtueMart engine will be presented and we will see how the VirtueMart theme and template fits in the whole system. After that, we will be able to understand the various ways to customize the VirtueMart shop and provide a list of items we need to consider before heading on a customization project.

Chapter 2, The VirtueMart Default Theme, will focus on the default theme and its accompanied template structure. We will start with the shopping life cycle in VirtueMart, the backbone of the theme and template system. We will then give a general description of the VirtueMart configuration settings with a closer look at the Site configurations that relate closely to the frontend presentation. After that, we will concentrate on exploring the default theme. We will see the options that are available in the default theme configuration. Finally, we will give a brief introduction to the seven template groups under the default theme and understand their basic usage.

Chapter 3, Product List Templates, is the first of four chapters that explains the working of major template groups. In this chapter, our focus is on the the product list templates. We will start with a sample template to see how a template works. Some basic PHP language constructs will be introduced before looking at the browse page elements and then the three different product list styles. We will look closely at each of the major templates in the group. We will guide you to customize the basic layout, the header, the navigation links, the add-to-cart form, the product list styles, and many more.

Chapter 4, Product Details Templates, will build upon what we have introduced in the previous chapter but shift the focus to the product details templates. We will look at the major elements that compose a product details page and then the templates that are related to each of those elements. We will look at how to customize the flypage, header, product images and files, product review, add-to-cart form, advanced attribute and custom attribute, and many more.

Chapter 5, Changing the Look of VirtueMart, will further our understanding of the template system by looking at peripheral stuff that is not inside a template file but are affecting the look of the site. We will look at the stylesheet, the JavaScript, the URL links, and the language element. Then we will continue our investigation in the template system by studying a few more templates that may not be considered as the core but will definitely affect the impression of the shop. Examples to customize the CSS, JavaScript, language element, manufacturer page, vendor page, ask seller form, and the VirtueMart home page are explained.

Chapter 6, From Shop Basket to Final Checkout, will walk through the latter half of the shopping life cycle, from the time that a product is added to the shop basket to the time that the customer finishes with the order. We will first explain how the shop basket data is stored in the server and look at the various elements on the shop cart page. A major part of these discussions will focus around the shop basket templates. Next, we will cross the border to the checkout templates and follow every page in the checkout process. For each of the checkout steps, there are associated templates. We will look at each of the templates and see how they can be customized to fit our needs. While working with the exercises, we will introduce further techniques that can be employed to customize VirtueMart without hacking into the core files.

Chapter 7, VirtueMart Templates and Joomla! Modules, will look at the customization of the various Joomla! modules that come with VirtueMart. We will also touch on the templates for some peripheral elements on a flypage: recent products, related products, and so on.

Chapter 8, VirtueMart Theme Anatomy, will look at the detailed structure of a VirtueMart theme. We will first look at the VirtueMart theme class and see how the whole theme system works. Then we will focus on each of the components: the images, the JavaScript, the CSS file, the theme file, and theme configuration. Finally, we will try to see how we can add new configurations to the theme configurator by hacking into the files.

Chapter 9, Theme Customizations, will look at the details of customizing or creating a VirtueMart theme. We will first see the differences between customizing and creating a theme. Then we will discuss the pros and cons of creating a new theme rather than customizing the default theme. We will then proceed to considering the various issues that we need to consider before creating a new theme. After that, we will demonstrate how to integrate JavaScript Utilities and Joomla! plugin to a VirtueMart theme. Finally, we will take a brief look at how to use custom VirtueMart classes to provide our own logics in VirtueMart.

Chapter 10, Additional Customization Possibilities, will look at some advanced customization possibilities for modifying the templates and theme. Most of the materials are practical stuff and each section may not be that related to the rest of the chapter. The only common thing among them may be they are all interesting customization examples. We will talk about breaking complex templates into smaller manageable ones. We will talk about sharing templates between two template groups. We will work on using images to display advanced attributes. We will use the product type template to include a file uploader. Finally, we will touch on some more exercises using custom VirtueMart class file to make various changes to the price system.

In Appendix, VirtueMart Template Reference, we provide a comprehensive reference for all the templates of the default theme, listing out the purpose and usage of the template, its parent and child parents, related page and class files. The most important part is the available fields, where you will find the fields that you can use in a template and also a brief explanation of what the field is for.

There are various possibilities for customizing and extending VirtueMart. So what you actually need will depend on how you want to modify VirtueMart.

To change the default images, you certainly need the knowledge of how to use a graphic manipulation software such as Adobe Photoshop. If you want to customize the CSS styles or change the HTML coding, you can use a web design program such as Dreamweaver. However, to be proficient in changing the PHP or JavaScript, a decent text editor is a must.

There are lots of choices for the text editor; many of them are free to download through the Internet. My favorite editor is SciTE, a text editor based on the scintilla project. All the exercises in this book are prepared using this little yet versatile text-editing tool. You can try this out by downloading a copy from http://www.scintilla.org. SciTE may not be the best editor but is sufficient for our purpose. If you already have your own favorite other than SciTE, you can stick with that.

Another important tool you will need is an FTP client program. FTP is a protocol to transfer files to and from your web server. Unless you plan to use your customization only on your local computer, FTP client is almost a must. You probably already have one you are using. In that case, you should stick with it unless you want to change for a better one. My favorite is FileZilla, another open source project and a free download is available at http://filezilla-project.org. Theoretically, you can use Firefox or Internet Explorer as an FTP client and many people are using them. However, to be a professional, you cannot do without a dedicated FTP client.

This book is written for anyone who wants to learn the working of VirtueMart and try extending its capabilities. You may be the owner of a Joomla! VirtueMart web store or a designer working with Joomla! VirtueMart. If you want to customize VirtueMart to unleash its enormous potential and elevate your store to the next level, this book is for you. You must have some experience with VirtueMart and understand its basic features. You also need to know HTML, basic CSS styles, and should be comfortable taking up some challenges in PHP and JavaScript programming.

The book is especially useful to web designers who are comfortable working with graphics, HTML, CSS, and have some ideas of what JavaScript and PHP are all about. To get the most from this book, you should be familiar with administering a VirtueMart web store, well-versed with the basic features, and have a basic understanding of its advanced features such as child products, advanced attribute, custom attribute, and product type. You will find that many interesting extensions will be based on these advanced features.

You must be able to read and write clean HTML and probably know the basic CSS styles. You may not know anything about programming yet but must have a drive to learn. Hacking into VirtueMart can sometimes be simple. But for any extensive and functional hack, it probably will take some effort and time. So you should be prepared for some hard work and endure the dark valleys of testing and debugging. We will introduce ways to help you spot errors along the way. But testing and debugging is still inevitable.

While this book is useful for web designers, we have tried to make the book easy and practical for readers of diverse backgrounds. As Joomla! and VirtueMart are constantly evolving, any customization projects have to bear in mind future compatibility. While there is no absolute way to guarantee 100 percent compatibility with the next version, the examples within this book have been designed to reduce upgrade impact. Throughout the book, we have demonstrated various techniques that help to make the hack upward compatible. Within the exercises, there is no hacking into any VirtueMart core files. We also tried to restrict our changes to as few files and as few places as possible. In order to achieve that, sometimes we may not adhere to the standards that professional developers and designers will follow. For example, we may use inline CSS styles in place of an external stylesheet just to make our changes easier to manage. We will put database logic inside the template file to avoid changes to the core files. All these are not considered best practice by professionals. In these cases, you are definitely free to apply your own expertise to improve the code.

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text are shown as follows: "echo is used to send the value of a string to the output buffer."

A block of code is set as follows:

<?php if (!defined(VM_CUSTOM_CSS)) {
define ('VM_CUSTOM_CSS',1);
?>
<style>
.browseProductContainer {border:1px solid #999;padding:5px;background:#eee;margin:5px;}
</style>
<?php } ?>

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Click on the View button against any order you have made before."

Feedback from our readers is always welcome. Let us know what you think about this book what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.

If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or e-mail <[email protected]>.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.