Project

General

Profile

Hints for the use of the template system » History » Version 14

Matt Lewis-Garner, 08/08/2012 01:15 PM

1 1 Max Milbers
h1. Hints for the use of the template system
2
3 2 Francesco Abeni
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.
4 1 Max Milbers
5
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.
6
7 3 Max Milbers
The joomla template system is described here:
8 1 Max Milbers
* http://docs.joomla.org/Joomla!_1.5_Template_Tutorials_Project
9 6 Max Milbers
* http://docs.joomla.org/Understanding_Output_Overrides
10 5 Max Milbers
* http://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core 
11 4 Max Milbers
* http://docs.joomla.org/Layout_Overrides_in_Joomla_1.6
12 6 Max Milbers
* http://www.spiralscripts.co.uk/Joomla-Tips/using-template-overriding-with-joomla.html
13 3 Max Milbers
14 7 Valérie Isaksen
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.
15 1 Max Milbers
16 2 Francesco Abeni
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.
17 1 Max Milbers
18
So you can use a lot different templates, but the layouts must be stored in the template which is the default of joomla.
19 8 Valérie Isaksen
20 14 Matt Lewis-Garner
h1. Hints for designing your own templates
21
22
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.
23
24
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"
25
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.
26
The prices block should be wrapped with the class "product-price" in the productdetails view and the product module.
27
28 10 Valérie Isaksen
h1. Hints for how to add a logo for payment and shipment methods
29 9 Valérie Isaksen
30 8 Valérie Isaksen
You can add logos for your payment and shipment methods.
31
Adding logos to your payment or shipment methods is done in 2 steps:
32 12 Valérie Isaksen
# Uploading the logo in the correct folder
33
# Selecting the logo in the payment or shipment method
34 8 Valérie Isaksen
35 11 Valérie Isaksen
h2. Uploading a logo for payment and shipment methods
36 9 Valérie Isaksen
37 8 Valérie Isaksen
The logos must be placed under the following folders:
38
* *images/stories/virtuemart/payment* for the payment methods,
39 11 Valérie Isaksen
* *images/stories/virtuemart/shipment* for the shipment methods,
40 8 Valérie Isaksen
41
The logos can be uploaded via the Joomla media manager:
42
43 11 Valérie Isaksen
For Joomla 1.5, go in *Site* on the menu bar and choose *Media Manager* from the list.
44
For joomla 2.5, go in *Content*, and then choose  *Media Manager* from the list.
45 8 Valérie Isaksen
46
You will see a list of images, and folders that are already in the Media manager.
47
# Select the folder *stories*, and then *virtuemart*, and then *payment* or *shipment* folder
48
# Go in the *Upload files* area, and click on *Browse files*
49
# Select on your computer the logo
50
# Press *Start upload*
51
The file will be transfered to the selected folder.
52
53
h2. Selecting a logo for payment and shipment
54 1 Max Milbers
55 10 Valérie Isaksen
# Go in VirtueMart administration
56
# Select the *Shop* menu
57
# Select the *Shipment methods* menu or *Payment methods* menu
58
# Select the payment or shipment method you want to add a logo
59
# Select the *configuration* tab
60 13 Valérie Isaksen
# 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.