首页 > Joomla > Joomla中自定义VirtueMart模板

Joomla中自定义VirtueMart模板

2009年5月22日

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:

 virtuemart-display-and-layout

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.
At present, PDF documents generated by VirtueMart do not include product images. Instead, they show some garbage characters in place of product image.

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.

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:

vm_orange-the-theme-directory
vm_orange-the-theme-directory

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:

Directory/file Role
1
theme.php
This file acts as the main controller for the theme and includes functions and stylesheets for the theme.
1
theme.config.php

 

This is the configuration file for the theme. In fact, this file sets the initial configuration of some display and layout variables. 
1
theme.css
This is the main stylesheet for the theme. The theme s look and feel are mostly controlled by this stylesheet. 
1
theme.js

 

This is the main script file for the theme. It includes JavaScript functions required by the theme. These functions are mainly for dynamic actions and AJAX requests.
1
theme.xml
This file contains theme-specific configuration parameters and additional information about the theme.
1
admin.css
This is the main stylesheet for the VirtueMart administration panel.
1
/images
This directory contains theme-specific images. For example, the vm_orange theme contains orange colored buttons and icons in this folder.
1
/templates
This directory contains templates inside several sub-directories: basket, browse, common, checkout, pages, order_emails, and product_details.

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:

virtuemart-theme-settings 

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:

virtuemart-the-product-detail-page-1

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:

virtuemart-the-product-detail-page-2

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

1
theme.xml

file.

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.

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:

 joomla-front-page-manager

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

1
echo

statement will print the vendor description. After that, the following lines print the category headings and a list of categories:

 echo "<br /><h4>".$VM_LANG->_('PHPSHOP_CATEGORIES')."</h4>"; echo $categories; ?>

Once the categories are displayed, next comes the code to show the recently viewed products. We have seen that we can configure how many recently viewed products will be displayed. If you don’t want to show the recently viewed products, you can simply disable it from the Theme Settings screen by typing 0 in the Number of Recent product to Display field. If you want to show the recently viewed products list at the bottom, cut the following block of code and paste it at a place where you want to display the list:

 <div class="vmRecent"> <?php echo $recent_products; ?> </div>

The following code block is to show the featured products. First, it checks whether the store is configured to show the featured products or not. If it is configured to display featured products, (value is 1) the featured products will be displayed by calling the

1
$ps_product-&gt;featuredProducts()

function. Note that this function takes three parameters:

1
random (boolean)

,

1
no_of_products (integer)

,

1
category_based (boolean)

. You may want to change these parameters, for example, for showing featured products from a specific category. From the frontend of the Theme Configuration screen, you can only enable or disable the display of featured products. If you want to change the number of featured products to be displayed, you must specify that number in the highlighted line below:

 <?php // Show Featured Products if( $this->get_cfg( 'showFeatured', 1 )) { /* featuredproducts(random, no_of_products,category_based) no_of_products 0 = all else numeric amount edit featuredproduct.tpl.php to edit layout */ echo $ps_product->featuredProducts(true,10,false); }

The following code block shows the latest products. First, it checks the configuration for showing the latest products. If it is configured to display, that is, if the value is

1
1

, the

1
ps_product::latestProducts()

function is called. It has four parameters. By setting the third parameter to

1
true

, you can show the latest product in the current month only:

 // Show Latest Products if( $this->get_cfg( 'showlatest', 1 )) { /* latestproducts(random, no_of_products,month_based,category_based) no_of_products 0 = all else numeric amount edit latestproduct.tpl.php to edit layout */ ps_product::latestProducts(true,10,false,false); } ?>

As indicated in the code block above, you can edit the layout for displaying the featured and latest products by editing featuredproduct.tpl.php and latestproduct.tpl.php respectively. We will be looking into these shortly.

As of this writing, there are some bugs in VirtueMart regarding showing the latest products. First, there is no file named latestproduct.tpl.php, and in ps_product.php file, actions for the

1
latestProducts()

function are not defined. For these reasons, you don’t see the latest products on the front-page, unless you use the VirtueMart Latest Products module.

Let us now look into the featuredproduct.tpl.php file. After opening it in your text editor, you can see its structure. First, it checks if the $featured_products variable is empty. If it is not empty, only then it will loop through the $featured_products array and write other variables, that is,

1
product_name

,

1
product_price

,

1
product_thumb_image

, and so on. The following is a code fragment which displays the information about the featured product:

<a title="<?php echo $featured["product_name"] ?>" href="<?php $sess->purl (URL."index.php?option=com_virtuemart& page=shop.product_details& flypage=".$featured["flypage"]. "&product_id=". $featured["product_id"]) ?>"> <h4><?php echo $featured["product_name"] ?></h4></a> <?php echo $featured['product_price'] ?><br /> <?php if ( $featured["product_thumb"] ) { ?> <a title="<?php echo $featured["product_name"] ?>" href="<?php $sess->purl (URL."index.php?option=com_virtuemart& page=shop.product_details& flypage=".$featured["flypage"]."& product_id=". $featured["product_id"]) ?>"> <?php echo ps_product: :image_tag( $featured["product_thumb"], "class=\"browseProductImage\" border=\"0\" alt=\" ".$featured["product_name"]."\"");?> </a><br /><br/> <?php }?> <?php echo $featured['product_s_desc'] ?> <br /> <?php echo $featured['form_addtocart'] ?>

