статья посвящена вопросу отображения элементов VirtueMart с помощью вкладок.
VirtueMart – интернет-магазин на Joomla. Часть 24. Добавление mootools-вкладок для VirtueMart.

Сегодня многие интернет-магазины делаются по образу и подобию своих существующих, успешных конкурентов. Заказчики, как правило, не тратят средства на разработку технического задания, а пишут его самостоятельно, опираясь на известные сайты, которые им нравятся. Таким образом, сегодня все чаще и чаще можно встретить задания, в которых присутствуют различные элементы, выполняющиеся на 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. Удачи!

Об авторе
Об авторе
Wedal (Виталий). Веб-разработчик полного цикла (Full Stack). Создатель и автор сайта Wedal.ru.
Основной профиль – создание сайтов и расширений на CMS Joomla.

Другие статьи серии

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

Для отправки комментария введите код с картинки:
Защитный код
Обновить

Комментарии  

0 # alshanskiy 13.12.2010 11:23
Спасибо за полезную статью. Давно уже хочу применить данный способ отображения детализации на своём сайте. К сожалению, не имея под рукой инструментов в данный момент, не могу проверить что выйдет на деле. Но , хочу заметить, что ТАБЫ, вернее переключение на них, не должно обновлять страницу. Т.К. Процесс перезагрузки страницы утомителен для конечного потребителя, потому что если он захочет по листать множество табов, или вернутся по ним, то каждый релоад будет минусом. Кстати на примере с данный Вами именно так ). ИМХо конешно
Ответить | Ответить с цитатой | Цитировать
0 # Андрей 13.12.2010 11:49
Мне в этом смысле данный плагин нравиться, страницы не обновляет: Core Design Magic Tabs plugin
Здесь про настройку плагина почитать можно: http://joomlaforum.ru/index.php/topic,99883.0.html
А здесь пример как он выглядит в работе: http://kupitzemlyu.ru/izhs/category/product/6-uchastki-pod-igs/48-krasivaya-zemlya
Со своего опыта, в принципе очень доволен его работой, но, слышал,что у некоторых возникают проблемы из стилей в шаблоне.
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 14.12.2010 05:21
Андрей, не вижу смысла использовать дополнительный плагин, если можно пользоваться встроенными средствами Joomla.

Посмотрел вашу страничку. Не понравилось 2 вещи:
1) при смене вкладок эффект не очень приятный. Подергивается. Лучше бы просто открывалась новая вкладка, без всплывания.
2) мой браузер секунд 5 тормозил, переваривая этот скрипт.

Но в качестве альтернативы плагин очень даже ничего.
Ответить | Ответить с цитатой | Цитировать
+1 # Wedal 14.12.2010 05:16
alshanskiy, нет. Пример, приведенный мною здесь работает на mootools и страница не перезагружается.
Ответить | Ответить с цитатой | Цитировать
0 # Staff 13.12.2010 12:06
Молодца!! Очень полезная информация :-)
Ответить | Ответить с цитатой | Цитировать
0 # Александр 06.01.2011 21:22
а разве плагин от joomlaworks не работает стандартных странцах joomla прекрасно работае можете глянуть здесь http://kior.com.ua/metall/ruukki
и не надо копаться в кодах
Ответить | Ответить с цитатой | Цитировать
+1 # Wedal 07.01.2011 06:43
Александр, для стандартных материалов это хорошее решение, но VirtueMart - далеко не стандартный материал. Да и вообще, зачем использовать дополнительное расширение, если можно обойтись встроенным функционалом?
Ответить | Ответить с цитатой | Цитировать
0 # Matrix 28.01.2011 11:24
Просмотрел весь сайт по виртуемарт. сайт то что надо, думаю вы сможете помочь или подсказать как решить данный вопрос.

Сейчас делаем магазин на вирте по продаже юридических услуг и при оформлении закаказа нужно реализовать такую фишку как прикрепить файл. Возможно ли это?????
- может быть есть какое расширение
- или нужно поковырять код
- или кто может допрограмировать за $$$ (сколько по времени и цене)
Ответить | Ответить с цитатой | Цитировать
+1 # Wedal 28.01.2011 11:27
Matrix,

