Модификация модуля 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.57KB
400 downloads
ВНИМАНИЕ!!!
- Будьте внимательны при замене файлов.
- Проверьте с начало на тестовом сайте а уже потом загружайте на рабочий сайт.
- Это решение(модификация) тестировалось на
Joomla: 3.1.5
JBZoo: 2.1.2 Pro
Zoo: 3.0.13,
подойдут так же ранние версии начиная с v 2.0.X. - Не забывайте - это решение(модификация) и при следующих обновлениях эти изменения могут пострадать.
- При появлении проблем Тех.Поддержка ответственности не несет.
Изменено: 02.05.2014
Edited by SmetDenis, 05 February 2014 - 19:59.
я про опцию "без перезагрузки страницы". Может кому-то и не сложно, но мне в голову вообще идея не приходила облагородить автоотправку, сейчас смотрю и понимаю, что вот так реально удобней и можно применить на своём сайте.
Answered
