Место для вас

Добавление 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". В этом случае достаточно просто добавить в них эти стили. Все. Теперь на сайте есть вкладки.


Место для вас

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

Что за сайт

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

Будь в курсе

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

Вверх