http://wedal.ru/forum/Poisk-podhodjashchego-rasshirenija/123-Kak-prikrepit-foto-k-zakazu-v-Virtuemart.html
Ответить | Ответить с цитатой | Цитировать
0 # Virocracy 04.02.2011 05:21
Доброго времени суток, скажите а вы не пользовались данным хаком? Не пойму немного почему он нормально работает, т.е. считает цены, прикрепляет изображения только при добавлении двух и более полей http://forum.virtuemart.net/index.php?topic=39666.0
Ответить | Ответить с цитатой | Цитировать
0 # Александр 14.03.2011 10:06
Посмотрите плагин для Вирту. Есть бесплатная версия, загружает к товару 1 файл и платная.
http://www.bixie.org/downloads/view_category/1-virtueupload.html
Я пользуюсь платной версией, очень удобный плагин, вот пример: http://www.apechati.ru/index.php?page=shop.product_details&flypage=flypage_pechati.tpl&product_id=311&category_id=39&option=com_virtuemart&Itemid=2&vmcchk=1&Itemid=2
Ответить | Ответить с цитатой | Цитировать
0 # Matrix 28.01.2011 12:47
Спасибо буду пробовать
Ответить | Ответить с цитатой | Цитировать
0 # VARion 10.02.2011 13:50
Здравствуйте, Wedal.
Огромное спасибо за этот сайт! Я здесь постоянно нахожу много полезной информации по VirtueMart. Возможно Вы сможете мне помочь. Я использую VirtueMart 1.1.7 и Gantry-framework 3.1.7 (http://www.gantry-framework.org/). Оба они используют mootools, но первый версию 1.11, а второй 1.3. Из-за этого Ломается плавная прокрутка страницы наверх (как я понял это конфликт библиотек). Как можно обновить в VirtueMart mootools до последней версии?
Ответить | Ответить с цитатой | Цитировать
0 # soldat 10.03.2011 05:38
Автор, спасибо за статьи. Супер, написано понятным и доступным языком, даже если не совсем знаешь php и html.

Спасибо. :lol:
Ответить | Ответить с цитатой | Цитировать
0 # soldat 14.03.2011 05:52
Доброе время суток.
У меня проблема. Вкладки отображались отлично, пока не понадобилось создать дочерный товар. Перехожу в главный товар, все ок, но стоит выбрать дочерный, то вкладки все съезжают и они получаются откртые (сразу все). Подскажите куда копать?
Спасибо.
Ответить | Ответить с цитатой | Цитировать
0 # soldat 19.04.2011 06:07
В IE8 вот такая ошибка, но не везде, в некоторых товарах отображается нормально.


В чем причина?
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 20.04.2011 01:43
soldat, причина в безмозглом браузере.
Если серьезно, попробуйте активировать плагин Joomla System - Mootools Upgrade. Также очень вероятно, что ошибку вызывает сторонний скрипт(не mootools), который подключается на этой странице.
Ответить | Ответить с цитатой | Цитировать
0 # soldat 20.04.2011 03:15
Цитирую Wedal:
soldat, причина в безмозглом браузере.
Если серьезно, попробуйте активировать плагин Joomla System - Mootools Upgrade. Также очень вероятно, что ошибку вызывает сторонний скрипт(не mootools), который подключается на этой странице.

Спасибо за ответ )
Но причину нашел методом тыка, я накосячил, когда в дочерних товарах делал кнопку "Заказать" (если товара нет на складе).
Ответить | Ответить с цитатой | Цитировать
0 # Дмитрий 1981 20.04.2011 12:39
Е мое и это работает! У меня была такая проблема стоит фильтр товаров виртуемарт VM Universal Search PRO и там фильтрация делается на аякс(без перезагрузки страницы) и ни один плагин табов не хотел работать с этим фильтром корректно. Я думал что уже ничего не поможет но это хак реально работает все круто открывается. Спасибо автору!
Ответить | Ответить с цитатой | Цитировать
0 # soldat 20.04.2011 21:44
Цитирую Дмитрий 1981:
Е мое и это работает! У меня была такая проблема стоит фильтр товаров виртуемарт VM Universal Search PRO и там фильтрация делается на аякс(без перезагрузки страницы) и ни один плагин табов не хотел работать с этим фильтром корректно. Я думал что уже ничего не поможет но это хак реально работает все круто открывается. Спасибо автору!


