Модификация модуля mod_jbzoo_search. Отправка данных с формы фильтра и подгрузка материалов без перезагрузки страницы.
Есть в модуле фильтра опция авто-отправки формы
Все хорошо, НО при каждом действии перезагружается(отправляются данные) страница, а мне этого не надо было. Вот и решил я немного изменить скрипт авто-отправки и сделать это на AJAX.
-= 1. Создаем маленький jQuery плагин =-
Переходим в папку
сайт\modules\mod_jbzoo_search
Создадим папку js, а в ней файл default.js
В default.js добавляем следующий код
jQuery(function($){ $.fn.JBZooAjaxUpdateContent = function(options){ var settings = $.extend( { 'url' : '', 'params' : '', 'formId' : '', 'updateBlock' : '#yoo-zoo' }, options); $('body').append( "<div id='fancybox-loading'><div></div></div>"); $.ajax({ url : settings.url + settings.params + '&tmpl=raw', type: 'get', dataType: 'html', success: function(data){ $('#fancybox-loading').remove(); $(settings.updateBlock).html($(data).html()); } }); }; });
-= 2. Подключаем наш jQuery плагин =-
В файле шаблона
сайт\modules\mod_jbzoo_search\tmpl\default.php
находим строку
$zoo = App::getInstance('zoo');
после нее вставляем(подключаем js который мы создали) следующий код
$zoo->document->addScript('mod_jbzoo_search:js/default.js');
-= 3. Инициализация плагина =-
Ниже находим следующий код и меняем его
<?php if ((int)$params->get('autosubmit', 0)) : ?> <script type="text/javascript"> jQuery(function ($) { $('#<?php echo $formId;?> select, #<?php echo $formId;?> input[type=radio], #<?php echo $formId;?> input[type=checkbox]').change(function () { $(this).closest("form").submit(); }); }); </script> <?php endif; ?>
на
<?php if ((int)$params->get('autosubmit', 0)) : ?> <script type="text/javascript"> jQuery(function ($) { $('#<?php echo $formId;?> select, #<?php echo $formId;?> input[type=radio], #<?php echo $formId;?> input[type=checkbox]').change(function () { $.fn.JBZooAjaxUpdateContent({ 'url' : '<?php echo JRoute::_('index.php?Itemid=' . $params->get('menuitem', JRequest::getVar('Itemid'))); ?>?', 'params': $('#<?php echo $formId;?>').serialize(), 'formId': '<?php echo $formId;?>' }); }); }); </script> <?php endif; ?>
И радуемся. Форма отправляется через AJAX, пока сервер думает мы любуемся анимацией, а как данные пришли в указанный блок(в примере это корневой блок контента ZOO) подгружаются найденные материалы.
Что нового?
1. По большому счету изменения не такие уж и большие js код переделан в маленький jQuery плагин и теперь находится в отдельном файле.
2. Выглядит красиво и не занимает теперь много место в шаблоне модуля
3. Подгрузка контента происходит теперь быстрее, за счет того что не подгружается лишний контент с сайта.
По умолчанию обновляется блок с id yoo-zoo
Если у кого то по каким то причинам его нет вы можете указать сами какой блок обновлять, добавив дополнительный параметр плагина
Теперь будет искаться и производиться загрузка контента в блок с id yoo-zoo-my-block
Подводные камни?
Наверно самый большой камень - это то что ни какие кнопки(добавить в корзину,избранное,сравнение , то же самое касается кнопок удаления и увеличения картинок FancyBox) на которые повешены JS скрипты работать внутри подгруженного контента не будут.
Измененные и добавленные файлы:
сайт\modules\mod_jbzoo_search\tmpl\default.php // изменен сайт\modules\mod_jbzoo_search\js\default.js // добавлен
Для тех кто ленится что то сделать руками сделал патч:
mod_jbzoo_search_patch_for_v2.1.2.pro.zip 3.57К 397 Количество загрузок:
ВНИМАНИЕ!!!
- Будьте внимательны при замене файлов.
- Проверьте с начало на тестовом сайте а уже потом загружайте на рабочий сайт.
- Это решение(модификация) тестировалось на
Joomla: 3.1.5
JBZoo: 2.1.2 Pro
Zoo: 3.0.13,
подойдут так же ранние версии начиная с v 2.0.X. - Не забывайте - это решение(модификация) и при следующих обновлениях эти изменения могут пострадать.
- При появлении проблем Тех.Поддержка ответственности не несет.
Изменено: 02.05.2014
Сообщение отредактировал SmetDenis: 05 February 2014 - 19:59