Сегодня статья получилась достаточно интересная и сложная. Приходило ли вам в голову показывать страницу товара Virtuemart во всплывающем окне(аналогично картинкам)? Ведь если вдуматься, это очень удобно для пользователя. Гораздо удобнее, чем каждый раз заходить на страницу товара, а потом возвращаться к категории товаров. Кроме очевидного удобства для пользователей мы имеем чистый код страницы товара, не содержащий повторяющегося контента в виде модулей, копирайтов и.т.д. За счет этого мы уменьшаем нагрузку на сервер и экономим трафик. Заманчиво? Тогда читайте далее.
VirtueMart – интернет-магазин на Joomla. Часть 30. Просмотр товаров Virtuemart во всплывающем окне.

Сегодня статья получилась достаточно интересная и сложная. Приходило ли вам в голову показывать страницу товара Virtuemart во всплывающем окне(аналогично картинкам)? Ведь если вдуматься, это очень удобно для пользователя. Гораздо удобнее, чем каждый раз заходить на страницу товара, а потом возвращаться к категории товаров. Кроме очевидного удобства для пользователей мы имеем чистый код страницы товара, не содержащий повторяющегося контента в виде модулей, копирайтов и.т.д. За счет этого мы уменьшаем нагрузку на сервер и экономим трафик. Заманчиво? Тогда читайте далее.

Просмотр товаров Virtuemart во всплывающем окне. Постановка задачи.

Прежде всего точно определимся с задачей, которую хотим решить. Она такова:

показывать страницу товара Virtuemart во всплывающем окне. Эта страница содержит только данные о товаре(шаблон flypage) и не содержит шапки, подвала, колонок и модулей Joomla.

Вот и всё. Это основная задача. Как вы увидите далее, в процессе ее выполнения всплывет еще несколько подзадачек, которые придется решать.

Решение задачи. Шаг 1. Подключение скрипта.

Прежде всего, нам понадобится «чудоскрипт», позволяющий показывать html-код во всплывающем окне. Таковым является Facebox. Он работает аналогично Lightbox, но только выводит не изображения(хотя можно и их), а html-код. Скачать Facebox можно по этой ссылке(кстати, попробуйте найти на этой странице кнопку скачивания. Я искал секунд 20 ;)).

В архиве вы найдете папки lib и src. Нам понадобятся только они. Скопируем эти папки в папку с используемым шаблоном Joomla и в файле index.php шаблона добавим между тегами <head></head> следующие строчки:

1
2
3
4
5
6
7
<script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/lib/jquery.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/src/facebox.js"></script>
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/src/facebox.css" type="text/css" />

Здесь мы подключили библиотеку JQuery в режиме noConflict, а также скрипт и оформление всплывающего окна.

Далее, сразу же под этим кодом добавляем:

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
  jQuery(document).ready(function($) {
  $('a[rel*=facebox]').facebox({
  loadingImage : '<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/src/loading.gif',
  closeImage : '<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/src/closelabel.png'
 
})
  })
</script>

Этим кодом мы говорим, что скрипт должен реагировать на атрибут rel=”facebox”, т.е. открывать все ссылки с этим тегом во всплывающем окне.

Готово. Осталось указать ему ссылки.

Решение задачи. Шаг 2. Указание ссылок.

Для того, чтобы открывать страницу товара во всплывающем окне, нам нужно добавить ко всем ссылкам, ведущим на эту страницу, атрибут rel=”facebox”. Для этого идем в папку components\com_virtuemart\themes\default\templates\browse, выбираем в ней шаблон browse, который используется в магазине(посмотреть можно в настройках Virtuemart, вкладка «Сайт»). В шаблоне browse находим строчку которая выводит ссылку на страницу товара и добавляем к ссылке атрибут rel=”facebox”. На примере browse_1:

1
2
3
4
5
<h3>
<a rel="facebox" title="<?php echo $product_name ?>" href="/ <?php echo $product_flypage ?>">

<?php echo $product_name ?>
</a>

</h3>

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

После всех этих действий страница товара будет открываться во всплывающем окне. Но есть одно НО. На ней будет показан не только товар, а весь сайт целиком. Нам это не нужно, поэтому добавляем к ссылке в коде выше окончание &tmpl=component. Это означает, что будет показана не вся страница целиком, а только текущий компонент. Код получится следующий:

1
2
3
4
5
<h3>
<a rel="facebox" title="<?php echo $product_name ?>" href="/ <?php echo $product_flypage ?> &tmpl=component">
<?php echo $product_name ?>
</a>

</h3>

На этом всё. Скрипт подключен. Можно проверять. У меня это выглядит так:

Просмотр товаров Virtuemart во всплывающем окне

Не знаю как вам, а мне нравится. Красиво и удобно. :-).

Проблемы и их решения. Z-index.

Полюбовались? Порадовались, что все получилось? Всё, вернитесь на землю :-). Если внимательно изучить результат, то мы увидим, что всплывающее окно, появляющееся при добавлении товара в корзину, собственно, не появляется. В чем тут дело? Дело в том, что окно на самом деле появляется, но только под окном с товаром. Чтобы это исправить, нужно немного поработать с css-свойством z-index, добавив в файл components\com_virtuemart\themes\default\theme.css строчку:

1
.cbContainer{z-index: 1000;}

После этого сообщение о добавлении товаров в корзину станет видно.

Проблемы и их решения. Индексация.

