Customizing VirtueMart

From ThemesWiki

Source Book ISBN 978-1-847196-74-3 Publisher Packt Publishing Author(s) Suhreed Sarkar

[edit] Look and feel configurations in VirtueMart

You can configure some look and feel parameters from within the VirtueMart control panel. The Admin | 'Configuration' screen's Site tab gives you the opportunity to set several parameters for the look and feel, and also allows you to apply your desired theme. The Site tab of the Admin | Configuration screen has two sections: Display and Layout. The former gives you settings for showing or not showing some elements, whereas the latter sets layout options for product listings, product detail pages, and so on. The following screenshot shows both of the sections:

Let us first see the options available in the Display section of the Site tab:

• PDF button: Check this box if you want to show the PDF button for pages in the shop. Note that this PDF button is independent of Joomla!'s configuration for showing/hiding PDF buttons.
  
• Show "Recommend to a Friend" Link?: Check this box to show the Recommend to a friend link on each product page. You should enable this feature so that customers can spread product messages easily. This is also independent of Joomla!'s setting for Send to a friend feature.
  
• Show the "Print View" link?: Check this box to easily print the product pages. Checking this shows the *Print View link on each page and users can see a printer-friendly view of the page and print that page easily.
  
• Show Page Navigation at the top of the Product Listing?: Check this box to display the navigation links on the product listing page.
• Default product sort order: Select a default product sort order from this drop-down list. Available options are Default, Product Name, Price, SKU, and Latest Products.
  
• Available 'Sort-by' fields: Check the options by which the customers will be able to sort the products.
  
• Show the Number of Products?: Check this if you want to show the number of products besides the categories.
  
• "no-image" image: Select an image to be displayed when the product has no image. A list of images in the drop-down list will be shown from the current theme's images folder, that is, ./components/com_virtuemart /themes/default/images.
  
• Show footer: Select this check box to show the VirtueMart footer in the shop.
  

As stated earlier, the Layout section gives you the opportunity to define layouts of the product listing, product details page, and so on. Let us now look into the options available in the Layout section:

• Select the theme for your shop: Select the theme you want to apply to your shop. With the default installation of VirtueMart, only the default theme is available. As you have copied the vm_orange theme to theme's folder, the drop-down list should now also show that name. We will come to the details about applying themes later.
• Default number of products in a row: Specify the number of products to be displayed in a row. Specifying 1 will be a good choice as that can show product in a decent way. Choosing too many to display in a row may affect the product listing page badly.
• Category Template: Specify a browse template for categories. When a user clicks on a category link, products in that category are displayed using this template. Available templates are managed, browse_1, browse_2, browse_3, browse_4, browse_5, and browse_lite_pdf. Use browse_1 when one product will be displayed in a row. The best way is to select managed, this will automatically select an appropriate template based on the configuration of the default number of products to be displayed in a row. We will be looking deeper into these browse pages later and see how to create one.
• FLYPAGE: Flypages are for displaying product details. Select a flypage from this list. This will be the default template for displaying product details.
• Enable Dynamic Thumbnail Resizing: VirtueMart can dynamically resize images to thumbnails upon being uploaded to the server. Select this option if you want to dynamically resize thumbnails. VirtueMart will resize the thumbnail, using the gd extension of PHP, to the height and width specified in the following fields.

Thumbnail Image Width: Specify the width of the resized thumbnail in pixels.
Thumbnail Image Height: Specify the height of the resized thumbnail in pixels.
As we have seen, from the admin panel, we can configure much of VirtueMart store's look and feel. We can further perform additional configurations through themes and customized templates.

[edit] Customizing and applying themes

Themes in VirtueMart are different than Joomla! templates. These themes define how VirtueMart pages will look. By default, there only one theme comes bundled with VirtueMart. However, there are some other themes available for download at https://dev.virtuemart.net/cb/proj/doc.do?doc_id=2079. Let us download some color themes from this site and put them in the ./components/com_virtuemart/themes/ folder. Each theme should be in its own folder and uniquely named. The default theme is named default. If you download vm_orange.zip, then unzip the files inside the ./components/com_virtuemart/themes/vm_orange folder. If you look into the files and subfolder of this theme, you get files and folders like the following:

