Basically, there is an infinite number of ways to customize VirtueMart. This is in fact the beauty of using an open source shopcart system like VirtueMart. As we have seen, extensions to VirtueMart are welcome by the development team themselves. That's why VirtueMart has been built in a way to enable easier customization. Nevertheless, there is a range of complexity in customizing VirtueMart. While there may not be a definite limit on the customization possibilities, whether a VirtueMart customization project is advisable will be tightly coupled to the cost of its implementation. If the cost of customization is more than building a brand new shopcart, for example, there is no point in pursuing the customization.
That being said, there are still lots of customization possibilities that are worthwhile and is within the reach of an average designer who may not be comfortable working with PHP code initially. So let us have a look at the ways we can extend VirtueMart.
Sometimes you just want to change the text that is displayed on a certain page. This is especially the case when you are using VirtueMart in a different language environment. VirtueMart does come with several language files, but the translation may not suit you. And even when your site is totally English, you may still want to replace a text or two to fit your client's or your own shop's specific needs. There are two ways you can do this.
On one hand, you can modify the language file that comes with VirtueMart. This will involve finding the appropriate language file that contains that specific language element you want to change. VirtueMart language files are placed in the languages subdirectory of the VirtueMart administrator directory. The language files are further subdivided into modules, with each language having its own .php file. You should first look into the common subdirectory where language elements used in more than one module are placed. Open the language file in an editor and search for the text you want to change. If you cannot find it in the common subdirectory, you need to look in the individual module directory. For example, if you need to change text on the browse page, then you will look into the shop subdirectory to see if you can locate that language element, since the browse page is controlled by the shop.browse.php file and so it belongs to the shop module. We will demonstrate how this can be done in Exercise 1.2. Customizing language elements is discussed in detail in Chapter 5, Changing the Look of VirtueMart.
In this exercise, we are going to customize two language elements found on the Product Listing page, as shown in the following screenshot:
As an example, we are going to change the text for Browse and Sort by. As we shall see, the Product Listing page is actually processed by the module page shop.browse. So we will expect these language elements to be found in either the shop language file or the common language file. These are the two files we are going to search for these two elements.
1. Open your favorite text editor. Navigate to the VirtueMart administrator root.
2. Open the file
languages/shop/english.php.3. Open the search dialog of the editor and search for the text
BrowseandSort by. You will find the textBrowsein line 21 with an element namePHPSHOP_BROWSE_LBL. Change the text fromBrowsetoProduct List. The textSort by, however, is not found.4. Save the file and upload it to your server.
5. Open the file
languages/common/english.php.6. Open the search dialog of the editor and search for the text
Sort by. You will find the text in line 405 with an element namePHPSHOP_ORDERBY. ChangeSort bytoOrder by.8. Go to the frontend of your site. Browse to any Product Category Listing, and you will see the text changes.
1. In this exercise, we changed the language elements in the
shopmodule. You can apply similar techniques to any other module.2. Sometimes you may have more than one language element that contain the search text. Make sure the element value matches exactly with the search text and is not a substring. Also, the case of the two text elements must also match. In case of doubt, you can test it by trial and error.
If your site is just with a single language, you don't need to bother changing the language file. You can go to the template file and change the element directly. We will be doing this from time-to-time in the exercises that will be presented in later chapters. (See, for example,Chapter 3, Exercise 3.1 and Exercise 3.6)
Sometimes, you may want to add static text somewhere on a certain page. You will be able to do that by determining where the appropriate place is. There are probably various areas where you can insert the text. To maintain backward compatibility, it is advisable to insert the text in a template instead of the VirtueMart page or class file as far as possible. This may not be possible, but it is something worth considering before making any changes.
Sometimes, the text you want to add is dynamic, meaning that the text may be different depending on the specific situation. For example, you want to add a certain text to the browse page depending on the shopper group. Then you will need a PHP if construct to achieve this. We will be doing this in some of our exercises (See, for example, Exercise 3.5 for use of the if construct).
Layout changes are those that involve moving elements around on the page or changing the style of an element. For example, you may want to make the product name look bigger. Or you want to display the price before the product SKU and so on. These are all layout changes that can be easily done once you locate the template file that needs to be modified.
For styling changes, you can either add the CSS style in the template file or modify the theme CSS file. Sometimes you can even change the style by modifying the Joomla! template CSS. Obviously, there are pros and cons for each of these approaches. While considering what to change, you should also think of future compatibility. It may be better to restrict the number of modified files to a minimal, but that also depends on other requirements as well.
Layout changes can also be dynamic. You may want to use one layout under a certain condition and another layout if a different condition applies. You may, for example, want to use one CSS style for products in a certain category and a different CSS style for products in another category. This again will involve PHP coding. We will also be doing some exercises of this kind in later chapters (See, for example, Exercise 3.6).
Frontend behavior changes are changes that involve JavaScript running on user's computer. You may come across a JavaScript that can create a reflection effect for the product image. Adding this kind of behavior is actually pretty straightforward. Usually this is accomplished by putting the JavaScript in the template file and modifying one or two HTML elements. The JavaScript can also be added to the theme.js file or included by other means (See Chapter 5, Changing the Look of VirtueMart, and Chapter 9, Theme Customizations, for details of using JavaScript when making behavior changes).
Another example of behavior changes is changing the Ajax add-to-cart pop-up. Some people find the time that the pop-up appears too short or too long. This can be adjusted in the theme.js file or in the template file (See how this can be done in Exercise 8.2.).
Each of the templates will have a set of available fields that you can use. Sometimes you may want to display the same information in a different format. Examples of this kind of change are the product_availability and product_thumb_image fields. Many magic touches can be done in the template itself without involving changes to the VirtueMart class or page file.
From time to time, you may want to add a data field to your shop. If you sell books, for example, you may want to add fields such as publisher and author. Adding data fields like this is not as simple as it may seem. First, you need to modify the database table, usually through a phpMyAdmin session. Then you will need to modify the class file to accommodate the new fields. You also need to modify the product form used in the backend so that the fields can be displayed and edited there. You will need to add this to the VirtueMart page file to pass it to the template. Finally, you will need to modify the template to actually display the field.
On the other hand, it will be much easier to add a new user field since VirtueMart allows adding/customizing user fields used in the frontend or backend. You should use the Admin/Manage User Fields menu option to update the user fields. (For a detailed discussion about customizing user fields, please see Login/Registration and Shipping Information in Chapter 6, From Shop Basket to Final Checkout.) If you need some detailed control on the user field behavior, this can be accomplished by modifying the class file or page file. In case the user field will need to be included in the order e-mail, the corresponding e-mail template will need to be modified as well.
Adding data fields to other data tables such as product category or order is also possible. The complexity of such kind of customizations will depend on the exact requirements.
Due to the complexity and technical skills needed in adding data, discussion of this type of customization will need to be done in a different book.
The processing logic in a comprehensive shopcart like VirtueMart is definitely very complex. While VirtueMart is already very versatile and can cater for many actual applications, there are still areas that may not fit your specific needs. In that case, you may want to modify the processing logic to make VirtueMart work for you.
For situations like this, the best strategy would be to restrict your modifications to one single module. For example, if you just need changes in payments, you can probably develop your own payment methods. Anyhow, you should note that most processing logic resides in the page file and cannot be changed in a template. And the undertaking may involve complicated programming. So, the most part of this type of customization will be outside the scope of this small book. However, you may still find a few exercises that will involve modification of the page file, especially in Chapter 10, Additional Customization Possibilities. But those modifications definitely will be brief.
Sometimes you may want to develop your own theme, providing very different functionalities and style. Or you could even plan to sell your final design. To make it less intrusive to your user, creating a new theme is probably a good idea. This type of customization is the subject of Chapter 8, VirtueMart Theme Anatomy, and Chapter 9, Theme Customizations.
VirtueMart is an online web store application. It does not provide accounting and customer management functions. Many users wish to make VirtueMart work together with their existing data system seamlessly. In that case, an integration system will need to be built. VirtueMart was intended to have an import/export system for that purpose. But unfortunately, the module is not well-developed and will need lots of effort to make it work.
There are many other types of VirtueMart customizations. We can create new VirtueMart page files to display what we want. For example, we could have created a new page for displaying manufacturers called shop.manufacturer. We can also create a new VirtueMart module called wholesaler to display pages only for a special group of shoppers. We can create new pages like wholesaler.browse, wholesaler.product_detail, and so on under this module. We can create new templates for the new page files and modules according to our needs and imagination.
How to create and integrate these pages with the bigger VirtueMart system, however, will be totally on our own.
Certainly, many real-world projects will be a combination of several of the customization types outlined previously. If you plan to customize VirtueMart involving a few of these areas, you need to have a thorough plan before you start. Otherwise, you may soon find the project becomes too big and is unmanageable.