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

Ну вообще то плагин тоже легко интегрируется в шаблон флая, это так для справки

Это можно использовать практически везде(в Joomla) можно вставить в карточку товара которая лежит здесь components\com_virtuemart\themes\default\templates\product_details\ к примеру у меня flypage.tpl.php
ниже код моего flypage.tpl.php

Код

<?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' );
mm_showMyFileName(__FILE__);
 ?>

<?php echo $buttons_header // The PDF, Email and Print buttons ?>

<?php
if( $this->get_cfg( 'showPathway' )) {
	echo "<div class=\"pathway\">$navigation_pathway</div>";
}
if( $this->get_cfg( 'product_navigation', 1 )) {
	if( !empty( $previous_product )) {
		echo '<a class="previous_page" href="'.$previous_product_url.'">'.shopMakeHtmlSafe($previous_product['product_name']).'</a>';
	}
	if( !empty( $next_product )) {		
		echo '<a class="next_page" href="'.$next_product_url.'">'.shopMakeHtmlSafe($next_product['product_name']).'</a>';
	}
}
?>
<br style="clear:both;" />
<table border="0" style="width: 100%;">
  <tbody>
	<tr>
<?php  if( $this->get_cfg('showManufacturerLink') ) { $rowspan = 5; } else { $rowspan = 4; } ?>
	  <td width="33%" rowspan="<?php echo $rowspan; ?>" valign="top"><br/>



    	<a href="<?php echo $product_flypage ?>">
<?php echo urldecode( $product_image )?><br/><br/><?php echo $this->vmlistAdditionalImages( $product_id, $images )?>
	  	



</td>
	  <td rowspan="1" colspan="2">
	  <h2 style="font-size:16px; font-weight:bold;text-transform:uppercase;text-decoration:none;color:#000;">
	  <style>
	  HTML body div#wrapper div.wrapper div#content div#vmMainPage table tbody tr td h2 a {
	  font-size:16px; font-weight:bold;text-transform:uppercase;text-decoration:none;
	  }
	  </style>
	  <?php echo $product_name ?> <?php echo $manufacturer_link ?> <?php echo $edit_link ?></h2>
	  </td>
	</tr>
	<?php if( $this->get_cfg('showManufacturerLink')) { ?>
		<tr>
		  <td rowspan="1" colspan="2"><br /></td>
		</tr>
	<?php } ?>
	<tr>
      <td width="33%" valign="top" align="left">
      	<?php echo $product_price_lbl ?>
      	<?php echo $product_price ?><br /></td>
      <td valign="top"><?php echo $product_packaging ?><br /></td>
	</tr>
	<tr>
	  <td colspan="2"><?php echo $ask_seller ?></td>
	</tr>
	<tr>
	  <td rowspan="1" colspan="2"><hr />
<?php

 //Говорим Joomla, что мы хотим использовать панели
jimport('joomla.html.pane');
$myTabs = & JPane::getInstance('tabs', array('startOffset'=>0));
 $output = '';
 
//Создаем панель для вкладок
$output .= $myTabs->startPane( 'pane' );

 //Создаем 1 вкладку
$output .= $myTabs->startPanel( 'Описание', 'tab1' );
$output  .= '<p>'.$product_description.'</p>';
$output .= $myTabs->endPanel();

// Создаем 2 вкладку
$output .= $myTabs->startPanel( 'Бренд', 'tab2' );
$output  .= '<p>'.$manufacturer_desc.'</p>';
$output .= $myTabs->endPanel();

// Создаем 3 вкладку
$output .= $myTabs->startPanel( 'Помощь', 'tab3' );
$output  .= '<p>Здесь текст помощи он везде одинаковый</p>';
$output .= $myTabs->endPanel();
 
//окончание панели
$output .= $myTabs->endPane();
//Выводим
echo $output;
?>	  
	  
	  
	  
	  	<br/>
	  	<span style="font-style: italic;"><?php echo $file_list ?></span>
	  </td>
	</tr>
	<tr>
	  <td><?php 
	  		if( $this->get_cfg( 'showAvailability' )) {
	  			echo $product_availability; 
	  		}
	  		?><br />
	  </td>
	  <td colspan="2"><br /><?php echo $addtocart ?></td>
	</tr>
	<tr>
	  <td colspan="3"><?php //echo $product_type ?></td>
	</tr>
	<tr>
	  <td colspan="3"><hr /><?php //echo $product_reviews ?></td>
	</tr>
	<tr>
	  <td colspan="3"><?php //echo $product_reviewform ?><br /></td>
	</tr>
	<tr>
	  <td colspan="3"><?php //echo $related_products ?><br />
	   </td>
	</tr>
	<?php if( $this->get_cfg('showVendorLink')) { ?>
		<tr>
		  <td colspan="3"><div style="text-align: center;"><?php echo $vendor_link ?><br /></div><br /></td>
		</tr>
	<?php  } ?>
	<?php if( isset($paypalLogo)) : ?>
		<tr>
			<td colspan="3" align="center">
				<?php //echo $paypalLogo ?>
			</td>
		</tr>
	<?php endif;?>
  </tbody>
</table>
<?php 
if( !empty( $recent_products )) { ?>
	<div class="vmRecent">
	<?php //echo $recent_products; ?>
	</div>
<?php 
}
if( !empty( $navigation_childlist )) { ?>
	<?php echo $VM_LANG->_('PHPSHOP_MORE_CATEGORIES')?><br />
	<?php echo $navigation_childlist ?><br style="clear:both"/>
<?php 
} ?>

поставил вот это решение:

Спойлер

[свернуть]

всё вроди устраивает только не пойму как сменить скин вкладок

я времени убил много так и не понял, как зафиксировать вкладки( мэджик таб и скрипт генератор) и ширину текста который открывается при нажатии на вкладку?

сделать ширину на всю страницу

всем привет, не подскажите как сделать доп. вкладку, чтобы там можно было вставлять HTML код, ну к примеру один товар один код, другой товар другой код и так далее... Заранее большое спасибо за ответы

Если кому интересно, есть еще один способ сделать симпатичные табы на 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}

Все, теперь сохраняем и идем смотреть, что получилось на сайте в карточке этого товара.

Удачи.

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

этот метод работает, но мне бы в дополнительную вкладку его бы как вставить, простите я пока в этом совсем новичок, могу глупые вопросы задавать

Спойлер

[свернуть]

div class="table">
	<div class="tbody">
		<div class="tr">
			<div class="td">
             /*---------------вкладки------*/
</div></div></div></div>
/* стиль CSS*/
.table { display: table; width:100%;  }
.tbody { display: table-row-group; }
.tr { display: table-row; }
.td { display: table-cell;  }

dl.tabs { 
   float: left;
   margin: 0px 0 0px 0px;
   z-index: 50;
   position: absolute;
} 
div.current { 
    margin: 28px 0 0px 0px;}