As you can see, the theme directory, vm_orange, contains some stylesheets, JavaScripts, a theme configuration file, images and templates for different views. The files available in this theme are described below:

Let us now assign the new theme to our VirtueMart store and see the difference it makes. For assigning a new theme, go to the Admin | Configuration screen in the VirtueMart administration panel, and click on the Site tab. In the Layout section, select vm_orange from the Select the theme for your shop drop-down list. Now, click on the Save icon in the toolbar. This will apply the vm_orange theme to our shop with the default settings. For customizing the options for vm_orange theme, again go to the Site tab and click on the Configuration link below the drop-down list. That brings up the Theme Configuration screen:

In the Theme Configuration screen, several parameters for the theme are available and we can control the display and layout of our shop item by configuring these parameters. First comes the Product List Style, from where you can select how the product list will be displayed by using tables, div, or a flat list using table with one product per row. By default, the Product List (no table, div-based) is selected, and for most of the shops, it will be the best choice. Other options are mostly self explanatory. For testing purposes, we will change some of these parameter settings. For example, we select No in the Show Vendor Link, Show Manufacturer Link, and Show Availability Information fields. Now, save this configuration by clicking on the Save icon in the toolbar, and preview the shop. The product detail page will now show like the following screenshot:

Note that the product detail page no longer shows the vendor link, manufacturer link, and availability information. You can revert to the former settings by choosing Yes in for these fields. Then, the above screenshot will look as follows:

For the shop's front-page, we need to configure the last three parameters. Select Yes in the Show featured products in the front-page and Show the latest products in the front-page fields. Then, type 10 in the Number of recent products to display field.

Note that parameters shown in the Theme Configuration screen are theme-specific. Parameters to be shown are determined by the theme.xml file.

[edit] Customizing templates

As we have already seen, VirtueMart uses several templates to display its categories, product listing, and product details. All of these templates are written in plain HTML and PHP. Therefore, you can easily change the templates to suit your needs. In the following sections, we are going to learn about customizing VirtueMart templates.

[edit] Shop front-page

Joomla! has a front-page manager from where you can configure which articles will be displayed on the site's front-page. If you want to configure the articles to be shown on the front-page, go to the Joomla! administration panel, and click on the Front Page Manager icon. That brings the Front Page Manager screen with a list of content items to be displayed in the front-page:

As we can see, from the Front Page Manager we can publish, unpublish, reorder, or remove content items. Also note that from this Front Page Manager, we cannot assign which products will be displayed on the front page. In fact, VirtueMart has no relation with this Front Page Manager. The shop s front-page is defined through a template file in the current theme. If you are using the vm_orange theme, then go to the ./components/com_virtuemart/themes/vm_orange/templates/common folder. The file named shopIndex.tpl.php defines the front-page of the shop. Let us examine this file.

Open the shopIndex.tpl.php file in your text editor and you will find some code blocks. Let us examine those blocks one-by-one:

 <?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) )
 die( 'Direct Access to '.basename(__FILE__).' is not allowed.' );
 ?>

This is a standard declaration to prevent direct access to the file. In all Joomla! 1.5 files, you'll find this kind of declaration at the very beginning. This is to prevent direct access to the file by typing the URL of the file. Next, you will see something like the following:

 
<?php
 defined( 'vmToolTipCalled') or define('vmToolTipCalled', 1);
 echo $vendor_store_desc."<br />";

The lines above are to check whether the VirtueMart tooltip is enabled. If it is not, it will be enabled. Then, the echo statement will print the vendor description. After that, the following lines print the category headings and a list of categories:

 echo "<br />===Product detail page===

Browse pages are for displaying a list of all products in the catalog, or in a category. When you click a product's link on the browse page, the details of the product are displayed. The layout file for displaying a product's details is called flypage.

