Делаем вкладки на странице карточке товара Virtuemart

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

Давайте сначала определимся, что мы будем выводить во вкладках:

1. Подробное описание товара
2. Настраиваемые поля

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

Код отвечающий за вывод подробного описания товара и позиции настраиваемых полей

Подробное описание

<?php echo $this->product->product_desc; ?>

Позиция для настраиваемого поля

<?php echo shopFunctionsF::renderVmSubLayout('customfields',array('product'=>$this->product,'position'=>'video'));?>

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

Пример простого таббера на чистом CSS

HTML

<div class="tabs-content">
<input id="vkl1" checked="checked" name="odin" type="radio">
<label for="vkl1">Описание/label><input id="vkl2" name="odin" type="radio"><label for="vkl2">Видео</label><input id="vkl3" name="odin" type="radio"><label for="vkl3">Технические характеристики</label>
<div><!--?php echo $this--->product->product_desc; ?></div>
<div><!--?php echo shopFunctionsF::renderVmSubLayout('customfields',array('product'=-->$this->product,'position'=>'video'));?></div>
<div><!--?php echo shopFunctionsF::renderVmSubLayout('customfields',array('product'=-->$this->product,'position'=>'normal'));?></div>
</label></div>

CSS

.tabs-content > div, .tabs-content > input {
    display: none; 
}
.tabs-content label {
  background: none repeat scroll 0 0 #F2F3F5;
  border: 1px solid rgba(0, 0, 0, 0.05);
  bottom: 3px;
  cursor: pointer;
  line-height: 34px;
  margin-right: 3px;
  padding: 8px;
  position: relative;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.tabs-content input[type="radio"]:checked + label {
    border-bottom: 2px solid #fff; } 
 
.tabs-content > input:nth-of-type(1):checked ~ div:nth-of-type(1), .tabs-content > input:nth-of-type(2):checked ~ div:nth-of-type(2), .tabs-content > input:nth-of-type(3):checked ~ div:nth-of-type(3) { 
    display: block; 
    padding: 5px; 
    border: 1px solid rgba(0, 0, 0, 0.05);
}

Установка

• Для того, что бы установить данный таббер, скопируйте код со вкладки CSS и добавьте его в любое место файла стилей Вашего шаблона, обычно это templates/шаблон/css/templates.css.
• После этого вставляем код со вкладки HTML по следующему адресу: templates/шаблон/html/com_virtuemart/productdetails/default.php, если в папке с шаблоном нет этой папки, тогда редактируем файл: /components/com_virtuemart/views/productdetails/tmpl/default.php
• На этом этапе у Вас должен появиться таббер с тремя вкладками, во вкладке «Подробное описание» должно выводится описание товара.

Удаляем дубликаты содержимого

Если Вы следовали инструкции, то у Вас в карточке товара теперь выводится два подробных описания и в двух местах выводятся настраиваемые поля. Собственно нужно убрать дубликаты. Просто найдите строчки:

<?php echo $this->product->product_desc; ?>

и

echo shopFunctionsF::renderVmSubLayout('customfields',array('product'=>$this->product,'position'=>'normal'));

Удалите их или закомментируйте //

Вывод видео и других данных во вкладках

В каждой вкладке нашего табера, мы вывели позицию для настраиваемых полей. Всего их получилось 2: video и normal.
Теперь осталось создать необходимые поля и вывести их в нужной позиции. Так например, что бы вывести видео, создадим с Вами настраиваемое поле «Область текста», заголовок — Видео и указываем позицию макета «video».

Переходим к редактированию товара на вкладку «Настраиваемые поля» и выбираем «Видео», появившемся окне копируем фрейм код для вставки с Youtube.

<iframe width="560" height="315" src="//www.youtube.com/embed/8qZ5IMAlEKA" frameborder="0" allowfullscreen=""></iframe>

Аналогично с позицией Normal.