VirtueMart

h1. Hints for the use of the template system

This page is for users and designers and developers, but since users of the administrator level can also get inflicted with it, we moved it to the user chapter.

The new template system of virtuemart allows fine grained overrides for each category and product. Even the views can have different templates. We did not implement our own template system, it is based upon what is already there. So we have the joomla template system and some methods to overwrite, but this leads to some limitations.

The joomla template system is described here:

* http://docs.joomla.org/Joomla!_1.5_Template_Tutorials_Project

* http://docs.joomla.org/Understanding_Output_Overrides

* http://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core 

* http://docs.joomla.org/Layout_Overrides_in_Joomla_1.6

* http://www.spiralscripts.co.uk/Joomla-Tips/using-template-overriding-with-joomla.html

The virtuemart default shop template is overriding the joomla configurations. You can choose in the configuration the template and layout for the shop, the category and the product view and you can override these values per category and product.

The problem behind this construction is that the joomla template override system does only work for the template loaded by joomla. So when you have the "Rhuk_milkyway" template set as default in joomla, but you use for example the "Beez" template for categories and placed a layout for override in it, then it is not used! Because joomla looks only in the "Rhuk_milkyway" template for layouts.

So you can use a lot different templates, but the layouts must be stored in the template which is the default of joomla.

h1. Hints for designing your own templates

VirtueMart uses javascript to make the shop more dynamic, so it relies on some HTML classes being present to identify certain parts of the page. These classes are already set up in the default views so you can see how it should work.

The product details should be wrapped with the "productdetails" class. This is for the productdetails view, the product module and any other custom modules displaying products. Pre-2.0.8f releases expect the productdetails view to also use the class "productdetails-view"

The add to cart forms should be given the class "product" in the productdetails view, the product module and any other custom modules displaying the add to cart form.

The prices block should be wrapped with the class "product-price" in the productdetails view and the product module.

h1. Hints for how to add a logo for payment and shipment methods

You can add logos for your payment and shipment methods.

Adding logos to your payment or shipment methods is done in 2 steps:

# Uploading the logo in the correct folder

# Selecting the logo in the payment or shipment method

h2. Uploading a logo for payment and shipment methods

The logos must be placed under the following folders:

* *images/stories/virtuemart/payment* for the payment methods,

* *images/stories/virtuemart/shipment* for the shipment methods,

The logos can be uploaded via the Joomla media manager:

For Joomla 1.5, go in *Site* on the menu bar and choose *Media Manager* from the list.

For joomla 2.5, go in *Content*, and then choose  *Media Manager* from the list.

You will see a list of images, and folders that are already in the Media manager.

# Select the folder *stories*, and then *virtuemart*, and then *payment* or *shipment* folder

# Go in the *Upload files* area, and click on *Browse files*

# Select on your computer the logo

# Press *Start upload*

The file will be transfered to the selected folder.

h2. Selecting a logo for payment and shipment

# Go in VirtueMart administration

# Select the *Shop* menu

# Select the *Shipment methods* menu or *Payment methods* menu

# Select the payment or shipment method you want to add a logo

# Select the *configuration* tab

# In the logo parameter, all the images that are in the  *images/stories/virtuemart/payment* for a payment method or *images/stories/virtuemart/shipment* for a shipment are listed. Select the one, you want to have displayed.