As we see from the code snippet above, the featured product template shows the product’s name as hyperlink, then it shows the product’s price. If the product has a thumbnail image, it shows that thumbnail linking to a full image. After that, it shows the product’s short description, and shows a form for adding a product to cart. The variables we get for use on this template are from the

1
ps_product::featuredProducts()

function.

If you don’t want to show any information, you can just delete, or comment out (using

1
/*

before and

1
*/

after) the line containing that variable. For example, in the featured product list, we don’t wish to show a short description. Therefore, just delete the

1
&lt;?php echo $featured['product_s_desc'] ?&gt;

line. You may also rearrange the order in which the information is displayed.

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:

virtuemart-browse_1php-screenshot

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:

 <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>. 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:

virtuemart-browse_2php-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:

virtuemart-browse_lite_pdfphp-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.

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.

virtuemart-category-information

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:

virtuemart-flypagetplphp-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:

virtuemart-flypage_imagestpl-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> <h1><?php echo $product_name ?></h1> <br><br> <table width=100%> <tr><td width=50%><br><?php echo $product_price ?> </td> <td width=50%><?php echo $product_image ?> </td> </tr> </table> <?php echo $product_description ?> <?php echo $product_type ?> <table width=100%> <tr><td><?php echo $vendor_link ?></td></tr> </table> <table> <tr><td> <?php echo $product_reviews ?> </td></tr> </table>

As we can see, this layout is made of multiple tables. This type of HTML is used so that the HTML2PDF library can convert this to a PDF.

Another available flypage is garden_ flypage.tpl.php. This is similar to flypage.tpl.php, but shows links to additional product images just after the main product image.

Let us now build a new flypage to show the product details as we want. In the vm_orange/templates/products_details folder, create a new file named flypage_simple.tpl.php. Type the following code in this file and save it:

<?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' ); ?> <?php echo $buttons_header // The PDF, Email and Print buttons ?> <?php if( $this->get_cfg( 'showPathway' )) { echo "<div class=\"pathway\">$navigation_pathway</div>"; } ?> <br/> <h1> <?php echo $product_name ?> <?php echo $edit_link ?> </h1> <div style="float:left;margin:5px;"> <?php echo $product_image ?><br/><br/> <?php echo $more_images ?> </div> <?php echo $manufacturer_link ?><br /> <?php echo $product_price ?><br /> <?php echo $product_packaging ?><br /> <hr/> <div style="float:right;width:35%; border: 1px solid; margin:5px"> <div style="text-align: center;"> <?php echo $vendor_link ?><br /> </div> <?php echo $product_availability ?> <br /> <?php echo $addtocart ?> </div> <?php echo $product_description ?> <span style="font-style: italic;"> <?php echo $file_list ?> </span> <?php echo $product_type ?> <hr /> <?php echo $product_reviews ?> <?php echo $product_reviewform ?><br /> <?php echo $related_products ?><br /> <?php echo $navigation_childlist ?> <br style="clear:both"/> <?php if( !empty( $recent_products )) { ?> <div class="vmRecent"> <?php echo $recent_products; ?> </div> <?php } ?>

The code block above is quite straight forward. We have not used any table for the layout. Instead, we used some <code> </code> elements, and positioned those using CSS declarations. The layout

above, when applied, will be shown as seen in the following screenshot:

virtuemart-flypage_simpletplphp-screenshot

In our new flypage, we first see the product’s name, manufacturer’s name, and the product prices are displayed. Then, a product thumbnail image is displayed and is left aligned, followed by the vendor link, product availability, and an add to cart box. All of these are kept in a <code> </code> element, and that <code> </code> is floated to the right. This <code> </code> is followed by the product description, product type attributes, customer reviews, related products, more categories, and recently viewed products.

For a better understanding on how these templates work, look inside the includes subfolder. In this subfolder, you’ll see several .php files, which are used to display add to cart box.

Basket templates

Templates for showing the items in a basket are located in the <code>./components/vm_virtuemart/themes/vm_orange/templates/basket</code>/ folder. There are two types of templates: one for B2B (Business to Business) and another for B2C (Business to Customer). Files available in this folder, and their functions, are shown here:

