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

как в такую вкладку засунуть JComments  ?

где вам будет удобнее выводить их определите сами

{magictabs mode=manually}
О товаре:: Товар в наличии. Сервисное обслуживание год. ...........................................
||||
Условия доставки:: 5 дней. Стоимость 200 руб. в пределах МКАД.
||||
Условия возврата:: Товар можно вернуть в течении 14 дней с момента покупки.
{/magictabs}

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

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

основные табы вставлять кодом

Код

<?php echo JHTML::_('content.prepare', $template); ?>

Уважаемый! А можно ли поподробнее?

<td colspan="2"><br /><?php echo $addtocart ?></td>
	</tr>

<tr><td><?php echo JHTML::_('content.prepare', $template); ?></td><tr>

Если кому интересно, есть еще один способ сделать симпатичные табы на flypage.

раздвижной край поля для комментария задвоился

с первым способом отказываются увеличиваться картики товара - у меня правда увеличение через yootheme'овский плагин

Реализовал на своем сайте, решил поделиться.
Предупреждаю сразу, что в кодировании полный ноль, поэтому если у кого-то не заработает, не спрашивайте почему.

1.Качаем бесплатный плагин Tabs&Slides v2.4 с сайта joomlaworks.gr
http://joomlaworks.googlecode.com/files/plugin_jw_ts-v2.4_j1.5.zip
2.Устанавливаем его и включаем через Расширения--Менеджер плагинов.
3.Находим в файле shop.product_details.php из administrator/components/com_virtuemart/html
строку (в моей версии 1.1.4 она была 451)
 
echo $tpl->fetch( '/product_details/'.$flypage . '.php' );

и заменяем на

/*Custom mod to alow plugin to scan yout product detail template*/
$template = $tpl->fetch( '/product_details/'.$flypage . '.php' );
$template = vmCommonHTML::ParseContentByPlugins( $template );
echo $template;
/*end custom mod*/

4.Разрешаем выполнение плагинов в описании товаров VirtueMart (Компоненты--Virtuemart--Настройки--Общие настройки, Параметр "Разрешить использование мамботов/плагинов в описании товаров").

5.Далее в описании товара вставляем
{tab=Название вашей вкладки 1}
Текст для вкладки1
{tab=Название вашей вкладки 2}
Текст для вкладки 2
{/tabs}
Общий текст для всех вкладок

Все!

Результат можно посмотреть здесь:
http://www.ascentis.ru/cat?page=shop.product_details&flypage=flypage.tpl&product_id=16&category_id=18

Автор решения ben01544, смотреть здесь:
http://forum.joomlaworks.gr/index.php?topic=1112.msg21565

Скажите пожалуйста у меня в конце табов в самом низу появляется прямоугольник.Откуда он?

Мне кажется, стоит дать ссылку на страницу, а то сложно догадаться, о каком прямоугольнике идет речь.

Если кому интересно, есть еще один способ сделать симпатичные табы на flypage.

1. Скачиваете и устанавливаете 2 плагина: Magic Tabs и Scriptgrator. Качаем последние версии с официального сайта http://www.greatjoomla.com/.
2. Активируем плагины в админке сайта в менеджере модулей. В настройках Scriptgrator рядом с Load jQuery to выбираем both.
3. Разрешаем VirtueMart использовать мамботы / плагины в описании товара и категории. (это в общих настройках Virtuemart).
4. Далее идем в flypage.tpl.php - components\com_virtuemart\themes\default\templates\product_details и вставляем туда код условного шаблона для табов (где вам будет удобнее выводить их определите сами):

<?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}';
?>

5. Далее нужно в описании товара добавить код, чтобы сделать табы видимыми. Если вам, например, нужно информацию о товаре разделить на три закладки: О товаре, Условия доставки и Условия возврата. Идем в админку, открываем нужный товар и в поле "описание товара" вписываем следующее:

{magictabs mode=manually}
О товаре:: Товар в наличии. Сервисное обслуживание год. ...........................................
||||
Условия доставки:: 5 дней. Стоимость 200 руб. в пределах МКАД.
||||
Условия возврата:: Товар можно вернуть в течении 14 дней с момента покупки.
{/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.