Like the browse page, you can define store-wide default flypage template, and even specify this for each category. While creating or editing a category, we can specify the '''browse''' page and '''flypage''' for that category in the '''Category Information''' screen.

[[Image:6743_06_25.png|thumb|center]]

From the category flypage, you can choose one flypage for the category. The flypages available in the theme will be shown in the drop-down list (as seen in the above screenshot).

Flypages for a particular theme resides inside the '''templates/product_details''' subfolder. For example, the '''vm_orange''' theme's flypages will be in the '''./components/com_virtuemart/themes/vm_orange/templates/product_details/ '''folder. Let's first try different flypages.

Let us first see how the '''flypage.tpl.php''' file works. Edit a category, say '''Books''', and assign the <code>flypage.tpl</code> template to that. Then, from the shop's frontend, click on the book item. The product's detail page will look like what is shown in the following screenshot:

[[Image:6743_06_26.png|thumb|center]]

This is the upper portion of the page. As you can see, on the left, a product thumbnail image is shown. Then, on the right, there is a product name, manufacturer's name, price, and description. On the top, we see a navigation link, and buttons (PDF, print, and email). After the product description, product type attributes, availability, and add to cart box are all displayed. If there is a product review, it will be displayed at the bottom, followed by recently viewed products, and more categories.

Let us now try this with <code>flypage_images.tpl</code>. This is designed to show the thumbnails of additional images uploaded for the product. Other flypages show link to more images only. With '''flypage_images.tpl''', the product detail page will look like what is shown in the following screenshot:

[[Image:6743_06_27.png|thumb|center]]

Like the browse page, '''flypage_lite_pdf.tpl.php''' is also designed to show a simple layout, convenient for converting to PDF. This simply shows the product name, price, thumbnail image, descriptions, product type attributes, and reviews (if any). It doesn't show an add to cart box or availability information. Use this flypage when you are building a catalog only store. The following is the code for this layout:
<pre>
 <?php
 /* this template must have quirky html,
 because HTML2PDF doesn't fully understand CSS and XHTML */
 if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) )
 die( 'Direct Access to '.basename(__FILE__).
' is not allowed.' ); ?>
 <br><br>
 ===Other page templates===

Templates for other pages in VirtueMart are located in the '''./components/com_virtuemart/ themes/theme_name/templates/pages/''' folder. This folder contains several page templates including templates for the account's index, billing, orders, billing, shop's cart, info page, checkout, and waiting list pages.

For customizing templates, you should also know about some other files on which the templates depend. These files are located in the '''./administrator/components/ com_virtuemart/html/''' folder. For example, '''product.review_form.php''' defines what the product review form will look like. Similarly, '''shop.index.php''' file prepares the variables and sets the template for the shop's front-page. Looking inside the files in this ''' /html''' folder will help you understand how VirtueMart's look and feel works.[http://www.logoinn.com logo design][http://www.logoinn.com logo design] by Kevin Josh 2010

===Product detail page===

Browse pages are for displaying a list of all products in the catalog, or in a category. When you click a product's link on the browse page, the details of the product are displayed. The layout file for displaying a product's details is called flypage.

Like the browse page, you can define store-wide default flypage template, and even specify this for each category. While creating or editing a category, we can specify the '''browse''' page and '''flypage''' for that category in the '''Category Information''' screen.

[[Image:6743_06_25.png|thumb|center]]

From the category flypage, you can choose one flypage for the category. The flypages available in the theme will be shown in the drop-down list (as seen in the above screenshot).

Flypages for a particular theme resides inside the '''templates/product_details''' subfolder. For example, the '''vm_orange''' theme's flypages will be in the '''./components/com_virtuemart/themes/vm_orange/templates/product_details/ '''folder. Let's first try different flypages.

Let us first see how the '''flypage.tpl.php''' file works. Edit a category, say '''Books''', and assign the <code>flypage.tpl</code> template to that. Then, from the shop's frontend, click on the book item. The product's detail page will look like what is shown in the following screenshot:

[[Image:6743_06_26.png|thumb|center]]

This is the upper portion of the page. As you can see, on the left, a product thumbnail image is shown. Then, on the right, there is a product name, manufacturer's name, price, and description. On the top, we see a navigation link, and buttons (PDF, print, and email). After the product description, product type attributes, availability, and add to cart box are all displayed. If there is a product review, it will be displayed at the bottom, followed by recently viewed products, and more categories.

Let us now try this with <code>flypage_images.tpl</code>. This is designed to show the thumbnails of additional images uploaded for the product. Other flypages show link to more images only. With '''flypage_images.tpl''', the product detail page will look like what is shown in the following screenshot:

[[Image:6743_06_27.png|thumb|center]]

Like the browse page, '''flypage_lite_pdf.tpl.php''' is also designed to show a simple layout, convenient for converting to PDF. This simply shows the product name, price, thumbnail image, descriptions, product type attributes, and reviews (if any). It doesn't show an add to cart box or availability information. Use this flypage when you are building a catalog only store. The following is the code for this layout:
<pre>
 <?php
 /* this template must have quirky html,
 because HTML2PDF doesn't fully understand CSS and XHTML */
 if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) )
 die( 'Direct Access to '.basename(__FILE__).
' is not allowed.' ); ?>
 <br><br>
 ===Other page templates===

Templates for other pages in VirtueMart are located in the '''./components/com_virtuemart/ themes/theme_name/templates/pages/''' folder. This folder contains several page templates including templates for the account's index, billing, orders, billing, shop's cart, info page, checkout, and waiting list pages.

For customizing templates, you should also know about some other files on which the templates depend. These files are located in the '''./administrator/components/ com_virtuemart/html/''' folder. For example, '''product.review_form.php''' defines what the product review form will look like. Similarly, '''shop.index.php''' file prepares the variables and sets the template for the shop's front-page. Looking inside the files in this ''' /html''' folder will help you understand how VirtueMart's look and feel works.[http://www.logoinn.com logo design]

===Product listing===

Product listings for categories are shown through browse pages. Browse pages define the layout for showing a single product in the listing. These pages are located in themes, that is, '''./components/com_virtuemart/themes/vm_orange/templates/browse/'''. In the default theme, there are several browse files: '''browse_1.php''', '''browse_2.php''', '''browse_3.php''', '''browse_4.php''', '''browse_5.php''', and '''browse_lite_pdf.php'''. In the '''vm_orange''' theme, there is an additional browse file, '''browse_color.php'''.

Earlier, we saw that we can assign a number of products to be displayed in a row and the browse pages to be used. We have also seen that while setting the number of products in a row, we can select '''managed''' in the '''Category Template''' field to choose the appropriate browse page. For example, if the number of products to be displayed in a row is two, then it will use the '''browse_2.php''' template. Now, we are going to look into the details of these browse page layouts.

Let us first look into '''browse_1.php''' file. This page provides a layout for displaying one product in a row. It shows the product's name, product's price, short description, product thumbnail image, and customer rating. When this layout is used, a single product is displayed as shown in the following screenshot:

[[Image:6743_06_22.png|thumb|center]]

In the screenshot above, blocks are highlighted to show where the variables will be displayed. As you can see, first it shows the product's name, then the price thumbnail image, customer rating, and short description. For each product in the catalog, or a specific category, these blocks will be repeated.

Let us now look inside the code of '''browse_1.php'''. It will look like the following:
 <pre>
 <div class="browseProductContainer">
 <h3 class="browseProductTitle">
 <a title="<?php echo $product_name ?>
" href="<?php echo $product_flypage ?>">
 <?php echo $product_name ?></a>
 </h3>
 <div class="browsePriceContainer">
 <?php echo $product_price ?>
 </div>
 <div class="browseProductImageContainer">
 <script type="text/javascript">//<![CDATA[
  document.write('<a href="javascript:void window.open 
  (\'<?php echo $product_full_image ?>\', \'win2\', \'status=no,toolbar=no,scrollbars=yes,titlebar=no, 
  menubar=no,resizable=yes, width=
  <?php echo $full_image_width ?>, 
  height=<?php echo $full_image_height ?>,
  directories=no,location=no\');">');
  document.write( '<?php echo ps_product:
  :image_tag ($product_thumb_image, 
  'class="browseProductImage" border="0" 
  title="'.$product_name.'" alt="
  '.$product_name .'"' ) ?></a>' );
  //]]>
  </script>
  <noscript>
  <a href="<?php echo $product_full_image ?>
  " target="_blank"
  title="<?php echo $product_name ?>">
  <?php echo ps_product::image_tag($product_thumb_image, 
  'class="browseProductImage" border="0"
   title="'.$product_name.'
  " alt="'.$product_name .'"' ) ?> </a>
  </noscript>
  </div>
  <div class="browseRatingContainer">
  <?php echo $product_rating ?>
  </div>
  <div class="browseProductDescription">
  <?php echo $product_s_desc ?> 
  <a href="<?php echo $product_flypage ?>"
  title="<?php echo $product_details ?>"><br />
  <?php echo $product_details ?>...</a>
  </div>
  <br />
  <span class="browseAddToCartContainer">
  <?php echo $form_addtocart ?>
  </span>
  </div>
  

</code>. These <code>

</code> are positioned using a stylesheet. The variables used here are set by another file: ./administrator/components/com_virtuemart/html/shop.browse.php. This file provides all of the core functions for browsing products in the VirtueMart catalog.

Let us now look into the browse_2.php layout. This provides a layout for displaying two products in a row. When used, the products in a row will be displayed as in the following screenshot:

This layout is created using the following code in the browse_2.php file:

 <div style="width:100%;padding: 0px 3px 3px 3px;">
 <h2>
 <a style="font-size:16px; font-weight:bold;
 " href="<?php echo $product_flypage ?>">
 <?php echo $product_name ?>
 </a>
 </h2>
 <div style="float:left;width:32%" >
 <a href="<?php echo $product_flypage ?>">
 <?php echo ps_product::image_tag( $product_thumb_image, 
 'class="browseProductImage" border="0" title="
 '.$product_name.'" alt="'.$product_name .'"' ) ?>
 </a>
 </div>
  <div style="float:left;width:60%">
  <?php echo $product_s_desc ?><br />
  <a href="<?php echo $product_flypage ?>">
  [<?php echo$product_details ?>...]
  </a>
  </div>
  <br style="clear:both;" />
  <p><?php echo $product_price ?></p>
  <div style="float:left;width:60%">
  <?php echo $product_rating ?>
  </div>
  <div style="float:left;width:32%">
  <?php echo $form_addtocart ?>
  </div>
  <br style="clear:both;" />
  </div>

Other browse files also use these types of layout techniques. However, the exception to this is the browse_lite_pdf.php file, which is used to generate a simple layout that can easily be converted to PDF. This layout shows the products in a row as the following screenshot:

The difference between the former layout and this one is that it does not show any customer ratings. The product's name and thumbnail images are also not linked. However, browse_lite_pdf.php file's layout is different than the other layout files in terms of its code. It uses a table for layout, whereas other browse_*.php files use

and CSS positioning. The following is the code for the browse_lite_pdf.php file:

 <table width="100%">
  <tr>
  <td>
 <?php echo ps_product::image_tag( $product_thumb_image, 
 'class="browseProductImage" border="0" title="
 '.$product_name.'" alt="'.$product_name .'"' ) ?>
  </td>
  <td>
 <h2><?php echo $product_name ?></h2><br>
 <?php echo $product_price ?>
 </td>
  </tr>
   <tr>
 <td colspan="2">
 <?php echo $product_s_desc ?>
 <a href="<?php echo $product_flypage ?>">
 [<?php echo $product_details ?>...]</a>
 </td>
 </tr>
 </table>

As you can see, the layout is done by using a table. It's simple and convenient for producing PDF files. Look into other layout files and observe the differences with this simple, table-based layout.logo design by Kevin Josh 2010

[edit] Product detail page

Browse pages are for displaying a list of all products in the catalog, or in a category. When you click a product's link on the browse page, the details of the product are displayed. The layout file for displaying a product's details is called flypage.

Like the browse page, you can define store-wide default flypage template, and even specify this for each category. While creating or editing a category, we can specify the browse page and flypage for that category in the Category Information screen.

From the category flypage, you can choose one flypage for the category. The flypages available in the theme will be shown in the drop-down list (as seen in the above screenshot).

Flypages for a particular theme resides inside the templates/product_details subfolder. For example, the vm_orange theme's flypages will be in the ./components/com_virtuemart/themes/vm_orange/templates/product_details/ folder. Let's first try different flypages.

Let us first see how the flypage.tpl.php file works. Edit a category, say Books, and assign the <code>flypage.tpl</code> template to that. Then, from the shop's frontend, click on the book item. The product's detail page will look like what is shown in the following screenshot:

This is the upper portion of the page. As you can see, on the left, a product thumbnail image is shown. Then, on the right, there is a product name, manufacturer's name, price, and description. On the top, we see a navigation link, and buttons (PDF, print, and email). After the product description, product type attributes, availability, and add to cart box are all displayed. If there is a product review, it will be displayed at the bottom, followed by recently viewed products, and more categories.

Let us now try this with <code>flypage_images.tpl</code>. This is designed to show the thumbnails of additional images uploaded for the product. Other flypages show link to more images only. With flypage_images.tpl, the product detail page will look like what is shown in the following screenshot:

Like the browse page, flypage_lite_pdf.tpl.php is also designed to show a simple layout, convenient for converting to PDF. This simply shows the product name, price, thumbnail image, descriptions, product type attributes, and reviews (if any). It doesn't show an add to cart box or availability information. Use this flypage when you are building a catalog only store. The following is the code for this layout:

 <?php
 /* this template must have quirky html,
 because HTML2PDF doesn't fully understand CSS and XHTML */
 if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) )
 die( 'Direct Access to '.basename(__FILE__).
' is not allowed.' ); ?>
 <br><br>
 ===Other page templates===

Templates for other pages in VirtueMart are located in the '''./components/com_virtuemart/ themes/theme_name/templates/pages/''' folder. This folder contains several page templates including templates for the account's index, billing, orders, billing, shop's cart, info page, checkout, and waiting list pages.

For customizing templates, you should also know about some other files on which the templates depend. These files are located in the '''./administrator/components/ com_virtuemart/html/''' folder. For example, '''product.review_form.php''' defines what the product review form will look like. Similarly, '''shop.index.php''' file prepares the variables and sets the template for the shop's front-page. Looking inside the files in this ''' /html''' folder will help you understand how VirtueMart's look and feel works.[http://www.logoinn.com logo design]

===Product listing===

Product listings for categories are shown through browse pages. Browse pages define the layout for showing a single product in the listing. These pages are located in themes, that is, '''./components/com_virtuemart/themes/vm_orange/templates/browse/'''. In the default theme, there are several browse files: '''browse_1.php''', '''browse_2.php''', '''browse_3.php''', '''browse_4.php''', '''browse_5.php''', and '''browse_lite_pdf.php'''. In the '''vm_orange''' theme, there is an additional browse file, '''browse_color.php'''.

Earlier, we saw that we can assign a number of products to be displayed in a row and the browse pages to be used. We have also seen that while setting the number of products in a row, we can select '''managed''' in the '''Category Template''' field to choose the appropriate browse page. For example, if the number of products to be displayed in a row is two, then it will use the '''browse_2.php''' template. Now, we are going to look into the details of these browse page layouts.

Let us first look into '''browse_1.php''' file. This page provides a layout for displaying one product in a row. It shows the product's name, product's price, short description, product thumbnail image, and customer rating. When this layout is used, a single product is displayed as shown in the following screenshot:

[[Image:6743_06_22.png|thumb|center]]

In the screenshot above, blocks are highlighted to show where the variables will be displayed. As you can see, first it shows the product's name, then the price thumbnail image, customer rating, and short description. For each product in the catalog, or a specific category, these blocks will be repeated.

Let us now look inside the code of '''browse_1.php'''. It will look like the following:
 <pre>
 <div class="browseProductContainer">
 <h3 class="browseProductTitle">
 <a title="<?php echo $product_name ?>
" href="<?php echo $product_flypage ?>">
 <?php echo $product_name ?></a>
 </h3>
 <div class="browsePriceContainer">
 <?php echo $product_price ?>
 </div>
 <div class="browseProductImageContainer">
 <script type="text/javascript">//<![CDATA[
  document.write('<a href="javascript:void window.open 
  (\'<?php echo $product_full_image ?>\', \'win2\', \'status=no,toolbar=no,scrollbars=yes,titlebar=no, 
  menubar=no,resizable=yes, width=
  <?php echo $full_image_width ?>, 
  height=<?php echo $full_image_height ?>,
  directories=no,location=no\');">');
  document.write( '<?php echo ps_product:
  :image_tag ($product_thumb_image, 
  'class="browseProductImage" border="0" 
  title="'.$product_name.'" alt="
  '.$product_name .'"' ) ?></a>' );
  //]]>
  </script>
  <noscript>
  <a href="<?php echo $product_full_image ?>
  " target="_blank"
  title="<?php echo $product_name ?>">
  <?php echo ps_product::image_tag($product_thumb_image, 
  'class="browseProductImage" border="0"
   title="'.$product_name.'
  " alt="'.$product_name .'"' ) ?> </a>
  </noscript>
  </div>
  <div class="browseRatingContainer">
  <?php echo $product_rating ?>
  </div>
  <div class="browseProductDescription">
  <?php echo $product_s_desc ?> 
  <a href="<?php echo $product_flypage ?>"
  title="<?php echo $product_details ?>"><br />
  <?php echo $product_details ?>...</a>
  </div>
  <br />
  <span class="browseAddToCartContainer">
  <?php echo $form_addtocart ?>
  </span>
  </div>
  

As we can see from the code above, the variables are printed inside several <code>

</code>. These <code>

</code> are positioned using a stylesheet. The variables used here are set by another file: ./administrator/components/com_virtuemart/html/shop.browse.php. This file provides all of the core functions for browsing products in the VirtueMart catalog.

Let us now look into the browse_2.php layout. This provides a layout for displaying two products in a row. When used, the products in a row will be displayed as in the following screenshot:

This layout is created using the following code in the browse_2.php file:

 <div style="width:100%;padding: 0px 3px 3px 3px;">
 <h2>
 <a style="font-size:16px; font-weight:bold;
 " href="<?php echo $product_flypage ?>">
 <?php echo $product_name ?>
 </a>
 </h2>
 <div style="float:left;width:32%" >
 <a href="<?php echo $product_flypage ?>">
 <?php echo ps_product::image_tag( $product_thumb_image, 
 'class="browseProductImage" border="0" title="
 '.$product_name.'" alt="'.$product_name .'"' ) ?>
 </a>
 </div>
  <div style="float:left;width:60%">
  <?php echo $product_s_desc ?><br />
  <a href="<?php echo $product_flypage ?>">
  [<?php echo$product_details ?>...]
  </a>
  </div>
  <br style="clear:both;" />
  <p><?php echo $product_price ?></p>
  <div style="float:left;width:60%">
  <?php echo $product_rating ?>
  </div>
  <div style="float:left;width:32%">
  <?php echo $form_addtocart ?>
  </div>
  <br style="clear:both;" />
  </div>

Other browse files also use these types of layout techniques. However, the exception to this is the browse_lite_pdf.php file, which is used to generate a simple layout that can easily be converted to PDF. This layout shows the products in a row as the following screenshot:

The difference between the former layout and this one is that it does not show any customer ratings. The product's name and thumbnail images are also not linked. However, browse_lite_pdf.php file's layout is different than the other layout files in terms of its code. It uses a table for layout, whereas other browse_*.php files use

and CSS positioning. The following is the code for the browse_lite_pdf.php file:

 <table width="100%">
  <tr>
  <td>
 <?php echo ps_product::image_tag( $product_thumb_image, 
 'class="browseProductImage" border="0" title="
 '.$product_name.'" alt="'.$product_name .'"' ) ?>
  </td>
  <td>
 <h2><?php echo $product_name ?></h2><br>
 <?php echo $product_price ?>
 </td>
  </tr>
   <tr>
 <td colspan="2">
 <?php echo $product_s_desc ?>
 <a href="<?php echo $product_flypage ?>">
 [<?php echo $product_details ?>...]</a>
 </td>
 </tr>
 </table>

As you can see, the layout is done by using a table. It's simple and convenient for producing PDF files. Look into other layout files and observe the differences with this simple, table-based layout.

[edit] Product detail page

Browse pages are for displaying a list of all products in the catalog, or in a category. When you click a product's link on the browse page, the details of the product are displayed. The layout file for displaying a product's details is called flypage.

Like the browse page, you can define store-wide default flypage template, and even specify this for each category. While creating or editing a category, we can specify the browse page and flypage for that category in the Category Information screen.

From the category flypage, you can choose one flypage for the category. The flypages available in the theme will be shown in the drop-down list (as seen in the above screenshot).

Flypages for a particular theme resides inside the templates/product_details subfolder. For example, the vm_orange theme's flypages will be in the ./components/com_virtuemart/themes/vm_orange/templates/product_details/ folder. Let's first try different flypages.

Let us first see how the flypage.tpl.php file works. Edit a category, say Books, and assign the <code>flypage.tpl</code> template to that. Then, from the shop's frontend, click on the book item. The product's detail page will look like what is shown in the following screenshot:

This is the upper portion of the page. As you can see, on the left, a product thumbnail image is shown. Then, on the right, there is a product name, manufacturer's name, price, and description. On the top, we see a navigation link, and buttons (PDF, print, and email). After the product description, product type attributes, availability, and add to cart box are all displayed. If there is a product review, it will be displayed at the bottom, followed by recently viewed products, and more categories.

Let us now try this with <code>flypage_images.tpl</code>. This is designed to show the thumbnails of additional images uploaded for the product. Other flypages show link to more images only. With flypage_images.tpl, the product detail page will look like what is shown in the following screenshot:

Like the browse page, flypage_lite_pdf.tpl.php is also designed to show a simple layout, convenient for converting to PDF. This simply shows the product name, price, thumbnail image, descriptions, product type attributes, and reviews (if any). It doesn't show an add to cart box or availability information. Use this flypage when you are building a catalog only store. The following is the code for this layout:

 <?php
 /* this template must have quirky html,
 because HTML2PDF doesn't fully understand CSS and XHTML */
 if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) )
 die( 'Direct Access to '.basename(__FILE__).
' is not allowed.' ); ?>
 <br><br>
 ===Other page templates===

Templates for other pages in VirtueMart are located in the '''./components/com_virtuemart/ themes/theme_name/templates/pages/''' folder. This folder contains several page templates including templates for the account's index, billing, orders, billing, shop's cart, info page, checkout, and waiting list pages.

For customizing templates, you should also know about some other files on which the templates depend. These files are located in the '''./administrator/components/ com_virtuemart/html/''' folder. For example, '''product.review_form.php''' defines what the product review form will look like. Similarly, '''shop.index.php''' file prepares the variables and sets the template for the shop's front-page. Looking inside the files in this ''' /html''' folder will help you understand how VirtueMart's look and feel works.[http://www.logoinn.com logo design]

Executive Editor Sean Lopez own  : [http://www.natural-seo.com/ '''SEO Company'''] and provider of [http://www.natural-seo.com/ '''Link Building Services'''] and [http://www.natural-seo.com/ '''SEO Services''']

And Like [http://www.costumesupercenter.com/ '''Costumes'''] and [http://www.costumesupercenter.com/ '''Halloween Costumes''']

And Like [http://www.globalinformationnetworkbonuses.com/ '''The Global Information Network'''] and [http://www.globalinformationnetworkbonuses.com/ '''Global Information Network''']