How to display dynamic shipment, payment calculation on product detail views

VirtueMart triggers plgVmOnProductDisplayShipment and plgVmOnProductDisplayPayment and so plugins can dynamically display html on the product details page. This is interesting for example for displaying dynamic shipment or payment prices. Another example are calculation plugins that use this triggers to display discount rates. When we introduced this feature (svn version 5698), we used this code (in /components/com_virtuemart/views/productdetails/tmpl) [code] if (is_array($this->productDisplayShipments)) { foreach ($this->productDisplayShipments as $productDisplayShipment) { echo $productDisplayShipment . '
'; } } if (is_array($this->productDisplayPayments)) { foreach ($this->productDisplayPayments as $productDisplayPayment) { echo $productDisplayPayment . '
'; } } [/code] We replaced it in vm3.2 (svn 9398) against this [code] $productDisplayTypes = array('productDisplayShipments', 'productDisplayPayments'); foreach ($productDisplayTypes as $productDisplayType) { if(empty($this->$productDisplayType)){ continue; } else if (!is_array($this->$productDisplayType)) { $this->$productDisplayType = array($this->$productDisplayType); } foreach ($this->$productDisplayType as $productDisplay) { if(empty($productDisplay)){ continue; } else if (!is_array($productDisplay)){ $productDisplay = array($productDisplay); } foreach ($productDisplay as $virtuemart_method_id =>$productDisplayHtml) { ?>
productDisplayTypes as $type=>$productDisplayType) { foreach ($productDisplayType as $productDisplay) { foreach ($productDisplay as $virtuemart_method_id =>$productDisplayHtml) { ?>

Different thumbnail sizes

With VM 3.0.12 or higher it is easy to use different thumbnail sizes in different areas of your shop.

Assuming "Enable Dynamic Thumbnail Resizing" is configured in VM, if a thumbnail image does not exist for the size specified in "Thumbnail Image Width" and "Thumbnail Image Height", it is created.

This results in one thumbnail being created for the size specified e.g. coat_0x200.jpg

Configuration for  dynamic auto thumbnail creation

"Enable Dynamic Thumbnail Resizing"  Ticked
"Thumbnail Image Width" = 0 (can be left to 0)
"Thumbnail Image Height" = 200 (set to the thumbnail size required)

The 0 for the "Thumbnail Image Width" value enables the thumbnail image to maintain the image aspect ratio of the original image.  For the settings shown above, a thumbnail will be created from the main image.

Main image:- coat.jpg
Resized folder thumbnail:- coat_0x200.jpg

Stores that require more than one thumbnail size

Some stores may require a different thumbnail image size to be used depending on the store page being displayed.

e.g. Thumbnails:-  coat_0x200.jpg and coat_0x50.jpg

Virtuemart allows more than one product "thumbnail" in the product image resized folder, and will create thumbnails (in addition to the VM configuration settings) through use of template overrides.

To have a template view create a thumbnail that is different from the configuration settings and use this thumbnail, a simple override to the layout is required that adjusts the function "displayMediaThumb".

function displayMediaThumb($imageArgs='',$lightbox=true,$effect="class='modal' rel='group'",$return = true,$withDescr = false,$absUrl = false, $width=0,$height=0)

The last two parameters of the function call determine the thumbnail size to use/create in this view.

Example - Override the thumbnail size for additional images on the product details page

To use a diffrent sized thumbnail than that set in the main VM configuration, a template override can be created.

/templates/YourTemplate/html/com_virtuemart/productdetails/default_images_additional.php

To use/create an additional image thumbnail of width 50px the "displayMediaThumb" override would look like this.

if(VmConfig::get('add_img_main', 1)) {
   echo $image->displayMediaThumb('class="product-image" style="cursor: pointer"',false,$image->file_description, true, false, false, 50, 0);
   echo '<a href="'. $image->file_url .'" style="display:none;" title="'. $image->file_meta .'" rel="vm-additional-images"></a>';
} else {
   echo $image->displayMediaThumb("",true,"rel='vm-additional-images'",true,$image->file_description, false, 50, 0);
}

The resulting thumbnail would be named:- imagename_50x0.jpg and would be shown for additional image display in the product details page.

Templates für Bezahlarten (de)

English version

Ab Version 2.6.10 ist in VirtueMart eine neue Funktion verfügbar, die es ermöglicht, für Zahlungs-Plugins ein eigenes Vorlagenlayout zu verwenden. Diese neue Funktion ist besonders für Zahlungsarten wie Bezahlen mit Amazon nützlich, bei denen ein vollständiger Bezahlprozess parallel zum normalen Bezahlprozess läuft. Wenn Sie eine Vorlage eines externen Entwicklers verwenden, ist diese neue Funktion möglicherweise nicht enthalten. In dieser Anleitung wird erklärt, wie Sie die Vorlage anpassen können.

Bezahlen-Button

Der Bezahlen-Button sollte sowohl in der Einkaufswagen-Ansicht als auch im Einkaufswagen-Modul angezeigt werden:

Einkaufswagen-Ansicht Einkaufswagen-Modul

Wenn der Bezahlen-Button nicht in der Einkaufswagen-Ansicht oder im Einkaufswagen-Modul angezeigt wird, führen Sie die folgenden Schritte aus.

Einkaufswagen-Ansicht

  1. Öffnen Sie  /templates/[IhreVorlage]/html/com_virtuemart/cart/default.php
  2. Suchen Sie nach der folgenden Zeile: 
    <h1><?php echo vmText::_ ('COM_VIRTUEMART_CART_TITLE'); ?></h1>
  3. Fügen Sie direkt dahinter diese Zeile ein: 
    <div class="payments-signin-button"></div>

Im Modul

  1. Öffnen Sie  /templates/[IhreVorlage]/html/mod_virtuemart_cart/default.php
  2. Suchen Sie nach der folgenden Zeile: 

    <noscript>
    <?php echo JText::_('MOD_VIRTUEMART_CART_AJAX_CART_PLZ_JAVASCRIPT') ?>
    </noscript>

  3. Fügen Sie davor diese Zeile ein:
    <div class="payments-signin-button"></div>

Sublayouts

Reusable sublayouts

We often want to use the same layout snippets in different views. For this purpose VM3 has sublayouts. Sublayouts are very similar to the Minilayouts of Joomla, but are more in flow oriented style for easy use.

The sublayouts are stored in the FE folder /component/com_virtuemart/sublayouts. You can add your own sublayouts into the core folder, or add/override them via template using /templates/yourtemplate/html/com_virtuemart/sublayouts

The first parameter is just the name of the layout=file to be called. The static call is just

echo shopFunctionsF::renderVmSubLayout('prices',array('product'=>$this->product,'currency'=>$this->currency));

The associative array is then available as $viewData.

or within a VmView

echo $this->renderVmSubLayout($this->productsLayout,array('products'=>$this->products,'currency'=>$this->currency,'products_per_row'=>$products_per_row,'showRating'=>$this->showRating));

The associative array is added to the context and useable for example as $this->products

Sublayouts can also be used to create your own userfields. The new TOS userfields is an example for it. Just select the userfield type custom. The name of the userfield is the used name of the sublayout. Take a look on the tos.php in /components/com_virtuemart/sublayouts.

Which layouts do appear in the configuration dropdowns?

The normal layouts do not appear in the dropdowns as option, if there is an underscore _ in the name. This is to prevent users to select only reusable parts of a layout. Despite to the normal layouts, any sublayout must have a unique name, because there is no related view for it. They are all stored in one folder. Therefore the different sublayouts of the same type or group are with underscore _ . So if you want to create a new sublayout for products and it shoud appear as choice in the vm config, the prefix must be "products_". See as example products_horizon.php.

Templates for Payments

German version

From version 2.6.10, a new feature has been added in VirtueMart that allows payment to have his own template layout. This new feature is specially usefull for payments like Pay With Amazon which has a complete checkout process running in parallel to the normal checkout process.. If you are using a 3rd party developer template, the template may not include this new functionnality. This tutorial is going to explain you how to adjust it.

Payment button

The payment button should be displayed in the cart view as well as in the cart module:

cart-view module-cart

If the payment button is not displayed in the cart view or the module, follow those steps:

In the cart view

  1. Go to  /templates/[yourtemplate]/html/com_virtuemart/cart/default.php
  2. Find the line 
    <h1><?php echo vmText::_ ('COM_VIRTUEMART_CART_TITLE'); ?></h1>
  3. Add this line just after 
    <div class="payments-signin-button"></div>

In the module

  1. Go to  /templates/[yourtemplate]/html/mod_virtuemart_cart/default.php
  2. Find the line 

    <noscript>
    <?php echo JText::_('MOD_VIRTUEMART_CART_AJAX_CART_PLZ_JAVASCRIPT') ?>
    </noscript>

  3. Add this line before
    <div class="payments-signin-button"></div>