Если предыдущая проблема решалась сравнительно легко, то над текущей нужно хорошенько подумать, т.к. она гораздо сложнее. С точки зрения посетителей сайта все прекрасно – быстро и удобно. С точки зрения поисковиков еще лучше – чистый, свободный от дублей и повторяющихся модулей контент. Но что будут индексировать поисковики? Они добавят в индекс чистую страницу с контентом товара. Тут выходит проблемка: если посетитель придет с поисковой системы по прямой ссылке на контент(страницу товара), то скрипт, естественно, не применится и выглядеть такая страницы будет примерно так:

Просмотр товаров Virtuemart во всплывающем окне

Не очень то красиво для первого знакомства посетителя с сайтом, не правда ли?

Что делать в этой ситуации? Хороший вопрос! Получается, поисковикам нужно отдавать ссылку без &tmpl=component, а посетителям с этим окончанием. В этом случае посетители, пришедшие на страницу товара по прямой ссылке увидят ее хоть не во всплывающем окне, но в стандартном виде.

Как же реализовать нечто подобное? Как отличить поискового робота от человека? Легко. Поисковые роботы имеют одну особенность: они не обрабатывают JavaScript. Поэтому достаточно дополнить все ссылки на странице текстом &tmpl=component, используя JavaScript. Т.к. у нас подключен JQuery, сделать это очень легко. Всего одна строчка кода, немного изменяющая код, который мы писали на шаге 1:

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
  jQuery(document).ready(function($) {
  $('a[rel*=facebox]').facebox({
  loadingImage : '<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/src/loading.gif',
  closeImage : '<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/src/closelabel.png'
  })
  $('a[rel*=facebox]').attr('href', function () {return $(this).attr('href')+'&tmpl=component';});
  })
</script>

Теперь всё замечательно. Но поисковики не получат чистой страницы товара, а получат стандартную.

Какие еще есть варианты? Например, можно не использовать Javascript, а проверять в PHP, что посетитель, который пришел на сайт, не робот и автоматически обрезать для него &tmpl=component. Но уже другая история...

Проблемы и их решения. Кроссбраузерность.

Facebox корректно работает во всех браузерах, кроме наших любимых ослов(IE). Точнее так: IE8 – совместим, IE7 – совместим частично, требует корректировки CSS(проблема решается условными комментариями или CSS-хаками), IE6 – я даже не проверял(гори он в аду для него ставим заглушку или отключаем rel=”facebox” через php). Так что эта проблема – не проблема :-).

Что мы получили в итоге? На мой взгляд, мы получили довольно оригинальный подход к построению интернет-магазина. Магазин, показывающий товар во всплывающем окне, удобен, оригинален, а главное, выделяется из своих собратьев. В следующей статье серии я еще немного раскрою тему Facebox и покажу как с помощью этого и другого скрипта создать красивый и удобный просмотр всех изображений товара во всплывающем окне. Подписывайтесь на обновления! Удачи!

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

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

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

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

Комментарии  

0 # slovoblud 05.12.2011 20:45
Wedal Спасибо вам большое. Ваша статья как всегда практична и очень актуальна.Когда работаю над сайтами на joomla то регулярно захожу на ваш сайт, за нужными решениями. И еще вопрос возник, что значит поставить заглушку на IE6?
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 06.12.2011 02:16
slovoblud, заглушка - это специальная страничка, на которую автоматически перенаправляются все посетители, которые зашли на сайт через IE6. На этой страничке содержится информация о том, что браузер устарел и не позволяет полноценно использовать сайт. Там предлагаются ссылки на скачивание любого из современных браузеров.
Наверное стоит написать по заглушке отдельную статейку :-) .
Ответить | Ответить с цитатой | Цитировать
0 # AKS99 06.12.2011 14:58
А если я хочу сделать без всплывающего окна, просто карточку товара без шапки и меню, то в browse надо вставить href="/ &tmpl=component"> ?
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 07.12.2011 04:35
AKS99,
href=" &tmpl=component">
Слеш "/" там вообще нигде не нужен. Не знаю даже откуда он появился. В коде добавляемой статьи его нет в принципе. Редактор вставки кода сходит с ума...
Ответить | Ответить с цитатой | Цитировать
+1 # HotDog 10.12.2011 08:48
$('a[rel*=facebox]').attr('href',$('a[rel*=facebox]').attr('href')+'&tmpl=component');
У всех товаров ссылка становится одна =).
Исправил на
$('a[rel*=facebox]').attr('href', function () {return $(this).attr('href')+'&tmpl=component';}); Вроде ровней пошло.
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 12.12.2011 04:06
HotDog, да, действительно, я ошибся. Спасибо, что заметили. Поправил по вашему замечанию.
Ответить | Ответить с цитатой | Цитировать
0 # firstgm 12.12.2011 10:30
Не пойму, что еще не так... Сначала вообще ошибка была после первого шага. Нашел причину в строчках:
Ответить | Ответить с цитатой | Цитировать
0 # firstgm 12.12.2011 10:32
Убрал после src="/ - слэш
После всплывающее окно стало появляться, но такой узкой, пустой полоской и есть только крестик для закрытия.

