Место для вас

Добавление mootools вкладок в шаблон VirtueMart 1.1.x

По умолчанию вкладок в VirtueMart нет. Большое упущение разработчиков. Хотя если бы компонента была платной,то скорее всего, сие чудо было бы установлено. Выход - придется допиливать все собственным напильником. А так как писать javascript-код c нуля никому не хочется, или не умеется, или некогда, то приходится использовать js-фреймворк. Так как Joomla изначально работает с Mootools, то для построения вкладок желательно использовать именно его. Остается всего лишь найти подходящий скрипт в интернете и внедрить его на сайт...

Но как оказалось, нужный код уже есть в Joomla. Разработчики самой Joomla об этом позаботились. А нам остается только подключить его.

Вот пример кода. Этот код можно вставить в любой файл VirtueMart, отвечающий за отображение продукции, например, flypage.tlp.php или browse_1.php. Думаю, что понять логику работы кода не составит сложности.


<?php
jimport('joomla.html.pane');
$myTabs = & JPane::getInstance('tabs', array('startOffset'=>0));
$output = '';
$output .= $myTabs->startPane( 'pane' );

//1 вкладка
$output .= $myTabs->startPanel( '<span>Description</span>', 'tab1' ); // добавляем вкладку с заголовком "Описание"
$output .= '<div>'.htmlspecialchars_decode($product_description).'</div>'; // выводим в контейнер под вкладкой описание товара из переменной $product_description
$output .= $myTabs->endPanel();

//2 вкладка
$output .= $myTabs->startPanel( '<span>Detail Information</span>', 'tab2' ); // добавляем вкладку с заголовком "отзывы"
$output .= '<div></div>'; // выводим в контейнер под вкладкой отзывы о товаре из переменной $product_reviews и форму добавления отзывов из переменной
$output .= $myTabs->endPanel();

//3 вкладка
$output .= $myTabs->startPanel( '<span>Compare Products</span>', 'tab3' ); // добавляем вкладку с заголовком "Дополнительные изображения"
$output .= '<div>list of products</div>'; // выводим в контейнер под вкладкой дополнительные изображения товара
$output .= $myTabs->endPanel();

//4 вкладка
$output .= $myTabs->startPanel( '<span>Related Products</span>', 'tab4' ); // добавляем вкладку с заголовком "Дополнительные изображения"
$output .= '<div></div>'; // выводим в контейнер под вкладкой дополнительные изображения товара
$output .= $myTabs->endPanel();

//5 вкладка
$output .= $myTabs->startPanel( '<span>Comments</span>', 'tab5' ); // добавляем вкладку с заголовком "Дополнительные изображения"
$output .= '<div>'.$product_reviews.'</div>'; // выводим в контейнер под вкладкой дополнительные изображения товара
$output .= $myTabs->endPanel();

$output .= $myTabs->endPane();
echo $output;
?>

теперь только необходимо создать стили для вкладок. Вот не плохой пример:


dl.tabs {
float: left;
margin: 10px 0 -1px 0;
z-index: 50;
}
dl.tabs dt {
float: left;
padding: 4px 10px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
margin-left: 3px;
background: #f0f0f0;
color: #666;
}
dl.tabs dt.open {
background: #F9F9F9;
border-bottom: 1px solid #F9F9F9;
z-index: 100;
color: #000;
}
div.current {
clear: both;
border: 1px solid #ccc;
padding: 10px 10px;
}
div.current dd
{
padding: 0;
margin: 0;
}

В папке css шаблона создаем файл ieonly.css – это файл стилей Internet Explorer и добавляем в него код:


div.current { overflow:auto; }
div.current dd { float:left; }

Хочу заметить, что в некоторых шаблонах уже существуют подобные файлы — "только для IE". В этом случае достаточно просто добавить в них эти стили. Все. Теперь на сайте есть вкладки.


Место для вас

Добавить коментарий

кликните на картинку,
чтоб обновить код

Что за сайт

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

Будь в курсе

Интересненько

Вверх