VirtueMart – интернет-магазин на Joomla. Часть 30. Просмотр товаров Virtuemart во всплывающем окне.

05.12.2011

Wedal

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

Содержание

Постановка задачи
Решение задачи. Шаг 1. Подключение скрипта
Решение задачи. Шаг 2. Указание ссылок
Проблемы и их решения. Z-index
Проблемы и их решения. Индексация
Проблемы и их решения. Кроссбраузерность

Постановка задачи

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

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

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

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

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

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

<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, а также скрипт и оформление всплывающего окна.

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

<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:

<h3>
<a rel="facebox" title="<?php echo $product_name ?>" href="/ <?php echo $product_flypage ?>">
<?php echo $product_name ?>
</a>
 </h3>

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

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

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

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

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

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

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

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

1	.cbContainer{z-index: 1000;}

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

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

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

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

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

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

<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.

Похожие статьи

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

Комментарии

slovoblud

05.12.2011, 20:45

Wedal Спасибо вам большое. Ваша статья как всегда практична и очень актуальна.Когда работаю над сайтами на joomla то регулярно захожу на ваш сайт, за нужными решениями. И еще вопрос возник, что значит поставить заглушку на IE6?