Создание табов (вкладок) в VirtueMart 3

Создание табов (вкладок) в VirtueMart 3

В интернет-магазине часто можно видеть вывод описания, отзывов, характеристик и т.д. в отдельных вкладках. Такой способ подачи информации существенно улучшает ее восприятие.

С включением фреймворка Bootstrap в Joomla! 3 создавать табы стало довольно просто просто.

И так, первым делом, если вы еще не сделали, необходимо подготовить ваш компонент к последующим обновлениям, как это описано здесь. Если этого не сделать, то при обновлении VirtueMart все изменения будут утеряны.

И так, первым делом научим VirtueMart 3 выводить характеристики товаров.

Небольшая ремарка:

Возможно, вы уже встречали материал о том, как вывести характеристики товара, который будет ниже, на других сайтах, однако, это не является плагиатом, т.к. автором данной модификации являюсь я и, как правило, он везде был выложен тоже мной.

Приступим.

В файле ваш_сайт/templates/ваш_шаблон/html/com_virtuemart/productdetails/default.php необходимо удалить следующий кусок кода:

<?php// Product Packaging $product_packaging = ''; if ($this->product->product_box) { ?>
	
<div class="product-box">
		<?php echo vmText::_('COM_VIRTUEMART_PRODUCT_UNITS_IN_BOX') .$this->product->product_box; ?>
        </div>

<?php } // Product Packaging END ?>

Затем переходим в папку ваш_сайт/templates/ваш_шаблон/html/com_virtuemart/sublayouts и создаем там файл с названием productparams.php со следующим содержимым:

<?php
/**
* sublayout products
*/
 
defined('_JEXEC') or die('Restricted access');
 
$product = $viewData['product'];
 
/* переведем единицы измерения на русский язык */
 
function translateUnits($en_units) {
	switch($en_units) {
		case 'M':
			echo 'м';
			break;
		case 'CM':
			echo 'см';
			break;
		case 'MM':
			echo 'мм';
			break;
		case 'YD':
			echo 'ярд';
			break;
		case 'FT':
			echo 'фут';
			break;
		case 'IN':
			echo 'дюйм';
			break;
		case 'KG':
			echo 'кг';
			break;
		case 'G':
			echo 'г';
			break;
		case 'MG':
			echo 'мг';
			break;
		case 'LB':
			echo 'фунт';
			break;
		case 'OZ':
			echo 'унция';
			break;
		case '1 100G':
			echo '100 г';
			break;
		case 'SM':
			echo 'м<sup>2';
			break;
		case 'CUBM':
			echo 'м<sup>3</sup>';
			break;
		case 'L':
			echo 'л';
			break;
		case '1 100ML':
			echo '100 мл';
			break;
        
		default:
			echo ' ';
			break;
	}
} ?>

<div class="product-parametrs">

<table class="product-param">
		
<tbody>
			<?php //Длина товара if ($product->product_length != 0) { ?>
				
<tr class="product-param-tr">
					
<td class="product-param-name-td">
						<span><?php echo JText::_('COM_VIRTUEMART_PRODUCT_LENGTH') ?></span>
					</td>


<td class="product-param-value-td">
						<?php echo round($product->product_length, 2)  //Выводим длину ?>
						<?php translateUnits($product->product_lwh_uom)  //Выводим единицу измерения ?>
					</td>

				</tr>

			<?php } //Ширина товара if ($product->product_width != 0) { ?>
                
<tr class="product-param-tr">
                    
<td class="product-param-name-td">
                        <span><?php echo JText::_('COM_VIRTUEMART_PRODUCT_WIDTH') ?></span>
                    </td>


<td class="product-param-value-td">
                        <?php echo round($product->product_width, 2)  //Выводим ширину ?>
                        <?php translateUnits($product->product_lwh_uom)  //Выводим единицу измерения ?>
                    </td>

                </tr>

            <?php } //Высота товара if ($product->product_height!=0) { ?>
                
<tr class="product-param-tr">
                    
<td class="product-param-name-td">
                        <span><?php echo JText::_('COM_VIRTUEMART_PRODUCT_HEIGHT') ?></span>
                    </td>


<td class="product-param-value-td">
                        <?php echo round($product->product_height, 2)  //Выводим высоту ?>
                        <?php translateUnits($product->product_lwh_uom)  //Выводим единицу измерения ?>
                    </td>

                </tr>

            <?php } //Вес товара if ($product->product_weight != 0) { ?>
                
<tr class="product-param-tr">
                    
<td class="product-param-name-td">
                        <span><?php echo JText::_('COM_VIRTUEMART_PRODUCT_WEIGHT') ?></span>
                    </td>


<td class="product-param-value-td">
                        <?php echo round($product->product_weight, 2)  //Выводим вес ?>
                        <?php translateUnits($product->product_weight_uom)  //Выводим единицу измерения ?>
                    </td>

                </tr>

            <?php } //Объем упаковки if ($product->product_packaging !=0) { ?>
                
<tr class="product-param-tr">
                    
<td class="product-param-name-td">
                        <span><?php echo JText::_('COM_VIRTUEMART_PRODUCT_PACKAGING') ?></span>
                    </td>