Что может быть не так ?
Файл browse_2.php кусок кода:
Ответить | Ответить с цитатой | Цитировать
0 # firstgm 12.12.2011 10:36
Извините, пытался вставить комент с кусками кода не получилось... Поэтому разделилось на 3 коментария. Помогите с проблемой пожалуйста, не у кого так не было ?
Ответить | Ответить с цитатой | Цитировать
0 # mt_3000 12.12.2011 11:37
Скачал скрипт за 5 сек - Downloads
Ответить | Ответить с цитатой | Цитировать
0 # mt_3000 12.12.2011 11:39
src="/lib/jquery.js">
Скрипты вот так правильней подключать
Ответить | Ответить с цитатой | Цитировать
0 # mt_3000 12.12.2011 11:40
код порезало
Ответить | Ответить с цитатой | Цитировать
0 # firstgm 12.12.2011 11:45
Пункт: Проблемы и их решения. Индексация.
4 строка в последнем коде "php и echo" написано слитно. Исправьте пожалуйста :-)
А моя проблема остается актуальной...
Ответить | Ответить с цитатой | Цитировать
0 # mt_3000 12.12.2011 11:48
Уберите все лишние слэши и будет вам счастье
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 12.12.2011 11:50
firstgm, mt_3000, в комментариях код вставляется с помощью тега CODE.
Да, слеши нужно убрать. В оригинальном коде их нет, но плагин раскраски кода сам их добавил. :o
Ответить | Ответить с цитатой | Цитировать
0 # firstgm 12.12.2011 12:05
Кнопочку бы сюда добавить в Дополнительные BBCode в компоненте JComments ;-)
А по точнее не подскажете где еще слэши убрать надо ?
Ответить | Ответить с цитатой | Цитировать
+1 # Wedal 12.12.2011 12:11
firstgm, кнопочка появится после обновления. Слеши убрать везде в конструкции Код:"/<?php
Ответить | Ответить с цитатой | Цитировать
0 # firstgm 12.12.2011 12:12
Browse_2.php
Код:<h2>
<a rel="facebox" title="<?php echo $product_name ?>" style="font-size:16px; font-weight:bold;" href="<?php echo $product_flypage ?> &tmpl=component"><?php echo $product_name ?></a>
</h2>


index.php
Код:<!-- Здесь мы подключили библиотеку JQuery в режиме noConflict, а также скрипт и оформление всплывающего окна. -->
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/lib/jquery.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/src/facebox.js"></script>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/src/facebox.css" type="text/css" />
<!-- Этим кодом мы говорим, что скрипт должен реагировать на атрибут rel=”facebox”, т.е. открывать все ссылки с этим тегом во всплывающем окне. -->
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loadingImage : '<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/src/loading.gif',
closeImage : '<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/src/closelabel.png'
})
$('a[rel*=facebox]').attr('href', function () {return $(this).attr('href')+'&tmpl=component';});
})
</script>

Все же вроде правильно ?
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 12.12.2011 12:16
firstgm, если используете &tmpl=component в скрипте, то убирайте это из php-кода.
Ответить | Ответить с цитатой | Цитировать
0 # mt_3000 12.12.2011 12:25
как код вставил?
Ответить | Ответить с цитатой | Цитировать
0 # mt_3000 12.12.2011 12:32
Код:<script type="text/javascript" src="<?php echo $templateUrl; ?>/lib/jquery.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript" src="<?php echo $templateUrl; ?>/src/facebox.js"></script>
<link rel="stylesheet" href="<?php echo $templateUrl; ?>/src/facebox.css" type="text/css" />
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loadingImage : '<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/src/loading.gif',
closeImage : '<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/src/closelabel.png'
})
})
</script>

так подключи
Ответить | Ответить с цитатой | Цитировать
0 # mt_3000 12.12.2011 12:34
Код:<a rel="facebox" title="<?php echo $product_name ?>" href="<?php echo $product_flypage ?> &tmpl=component"> <?php echo $product_name ?>
</a>

А вот так сделай вывод
Ответить | Ответить с цитатой | Цитировать
0 # firstgm 12.12.2011 12:43
Что то мне подсказывает, что у меня в теге head уже что то в этом роде есть, может поэтому и конфликт идет ?
Код:<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $document->baseurl; ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $document->baseurl; ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="<?php echo $templateUrl; ?>/css/template.css" media="screen" />
<!--[if IE 6]><link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.ie6.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.ie7.css" type="text/css" media="screen" /><![endif]-->
<script type="text/javascript" src="<?php echo $templateUrl; ?>/jquery.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript" src="<?php echo $templateUrl; ?>/script.js"></script>
<!-- Здесь мы подключили библиотеку JQuery в режиме noConflict, а также скрипт и оформление всплывающего окна. -->
<script type="text/javascript" src="<?php echo $templateUrl; ?>/lib/jquery.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript" src="<?php echo $templateUrl; ?>/src/facebox.js"></script>
<link rel="stylesheet" href="<?php echo $templateUrl; ?>/src/facebox.css" type="text/css" />
<!-- Этим кодом мы говорим, что скрипт должен реагировать на атрибут rel=”facebox”, т.е. открывать все ссылки с этим тегом во всплывающем окне. -->
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loadingImage : '<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/src/loading.gif',
closeImage : '<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/src/closelabel.png'
})
})
</script>
</head>
Ответить | Ответить с цитатой | Цитировать
0 # firstgm 12.12.2011 12:46
mt_3000, я к тебе в аську постучался, авторизируй пожалуйста.
Ответить | Ответить с цитатой | Цитировать
0 # mt_3000 12.12.2011 12:51
Код:<script type="text/javascript" src="<?php echo $templateUrl; ?>/jquery.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>

