Product layout

[naoko15]

Hi, i'd like to know how can i change the products layout. What i'd like is the product's image to be on the right and the text floting left with the price, quantity and cart button beneath this text. I've attached an image so it is clearer. Hope i explaned myself properly. I've spent ages trying to do this and i can't figure it out with firebug : (  I have Joomla 2.5 and Virtuemart 2 Thanks a lot!

[attachment cleanup by admin]

[naoko15]

At least could anyone tell me what file do i have to modify to achieve this? Please.

Thanks.

[bytelord]

Hello,

You are asking something that need some work and a little effort to study, is not difficult to accomplish but you have to try to create your own template overrides and come back with most targeted questions and maybe a test live url 

First you have to create template overrides for vm frontpage view (lang page), category view and product view and will need to change some CSS also to accomplish it. Is not something difficult but you will some knowledge around HTML, CSS mostly and a little bit PHP. Virtue marttemplate system uses the Joomla template system.

Category View: For example the file for category view is located under joomla_folder\components\com_virtuemart\views\category\tmpl\default.php. To create a template override just copy that file inside your_joomla_folder\templates\your_joomla_template\html\com_virtuemart\category\default.php -> Edit this file and make your changes

Product Details View:  The file for product details view is located under joomla_folder\components\com_virtuemart\views\productdetails\tmpl\default.php. To create a template override just copy that file inside your_joomla_folder\templates\your_joomla_template\html\com_virtuemart\productdetails\default.php -> Edit this file and make your changes
Also the add to cart code for product details view is located under joomla_folder\components\com_virtuemart\views\productdetails\tmpl\default_addtocart.php and you will copy that file if you want to override to productdetails location like with default file.

Last you have to create a CSS override for virtuemart  CSS styling and inside there you will place your CSS styling you want to change.


Use firebug to examine you site code and css styling: https://forum.virtuemart.net/index.php?topic=102850.0

Creating Template overrides: https://forum.virtuemart.net/index.php?topic=98505.0
Template System: https://dev.virtuemart.net/projects/virtuemart/wiki/Hints_for_the_use_of_the_template_system

Regards

[naoko15]

Very helpful!! thank you very much! : )

[naoko15]

I still haven't been able to figure out how to change this, i'm useless at this! What i'd need is the product title, the quantity box and the add to cart button to be floating to the right of the product image. Could someone help me with this, please? I'd really appreciate it.

[bytelord]

Hello,

Was thinking your are familiar with CSS, so you could float left the image and the rest will come to the right, also float the add to cart area and also remove the <div class="clear"></div> from your custom overrides. Last give add-to-cart area a width of 50%.

.module_round_box-whitestatic a {
    color: #000000;
    float: left;
}

.addtocart-area {
    border-bottom: 1px dotted #CCCCCC;
    float: left;
    padding-bottom: 10px;
    width: 50%;
}

Take a look on the attached image for the first element using firebug.






[attachment cleanup by admin]

[naoko15]

That's brilliant!! exactly what i need, thanks! One last bit, i can't find the <div class="clear"></div>...where is it suppossed to be?

Thanks again : )

[bytelord]

Hello,

If you have already create overrides then you have to edit the file your_joomla_folder\templates\your_joomla_template\html\com_virtuemart\category\default.php -> Edit this file and make your changes
Is your template file as i told you on my first post. If the file does not exist create an override as i explain on my first post, find the div clear you don't need and comment out them or delete them.

Regards

[naoko15]

Yes, i found that file you're referring to, but deleting or comenting the div clear doesn't change anything, it's strange because it's supposed to be overriding VM's original file. This is the whole code without any modification.

Code Select Expand

<?php
/**
*
* Show the products in a category
*
* @package VirtueMart
* @subpackage
* @author RolandD
* @author Max Milbers
* @todo add pagination
* @link http://www.virtuemart.net
* @copyright Copyright (c) 2004 - 2010 VirtueMart Team. All rights reserved.
* @license http://www.gnu.org/copyleft/gpl.html GNU/GPL, see LICENSE.php
* VirtueMart is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* @version $Id: default.php 5378 2012-02-04 12:58:01Z Milbo $
*/

// Check to ensure this file is included in Joomla!
defined('_JEXEC') or die('Restricted access');
JHTML::_( 'behavior.modal' );
/* javascript for list Slide
  Only here for the order list
  can be changed by the template maker
*/
$js = "
jQuery(document).ready(function () {
jQuery('.orderlistcontainer').hover(
function() { jQuery(this).find('.orderlist').stop().show()},
function() { jQuery(this).find('.orderlist').stop().hide()}
)
});
";

