VM style (StoreBox) integration in Simplicity possible?

We want to integrate the virtuemart-styles from StoreBox in Simplicity template.
Is it possible without big mods?

Hi,
I can give you few tips they should help a little bit more:
Copy those files from StoreBox template inside Simplicty folder on server:
1) gk_storebox\html\com_virtuemart
2) gk_storebox\html\mod_virtuemart_cart
3) gk_storebox\layouts\blocks\tools\cart.php
4) gk_storebox\css\vm.css
5) gk_storebox\css\vmframe.css

To this same folders but in gk_simplicity template folders

(!) Now those two last (4 & 5) must be loaded/enabled inside Simplity:
so you have to edit : gk_simplicity\component.php
and add this before </head> :

Code: Select all

<?php if($option == 'com_virtuemart' && ($view == 'productdetails' || $view == 'manufacturer')) : ?>
   <link rel="stylesheet" href="<?php echo JURI::base(); ?>templates/<?php echo $this->template; ?>/css/vmframe.css" type="text/css" />
   <?php endif; ?>

Then edit this file: gk_simplity\layouts\blocks\head.php
and add there

Code: Select all

$this->API->addCSS($this->API->URLtemplate() . '/css/vm.css');

In line ~21 before
$this->API->addCSS($this->API->URLtemplate() . '/css/style'.$template_style.'.css');

Oh, thank you for the tips!

We have done this changes before my post, to test if it's SO simple, but there were a few bugs then.

What we have forgotten was:

3) gk_storebox\layouts\blocks\tools\cart.php

The following code is already there in component.php:

Code: Select all

<?php if($option == 'com_virtuemart' && ($view == 'productdetails' || $view == 'manufacturer')) : ?>
   <link rel="stylesheet" href="<?php echo JURI::base(); ?>templates/<?php echo $this->template; ?>/css/vmframe.css" type="text/css" />
   <?php endif; ?>

So, these changes are not necessary.

Ok, so far it works a bit. But there is some css stuff to change (buttons, fields, ...).
And also the language file has to be extended:

/language/en-GB/en-GB.tpl_gk_simplicity.ini
ADD:

Code: Select all

TPL_GK_LANG_VM_INC_TAX="inc. tax:"
TPL_GK_LANG_VM_VIEW="View"
TPL_GK_LANG_VM_ZOOM="zoom"

Now, there are still some bugs in categories list and product details (no flyover, no descriptions, no reviews, ...).
We will check them and post again if we can fix them.
So if other users have the same wish, they can use the informations.

Ok, next step done...

In templates/gk_simplicity/js/gk.script.js

search:

Code: Select all

// animate on init

add before:

Code: Select all

/* VM */
window.addEvent('domready', function() {
   var tabs = document.id('product-tabs');
   // if tabs exists
   if(tabs) {
      // initialization
      tabs.getElement('li').addClass('active');
      var contents = document.id('product-tabs-content');
      contents.getChildren('div').setStyle('display', 'none');
      contents.getElement('div').addClass('active');
      // add events to the tabs
      tabs.getElements('li').each(function(tab, i) {
         tab.addEvent('click', function() {
            var toggle = tab.getProperty('data-toggle');
            contents.getChildren('div').removeClass('active');
            contents.getElement('.' + toggle).addClass('active');
            tabs.getElements('li').removeClass('active');
            tab.addClass('active');      
         });
      });
   }
   
   var products = document.getElements('.browse-view .product');
   var categories = document.getElements('.category-view .category');
   var f_products = document.getElements('.featured-view .product');
   var l_products = document.getElements('.latest-view .product');
   var t_products = document.getElements('.topten-view .product');
   var r_products = document.getElements('.recent-view .product');
   
   [products, categories, f_products, l_products, t_products, r_products].each(function(p) {
      if(p.length > 0) {
         p.each(function(item,i) {
            item.addEvents({
               "mouseenter": function() {
                  item.addClass('active');
               },
               "mouseleave": function() {
                  item.removeClass('active');
               }
            });
         });
      }
   });
   
   var productZoom = document.getElements('.productDetails .main-image');
   if(productZoom.length > 0) {
      productZoom.each(function(item,i) {
         var overlay = item.getElement('.product-overlay');
         var link = item.getElement('a');
         if(overlay) {
            overlay.inject(link, 'bottom');
         }
         item.addEvents({
            "mouseenter": function() {
               item.addClass('active');
            },
            "mouseleave": function() {
               item.removeClass('active');
            }
         });
      });
   }
});

window.addEvent('touchstart', function(e) {
   if(e.target.hasClass('modal') || e.target.hasClass('ask-a-question')) {
      window.location.href = e.target.getProperty('href');
   }
});

In configuration (admin) of virtuemart, change the settings in frontend: