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

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

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

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

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

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

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

product->product_desc; ?>

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

$this->product,'position'=>'video'));?>

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

Пример простого таббера на чистом 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
  • На этом этапе у Вас должен появиться таббер с тремя вкладками, во вкладке «Подробное описание» должно выводится описание товара.

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

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

product->product_desc; ?>

и

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

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

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

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

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

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


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

Все хорошо, но как реализовать так, чтобы вкладки скрывались, если товару не назначены доп.поля

Михаил, рад, что Вам помогла статья. Что бы вкладки скрывались при отсутствие данных, необходимо несколько доработать текст статьи. Сделать я это смогу, я думаю это будет в течении 1-2 недель.

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