$document = JFactory::getDocument();
$document->addScriptDeclaration($js);

/*$edit_link = '';
if(!class_exists('Permissions')) require(JPATH_VM_ADMINISTRATOR.DS.'helpers'.DS.'permissions.php');
if (Permissions::getInstance()->check("admin,storeadmin")) {
$edit_link = '<a href="'.JURI::root().'index.php?option=com_virtuemart&tmpl=component&view=category&task=edit&virtuemart_category_id='.$this->category->virtuemart_category_id.'">
'.JHTML::_('image', 'images/M_images/edit.png', JText::_('COM_VIRTUEMART_PRODUCT_FORM_EDIT_PRODUCT'), array('width' => 16, 'height' => 16, 'border' => 0)).'</a>';
}

echo $edit_link; */ ?>
<div class="category_description">
<?php echo $this->category->category_description ; ?>

</div>
<?php
/* Show child categories */

if ( VmConfig::get('showCategory',1) ) {
if ($this->category->haschildren) {

// Category and Columns Counter
$iCol = 1;
$iCategory = 1;

// Calculating Categories Per Row
$categories_per_row = VmConfig::get ( 'categories_per_row', 3 );
$category_cellwidth = ' width'.floor ( 100 / $categories_per_row );

// Separator
$verticalseparator = " vertical-separator";
?>

<div class="category-view">

<?php // Start the Output
if(!empty($this->category->children)){
foreach ( $this->category->children as $category ) {

// Show the horizontal seperator
if ($iCol == 1 && $iCategory > $categories_per_row) { ?>
<div class="horizontal-separator"></div>
<?php }

// this is an indicator wether a row needs to be opened or not
if ($iCol == 1) { ?>
<div class="row">
<?php }

// Show the vertical seperator
if ($iCategory == $categories_per_row or $iCategory % $categories_per_row == 0) {
$show_vertical_separator = ' ';
} else {
$show_vertical_separator = $verticalseparator;
}

// Category Link
$caturl = JRoute::_ ( 'index.php?option=com_virtuemart&view=category&virtuemart_category_id=' . $category->virtuemart_category_id );

// Show Category ?>
<div class="category floatleft<?php echo $category_cellwidth . $show_vertical_separator ?>">
<div class="spacer">
<h2>
<a href="<?php echo $caturl ?>" title="<?php echo $category->category_name ?>">
<?php echo $category->category_name ?>
<br />
<?php // if ($category->ids) {
echo $category->images[0]->displayMediaThumb("",false);
//} ?>
</a>
</h2>
</div>
</div>
<?php
$iCategory ++;

// Do we need to close the current row now?
if ($iCol == $categories_per_row) { ?>
<div class="clear"></div>
</div>
<?php
$iCol = 1;
} else {
$iCol ++;
}
}
}
// Do we need a final closing row tag?
if ($iCol != 1) { ?>
<div class="clear"></div>
</div>
<?php } ?>
</div>

<?php }
}
?>
<div class="browse-view">
    <?php
if (!empty($this->keyword)) {
?>
<h3><?php echo $this->keyword; ?></h3>
<?php
} ?>
<?php if ($this->search !==null ) { ?>
    <form action="<?php echo JRoute::_('index.php?option=com_virtuemart&view=category&limitstart=0&virtuemart_category_id='.$this->category->virtuemart_category_id ); ?>" method="get">

    <!--BEGIN Search Box --><div class="virtuemart_search">
    <?php echo $this->searchcustom ?>
    <br />
    <?php echo $this->searchcustomvalues ?>
    <input name="keyword" class="inputbox" type="text" size="20" value="<?php echo $this->keyword ?>" />
    <input type="submit" value="<?php echo JText::_('COM_VIRTUEMART_SEARCH') ?>" class="button" onclick="this.form.keyword.focus();"/>
    </div>
    <input type="hidden" name="search" value="true" />
    <input type="hidden" name="view" value="category" />

    </form>
<!-- End Search Box -->
<?php } ?>