вот это убери - у тебя оно 2 раза - конфликт
Ответить | Ответить с цитатой | Цитировать
0 # firstgm 12.12.2011 14:34
sh404sef - System plugin
Выключение этого плагина решает мою проблему, но так не пойдет... он нужный
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 12.12.2011 15:41
firstgm, если вы используете SEF, то подключить через JavaScript таким образом не получится, только напрямую в коде.
Ответить | Ответить с цитатой | Цитировать
0 # firstgm 12.12.2011 17:02
Т.е. вместо этой строки :
Код:<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/src/facebox.js"></script>
Я вставляю скрипт из этого файла прям в файл index.php ?
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 13.12.2011 03:26
firstgm, нет, я имел ввиду, что вы вставляете в файле Browse код:
Код:<a rel="facebox" title="<?php echo $product_name ?>" href="<?php echo $product_flypage ?>&tmpl=component">
<?php echo $product_name ?>
</a>


Всё остальное точно также, но без строчки:
Код:$('a[rel*=facebox]').attr('href', function () {return $(this).attr('href')+'&tmpl=component';});
Ответить | Ответить с цитатой | Цитировать
0 # firstgm 13.12.2011 04:37
Хорошо, спасибо, вечером попробую еще раз.
Ответить | Ответить с цитатой | Цитировать
0 # vetalua 15.12.2011 19:55
Здравствуйте. Перепробовал все варианты описанные в комментариях включая последний. Всплывающее окно так и не появляется. Плагин SRF sh404 не использую... Joomla 1.5.15 = VM 1.4...
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 16.12.2011 02:03
vetalua, для начала проверьте, что файлы скриптов и CSS-стилей подключены правильно. Для этого просмотрите исходный код страницы, например в FF. Кликните по ссылкам на подключенные скрипты и CSS-файлы. При клике должны открываться их листинги.
Ответить | Ответить с цитатой | Цитировать
0 # vetalua 16.12.2011 08:52
Wedal, проверил как вы сказали. Подключено правильно. Мне кажется у меня конфликт с mod_socialslider. Как только я в index.php шаблона сайта подключаю Facebox - mod_socialslider перестает работать. В то же время если я отключаю mod_socialslider - скримт все-равно не работает... Что же делать???
Ответить | Ответить с цитатой | Цитировать
0 # vetalua 16.12.2011 09:09
А нет, вы знаете, все-таки не подключается... Вот так выглядит ссылка в Firebug:
Подробнее...

rel="facebox" - есть в ссылке... Значит java-script не сработал?
Ответить | Ответить с цитатой | Цитировать
0 # vetalua 16.12.2011 09:11
Подробнее...
Ответить | Ответить с цитатой | Цитировать
0 # vetalua 16.12.2011 10:02
В общем получилось подключить! Проблема была в не правильно указанном пути. Прописал путь без переменных...
Окно появляется... Но есть одно но...
После того как появилось окно, я его к примеру закрываю - но на странице весь контент съезжает в право... Т. е. когда загружается скрипт всплывающего окна - он вносит какие-то изменения в стили страницы сайта... Кто-то сталкивался с подобной проблемой?
Ответить | Ответить с цитатой | Цитировать
+1 # vetalua 16.12.2011 10:50
Сдвигаются модули, в которых использовуется JavaScript:
...
Ответить | Ответить с цитатой | Цитировать
+1 # raven90 28.12.2011 18:21
Добрый день. Только начал изучать joomlу. Хотел бы спросить, как можно сделать возможность пользователю (зарег-ному) создавать свой микро интернет-магазин на моем сайте
Ответить | Ответить с цитатой | Цитировать
+1 # Wedal 29.12.2011 02:32
raven90, с помощью Virtuemart - нет. Такой функционал изначально заложен в Virtuemart, но он так и остался на стадии alpha.
Ответить | Ответить с цитатой | Цитировать
+1 # raven90 29.12.2011 09:13
Wedal, спасибо за информацию. Не знаешь с помощью чего можно это сделать?
Ответить | Ответить с цитатой | Цитировать
+1 # droffick 07.01.2012 22:32
Огромное спасибо за тему, даже и не предполагал, что такой функционал можно сделать очень просто.

Нужно доработать это решение для товаров с позициями. Проблема в следующем: после выбора определенной позиции товара, старница в javascript не обновляется, зато стандартная карточка товара изменяется(на заднем плане=)). Думаю нужно добавить соответствующие атрибуты для ссылок из выпадающего списка выбора позиций.
Ответить | Ответить с цитатой | Цитировать
+1 # Wedal 08.01.2012 07:06
droffick, проблема тут в том, что при выборе позиции товара страница перезагружается. решение я вижу только в том, чтобы обрабатывать позиции с помощью AJAX, что уже гораздо сложнее, чем всплывающее окно.
Ответить | Ответить с цитатой | Цитировать
+1 # Матвей 09.01.2012 14:13
Здравствуйте я делаю галерею товаров на VM у меня стоит Magic Zoom будет он работать в всплывающем окне?
Ответить | Ответить с цитатой | Цитировать
+1 # Настя 11.02.2012 16:15
Здравствуйте! Делаю все по пунктам. Появляется всплывающее окно, но она сдвигается влево и тут же перезагружается страница на пустую. И ещё, всплывает окно полного сайта, а не только товара.
Подключаю так: /templates//lib/jquery.js"> jQuery.noConflict(); /templates//src/facebox.js"> /templates//src/facebox.css" type="text/css" /> jQuery(document).ready(function($) { $('a[rel*=facebox]').facebox({ loadingImage : '/templates//src/loading.gif', closeImage : '/templates//src/closelabel.png' }) $('a[rel*=facebox]').attr('href', function () {return $(this).attr('href')+'&tmpl=component';}); })