Не много не в тему, но у тебя VM Universal Search PRO на денвере или просто на апаче работал? До переноса на хостинг?
Ответить | Ответить с цитатой | Цитировать
0 # SP86 30.05.2011 21:50
Спасибо автору статьи все прекрасно работает. Но вот такой интересный вопрос. Например мой товар имеет описание которое тоже необходимо разбить (описание, технические характеристики, комплектация) Просто насколько я понял мы в табах выводим переменные Виртуемарта. и за описание отвечает переменная $product_description.(при добавлении товара можно вводить полное описание). Может есть вариант создать похожие на нее переменные которые и будут отвечать за другие вкладки но косающиеся описания товара (и их по такому же принципу что и $product_description прописать в табах) а потом пускай идут себе отзывы и доп. фото.
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 31.05.2011 02:01
SP86, можно, но только через достаточно сложный хак. Еще эту проблему можно решить создавая вкладки не на уровне шаблона Virtuemart, а на уровне описания товара. Там придется подключить доп. скрипт и вводить описание в DIV'ах с дополнительными селекторами. Т.е. полное описание, например, будет состоять из трех DIV'ов, в которых будут описание, технические характеристики, комплектация, а скрипт будет делать из этих DIV'ов вкладки.
Ответить | Ответить с цитатой | Цитировать
0 # SP86 31.05.2011 07:08
Вы имеете в виду табы в табах? что напримере этого? (просто дизайн табов немного угловатый) http://eco-smoke.com.ua/elektronnyie-sigaretyi/elektronnaya-sigareta-m6.html. Или то что вы предлагаете даст возможность сделать табы просто в один ряд?
Ответить | Ответить с цитатой | Цитировать
-2 # Wedal 01.06.2011 01:59
SP86, да, что-то типа того, что вы показали. Т.е. реально у нас описание одно общее, но оно разделяется табами.
Ответить | Ответить с цитатой | Цитировать
0 # Andrew 30.08.2011 13:28
Да, спасибо автору. Но, по моему есть один недочет. PHP-Joomla-код - это, конечно же, хорошо, но хотелось бы увидеть еще и банальный HTML код этих вкладок до того, как приступать к "допиливанию". Понять, какие стили и где используются, для лучшего планирования своих стилей. Хотелось бы узнать какие значения функции $myTabs->startPanel() куда будут подставлены в HTML коде.
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 31.08.2011 03:51
Andrew, если примера CSS из статьи не хватает, то просто попробуйте создать эти вкладки и посмотреть.
Ответить | Ответить с цитатой | Цитировать
0 # Иван 09.09.2011 14:03
Добрый день, Wedal!
Тема очень актуальная!
Сделал все, как описано выше.
Практически получилось, только возникла одна проблема.))
Когда сделал, то название вкладок "Описание", "Отзывы", "Дополнительные изображения" не отобразились. Вместо них выводятся ромбики с вопросами (такое впечатление, что текст названия вкладки не распознается).
Подскажите, как можно исправить?!
P.S. Спасибо за Ваш сайт! Очень много полезной и хорошей информации, написанной доступным и простым языком, даже для тех, кто очень далек от web программирования.
Ответить | Ответить с цитатой | Цитировать
0 # Virocracy 09.09.2011 14:26
Цитирую Иван:
Добрый день, Wedal!
Тема очень актуальная!
Сделал все, как описано выше.
Практически получилось, только возникла одна проблема.))
Когда сделал, то название вкладок "Описание", "Отзывы", "Дополнительные изображения" не отобразились. Вместо них выводятся ромбики с вопросами (такое впечатление, что текст названия вкладки не распознается).
Подскажите, как можно исправить?!
P.S. Спасибо за Ваш сайт! Очень много полезной и хорошей информации, написанной доступным и простым языком, даже для тех, кто очень далек от web программирования.

Просто пересохранить файлы, которые собственно изменяли в UTF8 без BOM
Ответить | Ответить с цитатой | Цитировать
0 # Иван 09.09.2011 14:50
Спасибо!!!!!!!!!!!!!!!!!!
Все получилось!!!!!!!!!!! :D
Ответить | Ответить с цитатой | Цитировать
0 # Любовь 16.09.2011 13:13
размещала эти вкладки в datsogallery, включила плагин... но вкладки не работают.. не перелистываются, а отображают информацию рядом с вкладкой... что не так?
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 17.09.2011 04:39
Любовь, не знаю. Нужно смотреть код. Создавайте тему на форуме, выкладывайте код и картинку. Постараемся помочь.
Ответить | Ответить с цитатой | Цитировать
0 # Duke 27.10.2011 12:24
Ура.. По этому способу наконец-то получилось вывести табы ) Пробовал множество способов. Но из-за того что у меня есть другие плагины которые "подпиляны" - табы конфликтовали или отображались не верно. Спасибо.
п.с. http://vse-est.com.ua/

