Сегодня статья получилась достаточно интересная и сложная. Приходило ли вам в голову показывать страницу товара 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> |
Здесь мы подключили библиотеку JQuery в режиме noConflict, а также скрипт и оформление всплывающего окна.
Далее, сразу же под этим кодом добавляем:
1 2 3 4 5 6 7 8 | <script type="text/javascript"> |
Этим кодом мы говорим, что скрипт должен реагировать на атрибут 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> |
Кроме этого вы можете захотеть добавить подобный атрибут и к картинкам товаров на странице browse, но все же советую показывать их просто вы всплывающем окне. На страницу товара будет вести только ссылка-заголовок.
После всех этих действий страница товара будет открываться во всплывающем окне. Но есть одно НО. На ней будет показан не только товар, а весь сайт целиком. Нам это не нужно, поэтому добавляем к ссылке в коде выше окончание &tmpl=component. Это означает, что будет показана не вся страница целиком, а только текущий компонент. Код получится следующий:
1 2 3 4 5 | <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:
1 2 3 4 5 6 7 8 9 | <script type="text/javascript"> |
Теперь всё замечательно. Но поисковики не получат чистой страницы товара, а получат стандартную.
Какие еще есть варианты? Например, можно не использовать Javascript, а проверять в PHP, что посетитель, который пришел на сайт, не робот и автоматически обрезать для него &tmpl=component. Но уже другая история...
Проблемы и их решения. Кроссбраузерность.
Facebox корректно работает во всех браузерах, кроме наших любимых ослов(IE). Точнее так: IE8 – совместим, IE7 – совместим частично, требует корректировки CSS(проблема решается условными комментариями или CSS-хаками), IE6 – я даже не проверял(гори он в аду для него ставим заглушку или отключаем rel=”facebox” через php). Так что эта проблема – не проблема :-).
Что мы получили в итоге? На мой взгляд, мы получили довольно оригинальный подход к построению интернет-магазина. Магазин, показывающий товар во всплывающем окне, удобен, оригинален, а главное, выделяется из своих собратьев. В следующей статье серии я еще немного раскрою тему Facebox и покажу как с помощью этого и другого скрипта создать красивый и удобный просмотр всех изображений товара во всплывающем окне. Подписывайтесь на обновления! Удачи!
Комментарии
Наверное стоит написать по заглушке отдельную статейку
href=" &tmpl=component">
Слеш "/" там вообще нигде не нужен. Не знаю даже откуда он появился. В коде добавляемой статьи его нет в принципе. Редактор вставки кода сходит с ума...
У всех товаров ссылка становится одна =).
Исправил на
$('a[rel*=facebox]').attr('href', function () {return $(this).attr('href')+'&tmpl=component';}); Вроде ровней пошло.
После всплывающее окно стало появляться, но такой узкой, пустой полоской и есть только крестик для закрытия.
Что может быть не так ?
Файл browse_2.php кусок кода:
Скрипты вот так правильней подключать
4 строка в последнем коде "php и echo" написано слитно. Исправьте пожалуйста
А моя проблема остается актуальной...
Да, слеши нужно убрать. В оригинальном коде их нет, но плагин раскраски кода сам их добавил.
А по точнее не подскажете где еще слэши убрать надо ?
"/<?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>
Все же вроде правильно ?
<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>
так подключи
<a rel="facebox" title="<?php echo $product_name ?>" href="<?php echo $product_flypage ?> &tmpl=component"> <?php echo $product_name ?></a>
А вот так сделай вывод
Код:
<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>
<script type="text/javascript" src="<?php echo $templateUrl; ?>/jquery.js"></script><script type="text/javascript">jQuery.noConflict();</script>
вот это убери - у тебя оно 2 раза - конфликт
Выключение этого плагина решает мою проблему, но так не пойдет... он нужный
Код:
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/src/facebox.js"></script>Я вставляю скрипт из этого файла прям в файл index.php ?
Код:
<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';});Подробнее...
rel="facebox" - есть в ссылке... Значит java-script не сработал?
Окно появляется... Но есть одно но...
После того как появилось окно, я его к примеру закрываю - но на странице весь контент съезжает в право... Т. е. когда загружается скрипт всплывающего окна - он вносит какие-то изменения в стили страницы сайта... Кто-то сталкивался с подобной проблемой?
...
Нужно доработать это решение для товаров с позициями. Проблема в следующем: после выбора определенной позиции товара, старница в javascript не обновляется, зато стандартная карточка товара изменяется(на заднем плане=)). Думаю нужно добавить соответствующие атрибуты для ссылок из выпадающего списка выбора позиций.
Подключаю так: /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';}); })
В карочке товара: Цитата:
<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 проблемы...
1. У меня для комментирования прикручен Jcomments 2.2. Так вот во всплывающем окне нельзя оставить комментарий - Jcomments говорит: "введите текст сообщения", само-собой сообщение я ввожу. И еще над полем ввода комментариев нет иконок редактирования и смайлов. Где может быть косяк?
2. На карточке товара вверху выводятся 2 ссылки: на предыдущий товар и на следующий товар. Эти ссылки (в flypage.tpl) я тоже оформляю тегом rel="facebox", но они открываются не в окне facebox, а в обычном режиме и без остального сайта - только один flypage :(
Проблема в том,что у меня нет всплывающего окна,и я не могу найти файл,чтобы поменять название кнопки"положить в корзину"
Код:
$('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.
Получиться ли?
Сделала так
Подключила скрипты как в статье, а ссылку так: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) Какой файл ковырять?
или скрипт какой-то?
сама прописала ссылку в файле 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 - вся страница с шапкой и модулями. Кину карту сайта поисковикам а всплывающие запрещу сканировать. Может потом еще что-то придумаю
У меня из всплывающего ни в какую не желает (((
еще сделала навигацию по товаром в категории
в файле views/productdetails/tpl/default.php подключила facebox, как описывается в статье и в строках, где навигация вставила rel="facebox"
Вот так получилось
Сижу любуюсь. Жаль комменты JC не хотят работать, как-то сделала и все работало, а теперь что-то не хотят(
на это
['product_name'], array('class' => 'previous-page', 'rel' => 'facebox'));
и со след стр тоже добавить rel
У меня такая проблема, В описании товара не отображается производитель. Помогите решить такую проблему.
Заранее спасибо.
Но мне кажется я не так объяснил. Если Вы не обратили внимания на ссылку приведенную постом выше, то посмотрите пожалуйста. У них реализовано так: на странице видишь изображения товаров, а при наведении на само изображение появляется кнопка "БЫСТРЫЙ ПРОСМОТР", при клике на которую появляется карточка товаров в сплывающем окне, а при клике на изображение идет стандартный переход на карточку товара. Поэтому и возник вопрос, как такое реализовать? Такое решение удобно и на мой взгляд выглядит элегантнее, а так же экономит место на странице.
1) rel="facebox"
2)&tmpl=component
Соответственно: делаете на странице 2 ссылки, одна из которых будет появляться только при наведении курсора на фото.
Если получится напишите пожалуйста, думаю многим будет интересно реализовать у себя такой вариант.
Цитирую Vlad:
Точно такая же проблема , Vlad вы ее решили? Если кто-то знает отпишитесь пожалуйста.
в файле ( \www\components\com_virtuemart\views\category\tmpl\default.php)
есть такая строка
номер строчки 244
меняем её на :
никакие скрипты дополнительные подключать не надо, в этой версии VM уже все подключено. Конечно, как я писал выше, еще нужно подтачивать, навигацию, возврат в категорию и может еще что то...да кстати JCOMMENTS работает без проблем
в файле ( \www\components\com_virtuemart\views\category\tmpl\default.php)
есть такая строка
( a title="" rel="vm-additional-images" href="/">
как код выложить?
При нажатии на кнопку "Купить" модальное окно закрывается, страница с категорией товаров перезагружается, а товара в корзине нет.
Пробовал и с ЧПУ, и без ЧПУ - результат один и тот же.
1. Захожу в категорию с товарами
2. Навожу мышкой на изображение, появляется кнопка "Быстрый просмотр".
3. Нажимаю на нее, всплывает окошко с предпросмотром карточки товара.
4. В этом окошке карточки товара я нажимаю "Купить".
5. Всплывающее окошко с карточкой товара закрывается, страница категории перезагружается и больше ничего не происходит - товаров в корзине нет.
P.S. Попробовал отключить модальное окошко с уведомлением, что товар был положен в корзину - не помогло.
То есть, без него не работает кнопка "купить"
А если переменные в такой код завернуты
Код:
$data[$row][] = '<a rel="facebox" href="'.$product['product_flypage'].'" title="'.$product['product_name'].'">'.$product['product_name'].'</a>'.'<br />'.$product['product_rating'] ;,тогда как подключить tmpl=component?
Код:
$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".
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 крестиков.
Нашла решение. Выкладываю, может кому-нибудь пригодится.
Вот так нужно код прописать $data[$row][] = ''.$product['product_name'].''
Код:
$data[$row][] = '<a rel="facebox" href="'.$product['product_flypage'].'location?tmpl=component" title="'.$product['product_name'].'">'.$product['product_name'].'</a>'код
href=""
пробовал
href=""
все равно грузит весь сайт в окно
&tmpl=component
Спасибо большое за статью:)
Скажите, пожалуйста, а изображение всплывающее при нажатии на неё (т.е. увеличение) тоже z-index'ом исправляется?:)
И, если не сложно, подскажите плиз, по умолчанию для изображений в карточке товара на ссылках какое значение rel="" прописано?) А то шаманил, а исходники посеял:(