<?php // Show child categories
if (!empty($this->products)) {
?>
<div class="orderby-displaynumber">
<div class="width70 floatleft">
<?php echo $this->orderByList['orderby']; ?>
<?php echo $this->orderByList['manufacturer']; ?>
</div>
<div class="width30 floatright display-number"><?php echo $this->vmPagination->getResultsCounter();?><br/><?php echo $this->vmPagination->getLimitBox(); ?></div>
<div id="bottom-pagination">
<?php echo $this->vmPagination->getPagesLinks(); ?>
<span style="float:right"><?php echo $this->vmPagination->getPagesCounter(); ?></span>
</div>

<div class="clear"></div>
</div> <!-- end of orderby-displaynumber -->

<h1><?php echo $this->category->category_name; ?></h1>

<?php
// Category and Columns Counter
$iBrowseCol = 1;
$iBrowseProduct = 1;

// Calculating Products Per Row
$BrowseProducts_per_row = $this->perRow;
$Browsecellwidth = ' width'.floor ( 100 / $BrowseProducts_per_row );

// Separator
$verticalseparator = " vertical-separator";

// Count products
$BrowseTotalProducts = 0;
foreach ( $this->products as $product ) {
   $BrowseTotalProducts ++;
}

// Start the Output
foreach ( $this->products as $product ) {

// Show the horizontal seperator
if ($iBrowseCol == 1 && $iBrowseProduct > $BrowseProducts_per_row) { ?>
<div class="horizontal-separator"></div>
<?php }

// this is an indicator wether a row needs to be opened or not
if ($iBrowseCol == 1) { ?>
<div class="row">
<?php }

// Show the vertical seperator
if ($iBrowseProduct == $BrowseProducts_per_row or $iBrowseProduct % $BrowseProducts_per_row == 0) {
$show_vertical_separator = ' ';
} else {
$show_vertical_separator = $verticalseparator;
}

// Show Products ?>
<div class="product floatleft<?php echo $Browsecellwidth . $show_vertical_separator ?>">
<div class="spacer">
<div class="">
<center>
<?php /** @todo make image popup */
echo $product->images[0]->displayMediaThumb('class="browseProductImage" border="0" title="'.$product->product_name.'" ',true,'class="modal"');
?>
</center>

<!-- The "Average Customer Rating" Part -->
<?php if ($this->showRating) { ?>
<br/>
<center>
<span class="contentpagetitle"><?php echo JText::_('COM_VIRTUEMART_CUSTOMER_RATING') ?>:</span>
</center>
<br />
<?php
// $img_url = JURI::root().VmConfig::get('assets_general_path').'/reviews/'.$product->votes->rating.'.gif';
// echo JHTML::image($img_url, $product->votes->rating.' '.JText::_('COM_VIRTUEMART_REVIEW_STARS'));
// echo JText::_('COM_VIRTUEMART_TOTAL_VOTES').": ". $product->votes->allvotes; ?>
<?php } ?>

<?php
if (!VmConfig::get('use_as_catalog') and !(VmConfig::get('stockhandle','none')=='none') && (VmConfig::get ( 'display_stock', 1 )) ){?>
<!-- if (!VmConfig::get('use_as_catalog') and !(VmConfig::get('stockhandle','none')=='none')){?> -->
<div class="paddingtop8">
<span class="vmicon vm2-<?php echo $product->stock->stock_level ?>" title="<?php echo $product->stock->stock_tip ?>"></span>
<span class="stock-level"><?php echo JText::_('COM_VIRTUEMART_STOCK_LEVEL_DISPLAY_TITLE_TIP') ?></span>
</div>
<?php }?>
</div>

<div class="s5_productwrap">
<center>
<h2><?php echo JHTML::link($product->link, $product->product_name); ?></h2>
</center>

<?php // Product Short Description
if(!empty($product->product_s_desc)) { ?>
<p class="product_s_desc">
<?php echo shopFunctionsF::limitStringByWord($product->product_s_desc, 40, '...') ?>
</p>
<?php } ?>

<div class="product-prices marginbottom12" id="productPrice<?php echo $product->virtuemart_product_id ?>">
<?php
if ($this->show_prices == '1') {
if( $product->product_unit && VmConfig::get('vm_price_show_packaging_pricelabel')) {
echo "<strong>". JText::_('COM_VIRTUEMART_CART_PRICE_PER_UNIT').' ('.$product->product_unit."):</strong>";
}
if(empty($product->prices) and VmConfig::get('askprice',1) and empty($product->images[0]->file_is_downloadable) ){
echo JText::_('COM_VIRTUEMART_PRODUCT_ASKPRICE');
}
//todo add config settings
if( $this->showBasePrice){
echo $this->currency->createPriceDiv('basePrice','COM_VIRTUEMART_PRODUCT_BASEPRICE',$product->prices);
echo $this->currency->createPriceDiv('basePriceVariant','COM_VIRTUEMART_PRODUCT_BASEPRICE_VARIANT',$product->prices);
}
echo $this->currency->createPriceDiv('variantModification','COM_VIRTUEMART_PRODUCT_VARIANT_MOD',$product->prices);
echo $this->currency->createPriceDiv('basePriceWithTax','COM_VIRTUEMART_PRODUCT_BASEPRICE_WITHTAX',$product->prices);
echo $this->currency->createPriceDiv('discountedPriceWithoutTax','COM_VIRTUEMART_PRODUCT_DISCOUNTED_PRICE',$product->prices);
echo $this->currency->createPriceDiv('salesPriceWithDiscount','COM_VIRTUEMART_PRODUCT_SALESPRICE_WITH_DISCOUNT',$product->prices);
echo $this->currency->createPriceDiv('salesPrice','COM_VIRTUEMART_PRODUCT_SALESPRICE',$product->prices);
echo $this->currency->createPriceDiv('priceWithoutTax','COM_VIRTUEMART_PRODUCT_SALESPRICE_WITHOUT_TAX',$product->prices);
echo $this->currency->createPriceDiv('discountAmount','COM_VIRTUEMART_PRODUCT_DISCOUNT_AMOUNT',$product->prices);
echo $this->currency->createPriceDiv('taxAmount','COM_VIRTUEMART_PRODUCT_TAX_AMOUNT',$product->prices);
} ?>
</div>



</div>
<p>
<center>
<?php // Product Details Button
echo JHTML::link($product->link, JText::_('COM_VIRTUEMART_PRODUCT_DETAILS'), array('title' => $product->product_name,'class' => 'product-details'));
?>
</center>
</p>
<div class="clear"></div>
</div><!-- end of spacer -->
</div> <!-- end of product -->
<?php

   // Do we need to close the current row now?
   if ($iBrowseCol == $BrowseProducts_per_row || $iBrowseProduct == $BrowseTotalProducts) {?>
   <div class="clear"></div>
   </div> <!-- end of row -->
      <?php
      $iBrowseCol = 1;
   } else {
      $iBrowseCol ++;
   }

   $iBrowseProduct ++;
} // end of foreach ( $this->products as $product )
// Do we need a final closing row tag?
if ($iBrowseCol != 1) { ?>
<div class="clear"></div>

<?php
}
?>
<!-- /div removed valerie -->
<div id="bottom-pagination"><?php echo $this->vmPagination->getPagesLinks(); ?><span style="float:right"><?php echo $this->vmPagination->getPagesCounter(); ?></span></div>
<!-- /div removed valerie -->
<?php } elseif ($this->search !==null ) echo JText::_('COM_VIRTUEMART_NO_RESULT').($this->keyword? ' : ('. $this->keyword. ')' : '')
?>
</div><!-- end browse-view -->

[bytelord]

Hello,

You have to modify also your css overrides.

Please use firebug to examine you site code and css styling, find the changes you wan't to make and place them inside the files needs to. VM2 uses the joomla templating, so is the same thing like building or changing joomla templates.

Please read them:

Use firebug to examine you site code and css styling: https://forum.virtuemart.net/index.php?topic=102850.0

Creating Template overrides: https://forum.virtuemart.net/index.php?topic=98505.0
Template System: https://dev.virtuemart.net/projects/virtuemart/wiki/Hints_for_the_use_of_the_template_system

Regards

[naoko15]

Brilliant, thanks bytelord!! Found the div clear in vmsite-ltr. I'm almost there...one last thing: I got to float right the title, price, quantity box and add to cart button but it looks kind of jumbled.  I'd need both rows of products to have a small gap of separation between them. Also, it'd be really nice if everyting except the product's title were floating next to the picture's bottom. How can i achieve this? I've spent hours trying to figure it out. I'm attaching a picture in case i didn't explain myself properly.

[bytelord]

Hello,

Basically was better to remove them from your override instead of changing the original css file ... place them inside your template css all your overrides or create a new one, add to your header where loads the css one new file for vm ...

For your second question you don't have enough space on your container to place a "gap" between the elements and place also a border (just an example):

.width33 {
    border: 1px solid #685C0E;
    margin: 5px;
    width: 33%;
}

Use firebug to test your site and also here you can find some good tricks for CSS: http://www.w3schools.com/css/default.asp

the best would be to create a new class e.g. products and place it inside your template when you print out the product with width % float ...

As you see on the attached image your have not enought space on your container for the three of them, optimize your template.

Regards

[attachment cleanup by admin]

[naoko15]

Thanks bytelord, regarding the first question, i didn't find the div clear in my template override,so i had to remove it from the original file, not the perfect solution, i know, but i spent ages looking for them and couldn't find them. Concerning the second question, the gap shouldn't be between elements but between rows (each row should contain three elements), because, as you say, it would overflow the row. Is it possible?

[bytelord]

opps,

That's the product module am i right? You have already spaces inside your categories ...

[naoko15]

You're right, it's the product module showing featured products, sorry i didn't explain myself properly. My idea is for it to look like something like the attached image.