Понимаю что не в тему.
Посоветуйте SEO модуль который не сильно снизит и без того не быструю производительность.
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 28.10.2011 02:07
Duke, ищите хороший router для Virtuemart. Такой есть в открытом доступе.
Ответить | Ответить с цитатой | Цитировать
+1 # Oleg 14.11.2011 15:28
Привет.С Этими табами все в порядке,если бы не ие9.Они не работают в этом браузере.Не подскажите что делать и как это лечить?
Ответить | Ответить с цитатой | Цитировать
0 # Михаил 18.01.2012 04:42
сделал все по инструкции. на одном сайте все заработало отлично. а вот на втором он в ряд эти вкладки не строит а ставит друг под друга. при этом в консоли firebug вижу следующее
this.dlist.getElements is not a function
[Прерывать на этой ошибке]

this.titles = this.dlist.getElements('dt');

Это ошибка файла media/system/js/tabs.js
joomla 1.5.25
как победить данную проблему?
Ответить | Ответить с цитатой | Цитировать
0 # Андрей 23.02.2012 15:28
Добрый День ребята. Возникла нужда создания 3 вкладок в магазине JoomShopping (описание, характеристики, отзывы) , подскажите плиз как это сделать. Все что нахожу в нете - только под VirtueMart . А из-за большого количества инфы в joomshopping - описание к товару выглядит весьма устрашающе. На джумлу кинул два плагина Magic Tabs и Scriptgrator. Но настроить пока не догоню как. А сам я не программер, и догнать как это сделать пока не могу. Можете подсказать нубу по шагово как это сделать. Заранее вам благодарен.
Ответить | Ответить с цитатой | Цитировать
0 # Алекс 26.03.2012 16:26
Цитирую Wedal:
Любовь, не знаю. Нужно смотреть код. Создавайте тему на форуме, выкладывайте код и картинку. Постараемся помочь.


У меня такая же беда на joomla 2.5
C чистого листа поставил, не работает. 100 раз проверял. Румаю проблема в библиотеке. Как исправить не знаю, нужна помощь.
Ответить | Ответить с цитатой | Цитировать
0 # Андрей 18.09.2012 19:06
Все сделал все работает просто супер, за исключением IE9. Как победить проблему? Помогите....
Ответить | Ответить с цитатой | Цитировать
0 # Олег 31.01.2013 00:24
Здравствуйте, подскажите пожалуйста каким кодом вывести комментарии Jcomments в табе карточки товара (J2.5+VM2.0.18)?
Ответить | Ответить с цитатой | Цитировать
+1 # Wedal 31.01.2013 02:40
Олег,
Код:$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);
}
Ответить | Ответить с цитатой | Цитировать
0 # Олег 31.01.2013 15:43
Wedal,
благодарю за ответ, я не силен в php, не могли бы вы данный код показать на примере вывода стандартных отзывов, которые у меня выводятся в таб кодом:
if ($this->loadTemplate('reviews')) {
$output .= $myTabs->startPanel( JText::_('COM_VIRTUEMART_REVIEWS'), 'tab8' );
$output .= ''.$this->loadTemplate('reviews').'';
$output .= $myTabs->endPanel();
}
Ответить | Ответить с цитатой | Цитировать
0 # Игорь 19.02.2013 08:08
Наверное самый глупый вопрос..
А как эти вкладки оформалять в описании товара, код вставил, ксс поправил, я так понимаю нужно писать в виде:
"какойто тег" нужный мне текст "какойто тег закрытый", просветите пожалуйста!
Ответить | Ответить с цитатой | Цитировать
0 # Thatcher 16.01.2015 03:03
Thanks for being a fantastic resource.
Ответить | Ответить с цитатой | Цитировать
0 # davudo 14.06.2015 20:06
Спасибо. Очень доступно.
Ответить | Ответить с цитатой | Цитировать