<td class="product-param-value-td">
                        <?php echo round($product->product_packaging, 2) //Выводим объем упаковки ?>
                        <?php translateUnits($product->product_unit) //Выводим единицы измерения ?>
                    </td>

                </tr>

            <?php } //Количество в упаковке $product_packaging = ''; if ($product->product_box) { ?>
                
<tr class="product-param-tr">
                    
<td class="product-param-name-td">
                        <span><?php echo JText::_('COM_VIRTUEMART_PRODUCT_UNITS_IN_BOX') ?></span>
                    </td>


<td class="product-param-value-td">
                        <?php echo $product->product_box //Выводим количество в упаковке ?>
                    </td>

                </tr>

            <?php } // Product Packaging END ?>
        </tbody>

    </table>

</div>

Теперь приступим к созданию табов на странице товара. Меням в файле ваш_сайт/templates/ваш_шаблон/html/com_virtuemart/productdetails/default.php этот кусок кода:

<?php /** @todo Test if content plugins modify the product description */ ?>
<?php echo vmText::_('COM_VIRTUEMART_PRODUCT_DESC_TITLE') ?>
<?php echo $this->product->product_desc; ?>

на этот (только если вы используете JComments):

<?php $comments = JPATH_SITE . '/components/com_jcomments/jcomments.php'; if (file_exists($comments)) { require_once($comments); $options = array(); $options['object_id'] = $this->product->virtuemart_product_id;
	$options['object_group'] = 'com_virtuemart';
	$options['published'] = 1;
	$count = JCommentsModel::getCommentsCount($options);
} ?>
<!-- Nav tabs -->

<ul class="nav nav-tabs">
	<?php if (!empty($this->product->product_desc)) { ?>
		
<li class="active"><a href="#home" data-toggle="tab"><?php echo vmText::_('COM_VIRTUEMART_PRODUCT_DESC_TITLE'); ?></a></li>

	<? } ?>
	
<li><a href="#params" data-toggle="tab"><?php echo vmText::_('COM_VIRTUEMART_PRODUCT_PARAM_TITLE'); ?></a></li>


<li><a href="#reviews" data-toggle="tab"><?php echo vmText::_('COM_VIRTUEMART_PRODUCT_REVIEWS_TITLE') . ' ['. $count . ']';?></a></li>

</ul>

<!-- Tab panes -->

<div class="tab-content">
	<?php if (!empty($this->product->product_desc)) { ?>
		
<div id="home" class="tab-pane fade in active">
			<?php echo $this->product->product_desc; ?>
		</div>

	<? } ?>
	
<div id="params" class="tab-pane fade">
		<?php echo shopFunctionsF::renderVmSubLayout('productparams',array('product'=>$this->product,'position'=>'params')); ?>
		<?php echo shopFunctionsF::renderVmSubLayout('customfields',array('product'=>$this->product,'position'=>'params')); ?>
	</div>


<div id="reviews" class="tab-pane fade">
		<?php // onContentAfterDisplay event echo $this->product->event->afterDisplayContent; 
		$comments = JPATH_ROOT . '/components/com_jcomments/jcomments.php';
		if (file_exists($comments)) {
			require_once($comments);
			echo JComments::showComments($this->product->virtuemart_product_id, 'com_virtuemart', $this->product->product_name);
		} ?>
	</div>

</div>

или на этот (если вы НЕ используете JComments):

<!-- Nav tabs -->

<ul class="nav nav-tabs">
	<?php if (!empty($this->product->product_desc)) { ?>
		
<li class="active"><a href="#home" data-toggle="tab"><?php echo vmText::_('COM_VIRTUEMART_PRODUCT_DESC_TITLE'); ?></a></li>

	<? } ?>
	
<li><a href="#params" data-toggle="tab"><?php echo vmText::_('COM_VIRTUEMART_PRODUCT_PARAM_TITLE'); ?></a></li>


<li><a href="#reviews" data-toggle="tab"><?php echo vmText::_('COM_VIRTUEMART_PRODUCT_REVIEWS_TITLE');?></a></li>

</ul>

<!-- Tab panes -->

<div class="tab-content">
	<?php if (!empty($this->product->product_desc)) { ?>
		
<div id="home" class="tab-pane fade in active">
			<?php echo $this->product->product_desc; ?>
		</div>

	<? } ?>
	
<div id="params" class="tab-pane fade">
		<?php echo shopFunctionsF::renderVmSubLayout('productparams',array('product'=>$this->product,'position'=>'params')); ?>
		<?php echo shopFunctionsF::renderVmSubLayout('customfields',array('product'=>$this->product,'position'=>'params')); ?>
	</div>


<div id="reviews" class="tab-pane fade">
		<?php // onContentAfterDisplay event echo $this->product->event->afterDisplayContent; 
		echo $this->loadTemplate('reviews'); ?>
	</div>

</div>

создадим файл в папке ваш_сайт/components/com_virtuemart/language/ru-RU/ с названием ru-RU.com_virtuemart.ini и следующим содержимым:

COM_VIRTUEMART_PRODUCT_PARAM_TITLE = "Характеристики"
COM_VIRTUEMART_PRODUCT_REVIEWS_TITLE = "Отзывы"
COM_VIRTUEMART_PRODUCT_UNITS_IN_BOX = "Единиц в упаковке"

На этом все. Остались вопросы — задавайте их в комментариях или на нашем форуме.

Комментировать