В этой статье мы разберем с Вами то, как добавить вкладки (табы) на страницу карточки товара для вывода дополнительной информации по товару. Многие шаблоны уже имеют подобный функционал по-умолчанию, но если это не Ваш случай, тогда данный материал будет очень полезным.
Давайте сначала определимся, что мы будем выводить во вкладках:
- Подробное описание товара
- Настраиваемые поля
С первым пунктом всё ясно, а зачем нужен второй? Всё очень просто, с помощью настраиваемых полей можно выводить на отдельной вкладке видео, технические характеристики товара, ну и всё то, что может понадобится для Вашего интернет-магазина.
Код отвечающий за вывод подробного описания товара и позиции настраиваемых полей
Подробное описание
<?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.
Прям вот в тему !!! Shotcode Ultimate че-та перестал вкладки делать, новую версию не нашел. И тут статья ! Спасибо !
Жаль только не работает …. Ошибок много мелких. Исправляю вот сижу.
например <label for=«vkl1»>Описание/label>
надо </label>