File Description
basket_b2b.html.php This template is for showing items in the basket for B2B purchases. Purchases are considered B2B when you set the value Show Prices Including Tax to false. In this template, first, a list of items with their prices (without tax) is shown. Then, the sub-total is displayed. Discounts, if any, are deducted from the sub-total, shipping fees are added, and then a taxes sub-total is shown and added. Variables used in this template come from the ./administrator/components/com_virtuemart/ html/basket.php file.
basket_b2c.html.php This template is for showing basket items in the case of a B2C transaction. When you configure your shop to show prices with tax, then that is considered as B2C transaction. This template shows the items with prices (including taxes), an order sub-total, shipping fees, discounts and the order total. It optionally shows the tax amount at the bottom, if you configure your shop to show taxes. It also gets variables from the ../html/basket.php file.
ro_basket_b2b.html.php This is the read-only version of the B2B basket template. It is shown in the last step of the checkout process. It is read only because customers cannot change the items in this basket layout. Variables used in this template comes from the ../html/ro_basket.php file.
ro_basket_b2c.html.php This is a read-only version of the B2C basket template. It is shown in the last step of the checkout where customers cannot update the cart’s items. It also takes the variables from the ../html/ro_basket.php file. 

You may have a look at these files to understand the layout, and if required, can change some lines. In most of the cases, you’ll hardly need to do so.

Checkout templates

Checkout templates are for defining the layout of checkout pages. These templates reside in the theme’s templates/checkout folder. The template files used for checkout pages are described below:

  • checkout_bar.tpl.php: This template defines how the checkout bar will be displayed. The primary logic is to show the step images in the checkout bar and to highlight the current step. You may change the styles used in this layout.
  • customer_info.tpl.php: This template shows the layout for customer information which is displayed in the checkout process. This page shows the customer’s name, address, email address, and so on.
  • get_final_confirmation.tpl.php: This template is for showing the final confirmation. It shows the shipping address and shipping method chosen, payment method chosen, checkout note provided by the customer, and legal information provided by the store. Variables used in this template come from the ../html/checkout.confirm.php file.
  • get_payment_method.tpl.php: This template is used for getting the payment method from the customer. This page lists the payment methods available for the shop. The customer selects one of the payment methods from the list.
  • get_shipping_address.tpl.php: This template is for getting the shipping address from the customer, and presenting that address along with the shipping methods available for that shipping address.
  • get_shipping_method.tpl.php: This template is for prompting customers to select a shipping method, along with the list of shipping methods available.
  • list_payment_methods.tpl.php: This template is for showing the list of payment methods available. This template is included in the get_payment_method.tpl.php file.
  • list_shipping_methods.tpl: This template is for listing the shipping methods available, and included in the get_shipping_ address.tpl.php template.
  • list_shipto_addresses.tpl: This template is for listing the ship to address(es), and is included in the get_shipping_address.tpl.php template.
  • login_registration.tpl: This template provides the registration form for new customers. This also includes the ../html/checkout.login _form.php file.

The variables used in these templates come from the checkout.*.php files in the ./administrator/components/com_virtuemart/html/ folder.

You may look at these files to understand how these are linked with the checkout template files.

You rarely need to modify these checkout templates. However, if you want to fine-tune these files to get an exact layout, you may look into their code. The codes are straight mix HTML, CSS, and PHP. Most of the files contain comments where you can get hints for what to change. For example, in the list_shipto_addresses.tpl.php, you may add the display country name, country code (two or three digits), and so on. To do so, open this file in a text editor, and then go to line #65, from which the code looks like the following:

 echo $db->f("city"); echo ', '; // for state, can be used: state_name, state_2_code, state_3_code echo $db->f("state_2_code") . " "; echo $db->f("zip") . "<br />\n"; // for country, can be used: country_name, country_2_code, //country_3_code (not displayed in default template) echo $VM_LANG->_('PHPSHOP_CHECKOUT_CONF_PHONE'). ': '. $db->f("phone_1") . "\n"; echo '<br />'."\n";

As we can see in the lines above, we can use some other variables to show a two-digit or three-digit country code and state code. Similarly, you may look at other template files and see the scope of customizing with available variables.

Email templates

VirtueMart sends emails to customers whenever they register with VirtueMart, order an item, or enquire about a product. The registration message is sent from the Joomla! engine, and it maintains the template for user registration and activation mail. VirtueMart uses two templates for order confirmation mail and product enquiries. These templates are located inside the ../themes/theme_name/templates/order_emails/ folder.

First, let’s look at the order confirmation template, confirmation_email.tpl.php. Like other templates we have seen earlier, this also uses a table for layout. Inside the table cells, some PHP variables are used. This file prints a ship to address, bill to address, the shop’s address with vendor logo, product name, quantity, order total, discount total, tax total, payment, and the shipping method chosen and any comments added to the order by the customer.

The enquiry email template, enquiry_email.tpl.php, is also table-based and shows the product’s name, product thumbnail image, product’s description, email subject, question asked by the customer and the customer’s contact email.

The variables used in these two template files are coming from the <code>email_receipt()</code> function in the ./administrator/com_virtuemart/classes/ps_checkout.php file.

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.

作者: 分类: Joomla 标签: , ,
声明:本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 执子之手与子偕老
  1. 2009年8月9日03:56 | #1

    Nice post about joomla template design. A+ to this post. thanks for the posting.

  2. 2009年10月23日05:23 | #2

    This is doubtful at the very least. ,

  1. 2014年6月28日13:06 | #1
  2. 2014年10月14日03:41 | #2