Как добавить вкладки (табы) в описание товара для VirtueMart 1.1.4 - страница 5 - [VM1] Дизайн, оформление

ну так как всё таки подключить к табам JComments ?

через плагин самих JComments

Слишком много возни.
Достаточно маленького плагинчика к Jquery(можно пихать в код страницы):

Код

(function($) {
$(function() {

  $('ul.tabs').each(function() {
    $(this).find('li').each(function(i) {
      $(this).click(function(){
        $(this).addClass('current').siblings().removeClass('current');
        var p = $(this).parents('div.section');
        p.find('div.box').hide();
        p.find('div.box:eq('+i+')').fadeIn(150);
      });
    });
  });

})
})(jQuery)

К нему примерно такой CSS:

Код

/* tabs--------------------------------------------------------- */
.section {
	width: auto;
	margin: 0 0 30px;
}
ul.tabs {
	height: 21px;
	line-height: 21px;
	list-style: none;
	border-bottom: 1px solid #DDD;
	background: #FFF;
margin:0;
}
.tabs li {
	float: left;
	display: inline;
	margin: 0 1px -1px 0;
	padding: 0 13px 0px;
	cursor: pointer;
	background: #E6E6FA;
	border: 1px solid #E4E4E4;
	border-bottom: 1px solid #F9F9F9;
	position: relative;
}
.tabs li:hover,
.vertical .tabs li:hover {
	padding: 0 13px;
	background: #FFFFDF;
}
.tabs li.current {
	color: #444;
	padding: 0 13px 0px;
	height:21px;
  background: #FFFFFF;
	border: 1px solid #D4D4D4;
	border-bottom: 1px solid #FFFFFF;
}
.box {
	display: none;
	border: 1px solid #D4D4D4;
  border-width: 0 1px 1px;
	padding: 0 12px;
}
.box.visible {
	display: block;
}

И в собственно флайпейдже:

Код

<div class="section">
	<ul class="tabs">
		<li class="current">Заголовок таба 1</li>
		<li>Заголовок таба 2</li>
	</ul>
<div class="box visible">
Содержимое таба 1
</div>
<div class="box">
Содержимое таба 2
</div>
</div>

ЗЫ: естественно, надо загружать Jquery. Можно через тот же Scriptegrator.

Реализовал (пытаюсь) вкладки таким методом. Все это всунул во флайпейдже. Первый скрипт всунул между тегами <script></script> в начале файла. Стили подтянул там же, через <style type="text/css"></style>. Ну и разместил код вкладок. В первую удалось вывести характеристики товара, реализованные через типы товара. И тут проблема - не переключаются вкладки! Скажите что делаю не так? Может не подтягивается jQuery? В системе установлены и активны плагины Core Design Magic Tabs plugin и Scriptegrator. Никаких дополнительных действий по подтягиванию jQuery не делал (и не знаю есть ли он в этих плагинах, но думаю что проблема именно в нем). Буду благодарен за помощь!
P.S.Ссылка на пример: http://fanphone.com.ua/index.php?page=shop.product_details&flypage=flypage.tpl&product_id=25&category_id=22&option=com_virtuemart&Itemid=593

P.P.S. Работает, но только в Mozille и Ослике IE. Opera и Chrome в лесу

<?php
$template = '{magictabs style=darkblue_rounded, tabwidth=131px}';
$template .= $VM_LANG->_('PHPSHOP_PRODUCT_DESC_TITLE');
$template .= '::';
$template .= $product_description;
$template .= '||||';
$template .= $VM_LANG->_('PHPSHOP_MORE_IMAGES');
$template .= '::';
/**$template .= '<table><tr><td>';*/
$template .= $this->vmlistAdditionalImages( $product_id, $images );
/**$template .= '</td></tr></table>';*/
$template .= '||||';
$template .= $VM_LANG->_('PHPSHOP_REVIEWS');
$template .= '::';
/**$template .= '<table><tr><td>';*/
$template .= $product_reviews;
$template .= $product_reviewform;
/**$template .= '</td></tr></table>';*/
$template .= '{/magictabs}';
?> 

<?php
$template = '{magictabs}';
// <<<<<<<<<<<<
$array_product_description = explode("||||", $product_description);

    foreach ($array_product_description as $array_products) {
        $array_products_title = explode("::", $array_products);
        //print_r($array_products_title);
        //exit();
        $template .= $array_products_title[0];
        $template .= '::';
        $template .= $array_products_title[1];
        //$template .= $array_products;
        $template .= '||||'; 
    }
