Two category/product layouts

[Seabiscuit]

Hi all,

I have a problem with the Virtuemart template. I am working with Virtuemart 3.0.9. and Joomla 3.3.6. My website is www.maakeencocktail.nl

I couldn't find an online solution for the following problem. I want to use two different product/category layouts. The first one is already in place: http://www.maakeencocktail.nl/index.php/webshop/accessoires (I'll later on delete index.php). However, I also want to use the Virtuemart layout to display all the different cocktails: http://www.maakeencocktail.nl/index.php/overzicht-cocktails/ . This page should have a different layout, however I cannot change the CSS layout of this page without also changing the layout of the first page.

I have tried to do this through assigning a different template to this page, but I have not managed to really change it in the end... It keeps the layout of .category-view. Can someone help me out here and tell me how to fix this issue.

[jenkinhill]

Obviously these should bot the done usieng template overrides. 
Make the first set of override files (template/css as required), and sort that out - which you seem to have done.
Then make a new set of override template files, name them something different, eg default2.php, products2.php and edit layout as needed and rename the classes/ids that you require to style differently, I do this by appending a 2 to the class, eg product vm-col  may become product vm-col2
Assign the default2.php template to the relevat category and add css overrides to set the style as you wish to see it.

http://docs.virtuemart.net/tutorials/templating-layouts.html

[Seabiscuit]

Hi jenkinhill,

Thank you for your reply!

If I understand you correctly it should work if I copy/paste/rename everything, however do you need to do this for every single file? For example, if I look at the template file of the categories:

<?php

defined ('_JEXEC') or die('Restricted access');

?> <div class="category-view"> <?php
$js = "
jQuery(document).ready(function () {
   jQuery('.orderlistcontainer').hover(
      function() { jQuery(this).find('.orderlist').stop().show()},
      function() { jQuery(this).find('.orderlist').stop().hide()}
   )
});
";
vmJsApi::addJScript('vm.hover',$js);

if (empty($this->keyword) and !empty($this->category)) {
   ?>
<div class="category_description">
   <?php echo $this->category->category_description; ?>
</div>
<?php
}

// Show child categories
if (VmConfig::get ('showCategory', 1) and empty($this->keyword)) {
   if (!empty($this->category->haschildren)) {

      echo ShopFunctionsF::renderVmSubLayout('categories',array('categories'=>$this->category->children));

   }
}

if($this->showproducts){
?>
<div class="browse-view">

There is no redirection to the vm-ltr-common.css file. How should I redirect the newly created template file to newly created css file? Because the changes didn't appear when I added .category-view2 in the existing vm-ltr-common.css file and replaced .category-view into .category-view2 within the newly created default2.php