В карочке товара: Цитата:
Ответить | Ответить с цитатой | Цитировать
+1 # Настя 11.02.2012 16:19
Почему то код порезался, в общем, подключаю так же! Пробую ещё раз: Код:<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/lib/jquery.js"></script> <script type="text/javascript">jQuery.noConflict();</script> <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/src/facebox.js"></script> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/src/facebox.css" type="text/css" /> <script type="text/javascript"> jQuery(document).ready(function($) { $('a[rel*=facebox]').facebox({ loadingImage : '<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/src/loading.gif', closeImage : '<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/src/closelabel.png' }) $('a[rel*=facebox]').attr('href', function () {return $(this).attr('href')+'&tmpl=component';}); }) </script>

Код: <a rel="facebox" style="font-size:14px; font-weight:bold;" href="<?php echo $product_flypage ?> &tmpl=component"><?php echo $product_name ?></a>
Ответить | Ответить с цитатой | Цитировать
+2 # Алексей 12.02.2012 14:58
а где править размеры этого всплывающего окна?????
Ответить | Ответить с цитатой | Цитировать
+2 # Gremlin 16.02.2012 08:10
Все чудесно работает! Спасибо автору!
Однако есть 2 проблемы...
1. У меня для комментирования прикручен Jcomments 2.2. Так вот во всплывающем окне нельзя оставить комментарий - Jcomments говорит: "введите текст сообщения", само-собой сообщение я ввожу. И еще над полем ввода комментариев нет иконок редактирования и смайлов. Где может быть косяк?
2. На карточке товара вверху выводятся 2 ссылки: на предыдущий товар и на следующий товар. Эти ссылки (в flypage.tpl) я тоже оформляю тегом rel="facebox", но они открываются не в окне facebox, а в обычном режиме и без остального сайта - только один flypage :(
Ответить | Ответить с цитатой | Цитировать
+1 # Gremlin 16.02.2012 08:11
Комментарии прикручены в Virtuemart, к товарам
Ответить | Ответить с цитатой | Цитировать
+1 # Мария 16.04.2012 14:08
Здравствуйте,у меня стоит virtuemart,я купила платный шаблон,установила его,и такой папки как default,у меня нет.Есть 3 другие папки:bluestork,huthor и system.А в них еще по 4 папки.
Проблема в том,что у меня нет всплывающего окна,и я не могу найти файл,чтобы поменять название кнопки"положить в корзину"
Ответить | Ответить с цитатой | Цитировать
+1 # Людмила 31.05.2012 07:10
Здравствуйте! Применила ваш совет
Код:$('a[rel*=facebox]').attr('href', function () {return $(this).attr('href')+'&tmpl=component';});
в случае, когда открывается модальное окно с производителем в карточке товара.

До этого, когда нажимала на ссылку с производителем, модальное окно показывалось, но если эту ссылку открывать в отдельном окне, то там показывался чистый контент производителя.
Теперь, после вставки Код:$('a[class*=modal]').attr('href', function () {return $(this).attr('href')+'&tmpl=component';}); в отдельном окне всё нормально, а в модельном не просто контент, а все содержимое сайта.
Подскажите, пожалуйста, как сделать, чтобы в случае открытия ссылки в модальном окне не было ничего лишнего, а в случае отрытия ссылки в новой вкладе отобралось все как &tmpl=component.
Ответить | Ответить с цитатой | Цитировать
-1 # Алевтина 19.06.2012 17:58
А для Virtuemart 2.0.6 кто-нибудь пробовал?
Получиться ли?
Ответить | Ответить с цитатой | Цитировать
-1 # oksana 12.07.2012 04:44
я поставила на wm 2.0.8 - работает
Сделала так
Подключила скрипты как в статье, а ссылку так:view/category/tpl/default.php
вот это стр ~ 225 echo $product->images[0]->displayMediaThumb('class="browseProductImage" border="0" title="'.$product->product_name.'" ',true,'class="modal"');
на это echo $product->images[0]->displayMediaThumb('class="browseProductImage" border="0" title="'.$product->product_name.'" ',true,'rel="facebox" href="'.$product->link. '(с или без)&tmpl=component"');

В файле но при вкл чпу не хочет - всю стр грузи(шапку модули тд)с прописаным или подкл через js &tmpl=component не грузится стр, если ссылку прописать в aдр строке то выдает ошибку 500. Как вписать &tmpl=component в ссылку которая образуется для товаров (index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=1&virtuemart_category_id=1&tmpl=component) Какой файл ковырять?
или скрипт какой-то?
Ответить | Ответить с цитатой | Цитировать
0 # oksana 12.07.2012 07:23
Сделала все открывается!
сама прописала ссылку в файле views/category/tpl/default.php

$urlProduct = JRoute::_('index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=' . $product->virtuemart_product_id . '&virtuemart_category_id=' . $product->virtuemart_category_id . '&tmpl=component');

echo $product->images[0]->displayMediaThumb('class="browseProductImage" border="0" title="' . $product->product_name. '" ',true,'rel="facebox" href="' . $urlProduct. '"');

Единственное остается проблема - индексирование сайта. Ссылки имеют вид /mag/kategariya/tovar/modal.html - всплывающее и /mag/kategariya/tovar.html - вся страница с шапкой и модулями. Кину карту сайта поисковикам а всплывающие запрещу сканировать. Может потом еще что-то придумаю
Ответить | Ответить с цитатой | Цитировать
-1 # troy 12.07.2012 08:26
А товар в корзину нормально добавляется?
У меня из всплывающего ни в какую не желает (((
Ответить | Ответить с цитатой | Цитировать
-1 # oksana 12.07.2012 09:23
а у меня пока просто каталог - как магазин будет работать не скоро(заказчик не готов работать в режиме интернет магазина)А потом беду решать проблемы по мере их поступления:)Там видимо конфликт скриптов идет - надо копатьcz в js

еще сделала навигацию по товаром в категории
в файле views/productdetails/tpl/default.php подключила facebox, как описывается в статье и в строках, где навигация вставила rel="facebox"
Вот так получилось



Сижу любуюсь. Жаль комменты JC не хотят работать, как-то сделала и все работало, а теперь что-то не хотят(
Ответить | Ответить с цитатой | Цитировать
0 # oksana 12.07.2012 09:25
Что-то не вставился код
Ответить | Ответить с цитатой | Цитировать
0 # oksana 12.07.2012 09:26
вот это ['product_name'], array('class' => 'previous-page');
на это
['product_name'], array('class' => 'previous-page', 'rel' => 'facebox'));
и со след стр тоже добавить rel
Ответить | Ответить с цитатой | Цитировать
0 # Николай 18.07.2012 10:52
Доброго времени суток!!
У меня такая проблема, В описании товара не отображается производитель. Помогите решить такую проблему.
Заранее спасибо.
Ответить | Ответить с цитатой | Цитировать
0 # Alex1111 13.09.2012 10:27
а как сделать, чтобы при нажатии PRODUCT DETAILS открывалось popup окно в Virtuemart 2
Ответить | Ответить с цитатой | Цитировать
0 # Andrey 12.10.2012 12:00
Здравствуйте Wedal. Можете подсказать, что надо изменить, чтобы всплывающее окно показывалось при клике по кнопке над самим изображением товара. Думаю не совсем внятное объяснение получается, легче посмотреть как хотелось бы сделать. Вот как здесь www.wildberries.ru/catalog/850/women.aspx возможно сделать?
Ответить | Ответить с цитатой | Цитировать
0 # Andrey 12.10.2012 12:04
Очень удобно сделано. Наводишь курсор на изображение с товаром, появляется "кнопка" быстрого просмотра.
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 15.10.2012 02:42
Andrey, так в статье же про это и написано. Если хотите кликать по картинке, сделайте ссылку с нее на страницу товара, по аналогии с том, что описывается в статье.
Ответить | Ответить с цитатой | Цитировать
0 # Andrey 15.10.2012 08:04
Уважаемый Wedal, спасибо за ответ. Ссылку с картинки я сделал. Спасибо Вашей статье.
Но мне кажется я не так объяснил. Если Вы не обратили внимания на ссылку приведенную постом выше, то посмотрите пожалуйста. У них реализовано так: на странице видишь изображения товаров, а при наведении на само изображение появляется кнопка "БЫСТРЫЙ ПРОСМОТР", при клике на которую появляется карточка товаров в сплывающем окне, а при клике на изображение идет стандартный переход на карточку товара. Поэтому и возник вопрос, как такое реализовать? Такое решение удобно и на мой взгляд выглядит элегантнее, а так же экономит место на странице.
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 16.10.2012 02:42
Andrey, ссылка всплывающего окна и полной страницы отличаются только 2 элементами:
1) rel="facebox"
2)&tmpl=component
Соответственно: делаете на странице 2 ссылки, одна из которых будет появляться только при наведении курсора на фото.
Ответить | Ответить с цитатой | Цитировать
0 # Andrey 16.10.2012 08:20
Вот теперь Вы меня поняли. Эх, только вот пока знаний по php не хватает у меня, что бы реализовать такое.
Ответить | Ответить с цитатой | Цитировать
0 # oksana 16.10.2012 09:20
Отличная идея, т.к. я отключила некоторые функции в карточки товара в всплывающем окне, можно будет реализовать Вашу идею, и с комментарием, типо просмотреть min карточку товара(не придумала что напишу), т.е. коммент, чтоб пользователь понял, что в карточки ограничен функционал. Ссылку на полную стр товара уже добавила в карточку. Чуть позже попробую реализовать Вашу идею. Если получится, выложу здесь процесс реализации
Ответить | Ответить с цитатой | Цитировать
0 # Andrey 16.10.2012 09:30
oksana
Если получится напишите пожалуйста, думаю многим будет интересно реализовать у себя такой вариант.
Ответить | Ответить с цитатой | Цитировать
0 # Delik0100 17.11.2012 20:25
Спасибо большое, Wedal, очень нужная вещь!
Ответить | Ответить с цитатой | Цитировать
0 # ibizza 18.12.2012 11:06
От души хочу поблагодарить за материал!!!!очень нужная вещь!!!!
Ответить | Ответить с цитатой | Цитировать
0 # Vlad 27.01.2013 05:24
Спасибо за идею, сделал на VM2. Но возникла проблема. После просмотра товара в модальном окне, нажимаю на ссылку "продолжить покупки" и дальнейшее движение происходит в модальном окне, но уже загружается не только компонент, но и весь шаблон. С хедером и футером. То же самое, если добавляю товар в корзину из модального окна. При нажатии кнопок "в корзину" или "продолжить покупки", хотелось бы что бы модальное окно закрывалось и и дальнейшая работа велась не в модальном окне. Подскажите, как реализовать эти возможности.
Ответить | Ответить с цитатой | Цитировать
0 # Delp 04.12.2015 13:05
Цитирую Vlad:
Спасибо за идею, сделал на VM2. Но возникла проблема. После просмотра товара в модальном окне, нажимаю на ссылку "продолжить покупки" и дальнейшее движение происходит в модальном окне, но уже загружается не только компонент, но и весь шаблон. С хедером и футером. То же самое, если добавляю товар в корзину из модального окна. При нажатии кнопок "в корзину" или "продолжить покупки", хотелось бы что бы модальное окно закрывалось и и дальнейшая работа велась не в модальном окне. Подскажите, как реализовать эти возможности.

Цитирую Vlad:
Спасибо за идею, сделал на VM2. Но возникла проблема. После просмотра товара в модальном окне, нажимаю на ссылку "продолжить покупки" и дальнейшее движение происходит в модальном окне, но уже загружается не только компонент, но и весь шаблон. С хедером и футером. То же самое, если добавляю товар в корзину из модального окна. При нажатии кнопок "в корзину" или "продолжить покупки", хотелось бы что бы модальное окно закрывалось и и дальнейшая работа велась не в модальном окне. Подскажите, как реализовать эти возможности.

Точно такая же проблема , Vlad вы ее решили? Если кто-то знает отпишитесь пожалуйста.
Ответить | Ответить с цитатой | Цитировать
0 # Vlad 27.01.2013 05:27
И ещё вопрос - скажите, можно ли в модальное окно загружать карточку товара из другого шаблона? Например сделать два шаблона - один для обычного просмотра, другой для вывода в модальное окно.
Ответить | Ответить с цитатой | Цитировать
0 # Максимус 16.03.2013 07:43
Спасибо автору статьи и всем участникам обсуждения, именно это статья помогла мне сделать просмотр товара категории в модальном окне, конечно еще надо точить и точить, но все таки результат есть, что я нарыл:
в файле ( \www\components\com_virtuemart\views\category\tmpl\default.php)
есть такая строка


номер строчки 244
меняем её на :






никакие скрипты дополнительные подключать не надо, в этой версии VM уже все подключено. Конечно, как я писал выше, еще нужно подтачивать, навигацию, возврат в категорию и может еще что то...да кстати JCOMMENTS работает без проблем
Ответить | Ответить с цитатой | Цитировать
0 # Максимус 16.03.2013 07:49
[quote name="Максимус"]Спасибо автору статьи и всем участникам обсуждения, именно это статья помогла мне сделать просмотр товара категории в модальном окне, конечно еще надо точить и точить, но все таки результат есть, что я нарыл:
в файле ( \www\components\com_virtuemart\views\category\tmpl\default.php)
есть такая строка
( a title="" rel="vm-additional-images" href="/">
Ответить | Ответить с цитатой | Цитировать
0 # Максимус 16.03.2013 07:50
Цитирую Максимус:
[quote name="Максимус"]Спасибо автору статьи и всем участникам обсуждения, именно это статья помогла мне сделать просмотр товара категории в модальном окне, конечно еще надо точить и точить, но все таки результат есть, что я нарыл:
в файле ( \www\components\com_virtuemart\views\category\tmpl\default.php)
есть такая строка
( a title="" rel="vm-additional-images" href="/">

как код выложить?
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 18.03.2013 01:54
Максимус, используйте тег CODE /CODE , аналогично другим тегам.
Ответить | Ответить с цитатой | Цитировать
0 # Максимус 16.03.2013 07:56
без кода...эти сообщения бесполезны
Ответить | Ответить с цитатой | Цитировать
0 # Tomio 06.04.2013 21:47
Показа товара в модальном окошке получился на ура, но одну проблему решить никак не получается, а именно - добавление товара в корзину.
При нажатии на кнопку "Купить" модальное окно закрывается, страница с категорией товаров перезагружается, а товара в корзине нет.
Пробовал и с ЧПУ, и без ЧПУ - результат один и тот же.
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 08.04.2013 03:13
Tomio, на сколько я помню, добавление в корзину из модального окна работало нормально. Вы пробовали добавлять без модального окна? В настройках Virtuemart есть опция, позволяющая отключать это окно. Возможно она у вас активирована.
Ответить | Ответить с цитатой | Цитировать
0 # Tomio 11.04.2013 10:31
Возможно я не так выразился. Опишу ход событий.
1. Захожу в категорию с товарами
2. Навожу мышкой на изображение, появляется кнопка "Быстрый просмотр".
3. Нажимаю на нее, всплывает окошко с предпросмотром карточки товара.
4. В этом окошке карточки товара я нажимаю "Купить".
5. Всплывающее окошко с карточкой товара закрывается, страница категории перезагружается и больше ничего не происходит - товаров в корзине нет.

P.S. Попробовал отключить модальное окошко с уведомлением, что товар был положен в корзину - не помогло.
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 12.04.2013 01:45
Tomio, а если отключить всплывающее окно для карточки товара, то работает нормально?
Ответить | Ответить с цитатой | Цитировать
0 # Tomio 12.04.2013 08:07
Без отображения карточки товара во всплывающем окошке кнопка "Купить" работает нормально.
Ответить | Ответить с цитатой | Цитировать
0 # Tomio 22.04.2013 08:01
В общем, проблему удалось решить поместив модальное окошко в iframe. Без него модальное окошко не работает.
Ответить | Ответить с цитатой | Цитировать
0 # Tomio 22.04.2013 08:08
Цитирую Tomio:
В общем, проблему удалось решить поместив модальное окошко в iframe. Без него модальное окошко не работает.

То есть, без него не работает кнопка "купить"
Ответить | Ответить с цитатой | Цитировать
0 # Natalia 23.04.2013 13:41
Здравствуйте.
А если переменные в такой код завернуты
Код:$data[$row][] = '<a rel="facebox" href="'.$product['product_flypage'].'" title="'.$product['product_name'].'">'.$product['product_name'].'</a>'.'<br />'.$product['product_rating'] ;
,тогда как подключить tmpl=component?
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 24.04.2013 02:19
Natalia, ссылка содержится в переменной:
Код:$product['product_flypage']
Попробуйте добавить в конце нужную часть:
Код:$data[$row][] = '<a rel="facebox" href="'.$product['product_flypage'].'&tmpl=component" title="'.$product['product_name'].'">'.$product['product_name'].'</a>'.'<br />'.$product['product_rating'] ;

Если в ссылке уже был завершающий слэш, то нужно обработать эту переменную, удалив последний символ и добавив "&tmpl=component".
Ответить | Ответить с цитатой | Цитировать
0 # Natalia 24.04.2013 06:04
Wedal, я так и делала. Не реагирует в таком виде вообще никак. Так же вся страница открывается, как и без &tmpl=component.
Ответить | Ответить с цитатой | Цитировать
0 # Natalia 24.04.2013 06:11
И еще куча ошибок в консоли появляется, когда скрипт подключаю. Такие:
Uncaught SyntaxError: Unexpected token } 6-genskaya-odegda:99
Uncaught TypeError: Object [object Object] has no method 'set' 6-genskaya-odegda:23
Failed to load resource: the server responded with a status of 404 (Not Found)
Еще заметила, что при открытии следующего товара количество крестиков, которыми закрывается всплывающее окно увеличивается на два. Если просмотреть 6 товаров, то на последнем появится 12 крестиков.
Ответить | Ответить с цитатой | Цитировать
0 # Natalia 27.04.2013 06:12
Цитирую Natalia:
Здравствуйте.
А если переменные в такой код завернуты
Код:$data[$row][] = '<a rel="facebox" href="'.$product['product_flypage'].'" title="'.$product['product_name'].'">'.$product['product_name'].'</a>'.'
'.$product['product_rating'] ;

,тогда как подключить tmpl=component?

Нашла решение. Выкладываю, может кому-нибудь пригодится.
Вот так нужно код прописать $data[$row][] = ''.$product['product_name'].''
Ответить | Ответить с цитатой | Цитировать
0 # Natalia 27.04.2013 06:14
Код не завернула. )))
Код:$data[$row][] = '<a rel="facebox" href="'.$product['product_flypage'].'location?tmpl=component" title="'.$product['product_name'].'">'.$product['product_name'].'</a>'
Ответить | Ответить с цитатой | Цитировать
0 # ivan2006bip 24.09.2013 16:25
У меня получилось, только открывается весь сайт в окне
код
Ответить | Ответить с цитатой | Цитировать
0 # ivan2006bip 24.09.2013 16:28
код обрезает
href=""
пробовал
href=""

