Joomla! VirtueMart 1.1 Theme and Template Design
上QQ阅读APP看书,第一时间看更新

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.