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

Опубликовано: 27 марта, 2015

Обновлено: 5 февраля, 2023

Категория: Внешний вид, дизайн, Настройка VirtueMart

Вкладки для удобного доступа к контенту используются повсеместно.

В интернет-магазине часто можно видеть вывод описания, отзывов, характеристик и т.д. в отдельных вкладках.

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

Инструкция ниже отлично сработает не только если вы используете joomla 3 + virtuemart 3, но и для joomla 2.5 + virtuemart 2.

Проверка подключения bootstrap.js

Если сайт работает на joomla 3, то с вероятностью 99% на страницах уже подключены скрипты bootstrap. В исходном коде это выглядит так.

1	<script src="/media/jui/js/bootstrap.min.js" type="text/javascript"></script>

Если файл bootstrap.min.js не подключен, то в файле index.php или head.php шаблона подключите его.

1	<script src="//maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

Правка шаблона

Описание и отзывы о товаре

Самый распространенный пример - это создание 2 вкладок с описанием и отзывами о товаре.

Для вывода отзывов используем компонент Jcomments.

Отредактируем шаблон карточки товара \components\com_virtuemart\views\productdetails\tmpl\default.php (либо в папке \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; ?>

Заменим его на

<li class="active"><a href="#home" data-toggle="tab">Описание</a></li>

<li><a href="#reviews" data-toggle="tab">Отзывы</a></li>

</ul>

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

</div>

<?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>

Получим в результате.

Чтобы показать количество отзывов в названии вкладки используем код

<?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);

}

<li class="active"><a href="#home" data-toggle="tab">Описание</a></li>

<li><a href="#reviews" data-toggle="tab">Отзывы (<?php echo $count; ?>)</a></li>

</ul>

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

</div>

<?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>

В итоге получим

Похожие товары

Процесс добавления новых вкладок прост. Нужно добавить название вкладки (в области Nav tabs) и контент вкладки (в области Tab panes).

Название вкладки для похожих товаров выведем кодом

<?php if (!empty($this->product->customfieldsSorted['related_products'])) { ?>

<li><a href="#related-products" data-toggle="tab">Похожие товары</a></li>

<?php } ?>

Для контента используем код

<?php if (!empty($this->product->customfieldsSorted['related_products'])) { ?>

<?php echo shopFunctionsF::renderVmSubLayout('customfields',array('product'=>$this->product,'position'=>'related_products','class'=> 'product-related-products','customTitle' => true ));

</div>

<?php } ?>

Чтобы похожие товары не дублировались, удалим ниже стандартный код вывода.

1	echo shopFunctionsF::renderVmSubLayout('customfields',array('product'=>$this->product,'position'=>'related_products','class'=> 'product-related-products','customTitle' => true ));

Если похожих товаров не будет, то вкладка не отобразится.

В результате получим

Настраиваемые поля

Код для вывода похожих товаров можно использовать для вывода любых настраиваемых полей в отдельной вкладке. Нужно только во всем коде заменить related_products на название позиции нового настраиваемого поля.

Код названия вкладки

<?php if (!empty($this->product->customfieldsSorted['newtab'])) { ?>

<li><a href="#newtab" data-toggle="tab">Новая вкладка</a></li>

<?php } ?>

Код контента вкладки

<?php if (!empty($this->product->customfieldsSorted['newtab'])) { ?>

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

</div>

<?php } ?>

newtab - это позиция макета в настройках настраиваемого поля.

Габариты/вес

Для вывода в отдельной вкладке габаритов и веса товаров можно воспользоваться этим способом, предложенным denism300, за что ему большое спасибо!

Добавление CSS

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

Если bootstrap стилей нет, то в файл стилей шаблона добавьте

/*Tabs*/

.nav-tabs {

*zoom: 1;

margin: 0;

padding: 0;

border-bottom: 1px solid #ddd;

}

.nav-tabs:before,

.nav-tabs:after {

display: table;

content: "";

line-height: 0;

}

.nav-tabs:after {

clear: both;

}

.nav-tabs > li {

float: left;

list-style: none;

margin-bottom: -1px;

}

.nav-tabs > li > a {

display: block;

padding: 8px 12px;

line-height: 20px;

margin-right: 5px;

border: 1px solid transparent;

-webkit-border-radius: 4px 4px 0 0;

-moz-border-radius: 4px 4px 0 0;

border-radius: 4px 4px 0 0;

}

.nav-tabs > li > a:hover,

.nav-tabs > li > a:focus {

border-color: #eee #eee #ddd;

background: #fafafa;

color: inherit;

}

.nav-tabs > .active > a,

.nav-tabs > .active > a:hover,

.nav-tabs > .active > a:focus {

color: #555;

background-color: #fff;

border: 1px solid #ddd;

border-bottom-color: transparent;

cursor: default;

}

.tab-content {

overflow: auto;

padding: 15px 0;

}

.tab-content > .tab-pane {

display: none;

}

.tab-content > .active {

display: block;

}

.fade {

opacity: 0;

-webkit-transition: opacity .15s linear;

-moz-transition: opacity .15s linear;

-o-transition: opacity .15s linear;

transition: opacity .15s linear;

}

.fade.in {

opacity: 1;

}

P.S.

Если статья оказалась полезной, то подписывайтесь на обновления. Впереди еще много интересных материалов по virtuemart 3.

denism300

27 марта, 2015 at 22:21

Админ, ты экстрасенс, ты читаешь мои мысли! Я как раз собирался на форуме задать вопрос, как засунуть характеристики и отзывы в табы 🙂

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

Проверка подключения bootstrap.js

Правка шаблона

Добавление CSS

P.S.

Похожие статьи :

247 комментариев

denism300

denism300

Николай

Николай

Николай

Николай

Николай

Николай

Николай

Николай

Николай

Александр

Александр

Алексей

Иван

Ruslan

Никита

Никита

Olga

Михаил

Михаил

amkmts

amkmts

amkmts

Alex

Alex

Alex

Alex

Валера

Валера

Валера

Николай

Николай

Николай

NaivGi

NaivGi

Николай

Николай

Николай

Marhal

Marhal

андрей

андрей

Zeka

Zeka

Zeka

korchagin

korchagin

Семён

Семён

Msena

Тимур

Тимур

heslik

heslik

heslik

heslik