все равно грузит весь сайт в окно
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 25.09.2013 02:06
ivan2006bip, добавьте к ссылке
&tmpl=component
Ответить | Ответить с цитатой | Цитировать
0 # gooldes 01.10.2013 20:51
Вообще непонятно как вставить в virtuemart 2. Все сделал аналогично, но все равно нифига не работает. Даже не открывается всплывающее окно.Помогите пожалуйста.
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 02.10.2013 02:37
gooldes, в Virtuemart 2 по-другому выглядят переменные вывода данных. Посмотрите их по коду макета, а суть метода точно такая же.
Ответить | Ответить с цитатой | Цитировать
0 # gooldes 02.10.2013 09:23
Вот код :
Ответить | Ответить с цитатой | Цитировать
0 # gooldes 02.10.2013 10:09
я разобрался в чем проблема, сайт почему то вообще не хочет читать этот скрипт. Я уже просто создал ссылку и присвоил атрибут rel=”facebox” , и все равно не открывается оно в сплывающем окне.
Ответить | Ответить с цитатой | Цитировать
0 # gooldes 07.10.2013 22:33
Добавил к ссылке &tmpl=component - всеравно весь сайт открывает
Ответить | Ответить с цитатой | Цитировать
0 # Tai7ok 20.10.2013 11:02
Здравствуйте, данная тема вызвала большой интерес у многих, можете сделать "описаловку" для virtuemart2, хотя бы в жатой форме, очень актуально.Я понимаю это трата вашего времени, но сколько судеб вы спасете :-). Жду с нетерпением.
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 21.10.2013 02:11
Tai7ok, добавил в пользовательский wish list :-). Как скоро - не скажу, но напишу.
Ответить | Ответить с цитатой | Цитировать
0 # Алмаз 15.05.2014 20:48
Здрасте :lol:
Спасибо большое за статью:)
Скажите, пожалуйста, а изображение всплывающее при нажатии на неё (т.е. увеличение) тоже z-index'ом исправляется?:)
И, если не сложно, подскажите плиз, по умолчанию для изображений в карточке товара на ссылках какое значение rel="" прописано?) А то шаманил, а исходники посеял:(
Ответить | Ответить с цитатой | Цитировать