// >>>>>>>>>>>>>>
$template .= $VM_LANG->_('PHPSHOP_MORE_IMAGES');
$template .= '::';
/**$template .= '<table><tr><td>';*/
$template .= $this->vmlistAdditionalImages( $product_id, $images );
/**$template .= '</td></tr></table>';*/
$template .= '||||';
$template .= $VM_LANG->_('PHPSHOP_REVIEWS');
$template .= '::';
/**$template .= '<table><tr><td>';*/
$template .= $product_reviews;
$template .= $product_reviewform;
/**$template .= '</td></tr></table>';*/
$template .= '{/magictabs}';
?>    

Наименование вкладки::
Описание
||||
Наименование второй вкладки::
Описание
||||
и т.д.

Слишком много возни.
Достаточно маленького плагинчика к Jquery(можно пихать в код страницы):

Код

(function($) {
$(function() {

  $('ul.tabs').each(function() {
    $(this).find('li').each(function(i) {
      $(this).click(function(){
        $(this).addClass('current').siblings().removeClass('current');
        var p = $(this).parents('div.section');
        p.find('div.box').hide();
        p.find('div.box:eq('+i+')').fadeIn(150);
      });
    });
  });

})
})(jQuery)

К нему примерно такой CSS:

Код

/* tabs--------------------------------------------------------- */
.section {
	width: auto;
	margin: 0 0 30px;
}
ul.tabs {
	height: 21px;
	line-height: 21px;
	list-style: none;
	border-bottom: 1px solid #DDD;
	background: #FFF;
margin:0;
}
.tabs li {
	float: left;
	display: inline;
	margin: 0 1px -1px 0;
	padding: 0 13px 0px;
	cursor: pointer;
	background: #E6E6FA;
	border: 1px solid #E4E4E4;
	border-bottom: 1px solid #F9F9F9;
	position: relative;
}
.tabs li:hover,
.vertical .tabs li:hover {
	padding: 0 13px;
	background: #FFFFDF;
}
.tabs li.current {
	color: #444;
	padding: 0 13px 0px;
	height:21px;
  background: #FFFFFF;
	border: 1px solid #D4D4D4;
	border-bottom: 1px solid #FFFFFF;
}
.box {
	display: none;
	border: 1px solid #D4D4D4;
  border-width: 0 1px 1px;
	padding: 0 12px;
}
.box.visible {
	display: block;
}

И в собственно флайпейдже:

Код

<div class="section">
	<ul class="tabs">
		<li class="current">Заголовок таба 1</li>
		<li>Заголовок таба 2</li>
	</ul>
<div class="box visible">
Содержимое таба 1
</div>
<div class="box">
Содержимое таба 2
</div>
</div>

ЗЫ: естественно, надо загружать Jquery. Можно через тот же Scriptegrator.

var b=$$('.tabs li');var bb=$$('.section .box');
b.addEvent('click', function() {
  for(var n=0; n<b.length; n++) {
	if(b[n]==this){
	  this.addClass('current');bb[n].addClass('visible');
	}else{
	  b[n].removeClass('current');bb[n].removeClass('visible');
	}
  }
});

А это скрипт под mootools:

Код: javascript

var b=$$('.tabs li');var bb=$$('.section .box');
b.addEvent('click', function() {
  for(var n=0; n<b.length; n++) {
	if(b[n]==this){
	  this.addClass('current');bb[n].addClass('visible');
	}else{
	  b[n].removeClass('current');bb[n].removeClass('visible');
	}
  }
});

Не нужен Jquery.

я и то и другое попробовал, мне больше понравился Magic Tabs + Scriptgrator, могу скинуть свой flypage, там уже всё интегрировано, и мнения покупателей, и фотографии, и основная. Все эти вкладки по умолчанию уже забиты, тобишь при создании нового товара ничего писать типо этого: ||||Описание:: не надо 

давно это было, во флайпедже надо ставить такие строчки:
$template .= $VM_LANG->_('PHPSHOP_REVIEWS');
$template .= '::';
$template .= $product_reviews;
$template .= $product_reviewform;
Естественно должна быть уже сделана замена встроенного комментария товара - jcomment'ом