34,79 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
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.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 441
Veröffentlichungsjahr: 2011
Ähnliche
Table of Contents
Joomla! VirtueMart 1.1 Theme and Template Design
Joomla! VirtueMart 1.1 Theme and Template Design
Copyright © 2011 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: May 2011
Production Reference: 1190511
Published by Packt Publishing Ltd.
32 Lincoln Road
Olton
Birmingham, B27 6PA, UK.
ISBN 978-1-849514-54-5
www.packtpub.com
Cover Image by Charwak A (<[email protected]>)
Credits
Author
Joseph Kwan
Reviewer
Nicholas Rhodes
Acquisition Editor
Usha Iyer
Development Editor
Meeta Rajani
Technical Editor
Manasi Poonthottam
Copy Editor
Leonard D'Silva
Project Coordinator
Srimoyee Ghoshal
Proofreader
Kelly Hutchinson
Indexer
Tejal Daruwale
Production Coordinator
Adline Swetha Jesuthas
Cover Work
Adline Swetha Jesuthas
About the Author
Joseph Kwan has been a professional programmer for 12 years. He has thorough understanding of all major web technologies including HTML, XML, CSS, XSL, PHP, ASP, .NET, JS, Ajax, Apache, MySQL, MSSQL, and so on, on both Linux and Windows systems.
In the past five years or so, he has specialized himself in Joomla!/VirtueMart. Besides customizing/building many Joomla! components and modules, Joseph is also considered as one of the few VirtueMart experts who know the system from front to back. He is highly regarded in the VirtueMart community and is renowned for building robust and quality extensions to Joomla!/VirtueMart. Joseph is also very active in the forum. He works in Burnaby, BC Canada.
I would like to thank all the people at Packt Publishing who made this book possible, especially thankful for the advice of Usha Iyer and Meeta Rajani.
I am also greatly indebted to my wife Susan, and also the whole family, for allowing me to write this book on my already hectic life.
About the Reviewer
Nicholas Rhodes owns and operates Asgard Development. His company provides a wide range of web development services including content management systems and custom-designed solutions. He has been a web developer for six years and has been running his own business for two years. He graduated from Thiel College with a Bachelor's Degree in Computer Science. His content management skillset includes Joomla!, Drupal, and WordPress. He works primarily with PHP, MySql, HTML, CSS, and JavaScript and has worked with Visual Basic, C++, ColdFusion, and other languages in the past.
Nicholas is a co-founder of the NEO Technical Co-op based in northeastern Ohio and northwestern Pennsylvania, USA. He enjoys working with non-profit and education based organizations. In his free time, he has donated several websites to libraries and other non-profit organizations. When not sitting at his computer, he enjoys hiking, biking, kayaking, and traveling.
www.PacktPub.com
Support files, eBooks, discount offers and more
You might want to visit www.PacktPub.com for support files and downloads related to your book.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at <[email protected]> for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
http://PacktLib.PacktPub.com
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books.
Why Subscribe?
Free Access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access.
Preface
Since you picked this book, the odds will be that you are already familiar with Joomla! VirtueMart. You will agree that this open source e-commerce solution is definitely amazing and feature-rich. That's why you want to stick with it. However, you still find there are some things here and there that don't quite fit your requirements. So you want to hack into the files to customize them to make them work for you. The main purpose of writing this book is to help you do things like that!
VirtueMart is a feature-rich e-commerce component that extends Joomla!. There are many complexities inside the package and also lots of customization possibilities. And because the complexities and documentation are not that easy to understand, hacking into VirtueMart can be a steep learning curve. Simply customizing the templates, which are meant for modifications, may not be easy for some readers. Working on any sizeable project can quickly turn into a nightmare. The purpose of this little book is to unravel the secrets of themes and templates in order to get you started with your customization project.
Before you roll up your sleeves and start plunging into the real stuff, there are a few important things that we should discuss. This is what the introduction is for.
What this book covers
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.
Note
This appendix is not present in the book but is available as a free download from http://www.packtpub.com/sites/default/files/downloads/Appendix.pdf.
What you need for this book
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.
Joomla! VirtueMart versions
You probably already have a Joomla! VirtueMart website. But chances are your installation may not be the latest version. Actually, during the course of writing this book, Joomla! has already gone through several updates and VirtueMart jumped from Version 1.1.4 to 1.1.8. So you need to be sure of the version that this book is based on and whether it will be compatible with your installation, and if not, how many differences there will be.
As I wrote this book, I prepared and tested my code in a web server running Linux and Apache. The Joomla! version is 1.5.20 and the VirtueMart version is 1.1.5. The current version for Joomla! at the time of writing this introduction is 1.5.23 and VirtueMart 1.1.8. So this is not too much different from the one I have been using. Actually, the Joomla! version should not matter so long as it is 1.5.x. If by any chance you are still working with 1.0.x versions, you may encounter some problems in working with some of the exercises. But the problems are not insurmountable if your VirtueMart version is up to date.
On the other hand, most of the discussions in this book will apply to VirtueMart 1.1.x. So even if you are using VirtueMart 1.1.3 or older, this book is still useful. You will find the line numbers indicated here significantly differ from your copy but you should still be able to locate the code. VirtueMart introduced a theme class system as from version 1.1.4. So if you are using earlier versions, you will not be able to benefit from the theme class customization which slowly becomes an important aspect in developing a custom theme.
In case you are still using VirtueMart 1.0.x, the main principles of customizing templates presented in this book may still apply. But there are already lots of changes. Even the directory structure has been revised and so you may have a hard time locating the file you need. Also, VirtueMart theme is a brand new concept in version 1.1 onwards. So unless you are a seasoned developer, you may not find much use of the material in this book for 1.0.x version.
Finally, I should mention this in case your VirtueMart is installed over a mambo CMS system. VirtueMart 1.1 can run in mambo. So you will be able to run many of the exercises in this book. But there are still times when you will find the code does not work in mambo.
Basic Joomla! VirtueMart concepts you will need to know
In order to follow the discussion in this book, you should be familiar with some basic Joomla! and VirtueMart concepts. Other than the basic concepts of menu, pathway, products, categories, shopcart, checkout, order e-mail, and so on, there are a few concepts that we need to emphasize as they may be new to some readers.
Joomla! components, modules, plugins, and templates
Joomla! is a modularized content management system. That means each web page displayed by Joomla! is made up of several blocks. All except the main block are called modules. The main block is called the component (which normally will occupy the major proportion of a web page). The layout of the modules and component is determined by the template. (The template will divide the web page into positions. The concept of position is not related to the major subject of this book and so we will not go into its detail here.) Joomla! plugins are small programs that help to modify the text or behavior of Joomla!.
VirtueMart modules, themes, and templates
As we all know, VirtueMart is a webstore application that lives within the Joomla! framework. VirtueMart itself contains several packages. The major package is of course the VirtueMart component which will display content in the main area of a Joomla! site. Most of the time when we use the term VirtueMart, we are referring to this VirtueMart component. However, there are also other smaller packages in VirtueMart that will display the shop content as Joomla! modules. The vm_product_categories module, for example, will display all the categories of VirtueMart in a sidebar. This Joomla! module can display in a VirtueMart page (that is, a page with the VirtueMart component showing in the main area) or any other pages, though the content can differ.
VirtueMart itself is a very complex application. It has its own display engine, layout variations to cater for different site needs, and language element system that supports multiple languages. Unfortunately, VirtueMart used the term modules and templates differently from Joomla!. And we must be careful not to confuse VirtueMart modules with Joomla! modules and VirtueMart templates and Joomla! templates.
The content displayed by VirtueMart in the component area has many different possibilities. Each possibility is called a page. To make them easier to manage, VirtueMart organized these pages into modules. There are only three frontend modules: shop, checkout, and account. The shop module controls the display of the product catalog. The checkout module controls the checkout process and the account module provides management functions for logged in users. In addition to these frontend modules, there are many other backend modules. However, backend modules are not the major concern in this book as themes and templates only relate to the frontend display. As you can see, VirtueMart modules are very different from Joomla! modules. So you must be careful to distinguish them.
VirtueMart groups the display style of the frontend in themes. Each theme contains a set of templates, Javascript, CSS stylesheets, and other building blocks. The most prominent building block of a theme is certainly the templates. The VirtueMart templates are used to control the display and layout of individual frontend pages such as the product listing page. Please note that a VirtueMart template will only control the component area of a Joomla! page (and sometimes a Joomla! module that displays VirtueMart content, as we shall see in Chapter 7, VirtueMart Templates and Joomla! Modules). A Joomla! template is a whole set of files that control the display and layout of all Joomla! pages. A VirtueMart template, in contrast, is a single file that controls the display and layout of the VirtueMart component area or often just part of that area. So again, do not confuse Joomla! templates and VirtueMart templates.
Child products, advanced attribute, custom attribute, and product type
VirtueMart has several advanced features that you may or may not have used before. However, as we work along theme and template customization, these features will come up from time to time. So you must at least have a rough idea of what they are and whether you will need to use them.
Many products can have varieties such as color, size, or other options. Depending on the actual requirements, there can be a number of ways to implement that in VirtueMart. Child products, advanced attribute, custom attribute, and product type are different ways to provide for this kind of function. In case you are not sure what they are and what the differences between them are, you need to do some research on this before you can understand the exercises that work with them. The knowledge of those features will be assumed for the purpose of this book.
Who this book is for
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.
Conventions
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:
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."
Note
Warnings or important notes appear in a box like this.
Tip
Tips and tricks appear like this.
Reader feedback
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.
Customer support
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.
Downloading the example code for this book
You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
Questions
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.
Chapter 1. The VirtueMart Engine
In this chapter, we 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.
Briefly, in this chapter, we will cover:
Navigating through the Joomla!/VirtueMart directories
You should have a Joomla! and VirtueMart e-commerce site installed somewhere to follow through the rest of the book. If not, you should now install one first before reading on. From this point onward, we will assume that you can access a Joomla! VirtueMart site and can freely browse its content, either on your local computer using the file manager of your operating system or in a web server somewhere using an FTP client program. To work on the exercises, you should also be able to edit each of the files.
OK. Let's start our study by navigating through the Joomla! directories. If you look at the root of your Joomla! site, you will be amazed how large the Joomla! project is. There are totally close to 5,000 files under some 350 directories! It would be difficult to find your way through this vast structure of files, if there are no hints at all. Fortunately, Joomla! has a very good directory structure and will be easy to follow once you know its basic organization. Knowing your way through this vast structure is very important when embarking on any VirtueMart customization project of considerable size. The good news is that usually we only need to know a very small fraction of those 350 directories and 5,000 files, in particular, within the scope of this little book.
In the Joomla! root, the most important directories we need to know are the administrator, components, modules, and plugins directories (This does not mean that the other directories are not important. We highlight these few directories just because they are the directories we will reference from time to-time in this book) You will probably recognize that the last three of these shortlisted directories correspond to the three major extension types of Joomla! So within these directories, we will expect to see a series of subdirectories, each of which corresponds to an extension installed in the Joomla! framework. This is exactly the case, except for the plugins where the directories are arranged in terms of their type instead of their source.
Let's take a closer look at one of the most important components that comes with Joomla!. Navigate to the components directory and open the subdirectory com_content. The com_content component is the one that manages articles we created in Joomla!. You have probably been using a lot of this component. Within this directory, you will find a number of files and a few subdirectories. We notice there is a file named controller.php and two subdirectories named models and views. We will have more to say on these in a moment.
Let's move back to the root directory and take a look at the last important directory mentioned above. This administrator directory mimics the root directory in many respects. We see that most of the subdirectories we found in the root have a corresponding subdirectory within the administrator directory. For example, we find subdirectories named components and modules within the administrator as well. As we know, there are two main sections of a Joomla! website, also known as the frontend and the backend. The root directory and administrator directory are respectively the location where the frontend and backend files are located. While this dividing line is not rigid, we can use this as a guide when we want to locate a frontend or backend file. Since both the root and the administrator directories contain a subdirectory called components, to avoid ambiguity, we will refer to them as the root components and administrator components directory, respectively.
Now, let's work our way a little bit down the directory tree to see how VirtueMart fits into this framework. Within the root components directory, you will see a subdirectory called com_virtuemart. Yes, this is the location where you can find all the files used by VirtueMart for the frontend. Under the com_virtuemart directory, among some other files and subdirectories, you will notice a themes subdirectory. You will find each of the VirtueMart themes you have installed there. The themes directory is the major work area throughout this book. From now on, we will refer to the com_virtuemart directory under the root components directory as the root VirtueMart directory or the frontend VirtueMart directory.
Within the administrator components directory, there is also a subdirectory called com_virtuemart where the backend VirtueMart files are located. Under this main directory, there are four subdirectories named as classes, html, languages, and sql. Obviously, these directories will contain, respectively, the class files, HTML files, language files, and SQL (also known as database) files. Actually, the classes and html directories have a deeper meaning than their names suggest, as we shall see in a moment.
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.
Models
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.
Views
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.
