Партнерки вебмастерам

Баннер

Кто онлайн

Сейчас 55 гостей онлайн

Статистика

Архив содержит 29 файлов в 11 категориях. На данный момент файлы скачаны 103387 раз.
VirtueMart – интернет-магазин на Joomla. Часть 24. Добавление mootools-вкладок для VirtueMart. PDF Печать E-mail

Сегодня многие интернет-магазины делаются по образу и подобию своих существующих, успешных конкурентов. Заказчики, как правило, не тратят средства на разработку технического задания, а пишут его самостоятельно, опираясь на известные сайты, которые им нравятся. Таким образом, сегодня все чаще и чаще можно встретить задания, в которых присутствуют различные элементы, выполняющиеся на Javascript. К таким элементам относятся и так называемые «Вкладки» или «Табы». Эта статья посвящена довольно сложному, но очень важному вопросу отображения элементов VirtueMart с помощью вкладок.

 

В любом интернет-магазине страница товаров имеет много информации. Это и описание, и отзывы, и дополнительные фото, видео, файлы, а также многое другое.  Большое количество информации часто может отпугнуть посетителя, ведь не каждому хочется разбираться в деталях. На странице, с предложением товара все должно быть как можно проще и прозрачнее. Это вам скажет любой маркетолог. Встает вопрос, как же уместить на странице всю необходимую информацию и при этом не перегрузить ее информативностью. Тут нам на помощь приходят вкладки. Что они позволяют делать? Благодаря вкладкам мы можем загрузить на страницу всю необходимую информацию, но часть из нее скрыть. При этом при клике по вкладке новая информация будет появляться, а текущая исчезать. Таким образом, мы упрощаем страницу товара не жертвуя информативностью. Использование вкладок тут вполне уместно. Если кто-то все еще путается в том, что такое «вкладки», вот пример(вкладки тут «Основные» и «Все характеристики». Кстати, отличный телефон, рекомендую :-)).

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

<?php

//Говорим Joomla, что мы хотим использовать панели
jimport('joomla.html.pane');
$myTabs = & JPane::getInstance('tabs', array('startOffset'=>0));
$output = '';

//Создаем панель для вкладок

$output .= $myTabs->startPane( 'pane' );

//Создаем 1 вкладку
$output .= $myTabs->startPanel( '1st', 'tab1' );
$output .= '<p>Это первая вкладка</p>';
$output .= $myTabs->endPanel();

// Создаем 2 вкладку

$output .= $myTabs->startPanel( '2nd', 'tab2' );
$output .= '<p>Это вторая вкладка</p>';
$output .= $myTabs->endPanel();

// Создаем 3 вкладку

$output .= $myTabs->startPanel( '3rd', 'tab3' );
$output .= '<p>Это третья вкладка</p>';
$output .= $myTabs->endPanel();

//окончание панели

$output .= $myTabs->endPane();
//Выводим
echo $output;
?>
 
Этот код можно вставить в любой файл VirtueMart, отвечающий за формирования страниц, т.е., например, flypage или browse. Не все знают php, но здесь это и не нужно. Необходимо лишь уловить закономерности.

Далее необходимо создать для вкладок стили. Отталкиваться можно от этих:

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-файл, используемый в шаблоне, либо в css-файл VirtueMart.

IE, как обычно, отличился. Для него небольшой фикс:

Это добавляем между тегами <head></head> используемого шаблона Joomla:

<!--[if IE]>
<link href="/baseurl?>/templates/template?>/css/ieonly.css" rel="stylesheet" type="text/css" />
<![endif]-->
В папке с шаблоном, в подпапке «css» создаем файл «ieonly.css» – это файл стилей, которые будет применяться только к браузеру Internet Explorer. Далее добавляем в файл следующее:
div.current { overflow:auto; }
div.current dd { float:left; } 

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

Пример.

Я понимаю, что разобраться со всеми кодами довольно сложно, особенно новичку, поэтому ниже я привожу пример работающих вкладок.

Вкладки выглядят так:

virtuemart tabs

Код добавлен в файл:

components\com_virtuemart\themes\default\templates\product_details\ flypage.tpl.php

Естественно, для отображения страницы товара в настройках VirtueMart должен быть задан шаблон именно flypage.tpl.php.

Здесь привожу часть кода, отвечающего за вывод вкладок с пояснениями:

 

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

//1 вкладка

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

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

//3 вкладка

$output .= $myTabs->startPanel( '<span>Дополнительные изображения</span>', 'tab3' ); // добавляем вкладку с заголовком «Дополнительные изображения»
 $output .= '<div class="thumbnailListContainer" ><h5>'.$VM_LANG->_('PHPSHOP_MORE_IMAGES').' </h5> '.$this->vmListAdditionalImages($product_id, $images ).' </div>'; ; // выводим в контейнер под вкладкой дополнительные изображения товара
$output .= $myTabs->endPanel();

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

?>

Результат получится немного не таким, как на рисунке, но это лишь вопрос правки стилей.

Также хочу заметить, что выводить вкладки таким образом можно не только в VirtueMart, но и в других компонентах. Главное, чтобы это делалось в файле, где интерпретируется php.

Надеюсь, эта статья поможет многим делать интернет-магазины красивее и удобнее, а также продвинутся еще на шаг в освоении Joomla. Удачи!

 
медгазы здесь