Ajax поиск для сайта на Joomla 2.5 и VirtueMart 2
"Все аспекты самостоятельного создания и продвижения сайтов
от практика с многолетним опытом." — блог
info@site-on.net
от практика с многолетним опытом." — блог
info@site-on.net
Всем доброго времени суток! Сегодня мы поговорим о поиске по сайту, причём о поиске, который не требует перезагрузки страницы, то есть использует JS технологию под названием Ajax.
Нравится вам стандартный поиск Joomla и VirtueMart или нет, но я убеждён, что использование поиска от таких гигантов как Яндекс и Гугл может принести гораздо больше ответов на вопросы пользователей.
Именно с этим убеждением я начал поиски готового модуля с поиском от Гугл. Естественно, можно было прикрутить поиск от Гугл и самому, но в этот раз мне хотелось найти комфортное решение: быстро установил и забыл.
В ходе поиска по официальному каталогу расширений для Joomla (JED), я нашёл только один модуль, который привлёк моё внимание, им оказался RokAjaxSearch. Это слегка не то, что я хотел изначально. Однако как оказалось, этот поиск находит все, что мне нужно, да ещё и приятное дополнение в виде Ajax.
После небольшого редактирования CSS и правки языковых файлов я остановился на следующем внешнем виде поиска:
Необходимые данные:
В административной панели нас ждут следующие настройки:
На скриншоте видны мои настройки. Как видите, я отключил встроенный CSS и настроил стили с нуля, а вообще Вам будут доступны 3 варианта оформления, так что вполне возможно, что вам подойдёт один из предложенных.
А теперь перейдём к более интересным вещам. Разработчики решили, что для Ajax поиска не нужна такая банальная кнопка как "отправить". Это связано с тем, что результаты поиска появляются сразу же, как только вы начали печатать и изменяются по мере напечатанного текста.
Вот только бывают случаи, когда скрипт заедает, запаздывает и так далее, не говоря уже о том, что без кнопки "отправить" я, как пользователь, чувствовал себя ограниченно. Кстати заказчику отсутствие кнопки тоже совершенно не понравилось, а ведь она есть, правда только для красоты, как бэкграунд :)
Но это не всё, если вы вместо того, чтобы напечатать искомое слово или фразу решили скопировать её (откуда-нибудь) и вставить в поле поиска, то вообще ничего не происходит.
В общем, было решено, что без кнопки "отправить" поиск – не поиск. Добавить её очень легко: заходим в
/modules/mod_rokajaxsearch/tmpl/default.php
Ищем (33-35 строки):
<div class="roksearch-wrapper">
<input id="roksearch_search_str" name="searchword" type="text" class="inputbox" value="<?php echo JText::_('SEARCH'); ?>" />
</div>
И после инпута добавляем ещё один, в результате у меня этот участок выглядит так:
<div class="roksearch-wrapper"> <input id="roksearch_search_str" name="searchword" type="text" class="inputbox" value="Поиск..." /> <input title="Начать поиск!" type="submit" value="" id="mySearchBut" /> </div>
Новому инпуту я назначил id не только ради CSS стилей.
Следующей задачей было реализовать начало поиска по нажатию на Enter. Для этого в любом месте в любом файле, главное ниже по коду вам достаточно дописать 2 строчки JS-кода:
function sub(e){e = e || window.event;var submit = document.getElementById('mySearchBut');if(e.keyCode==13){submit.click();}}
document.getElementById('roksearch_search_str').onkeydown = sub;
Лично я выношу все свои JS наработки в один общий файл и подключаю его в самом конце шаблона Joomla. Вы же можете добавить эти 2 строчки прямо в этом же файле, главное не забудьте про тег
<script></script>
Итак, в итоге мы имеем отличный Ajax поиск по сайту с возможностью нажать на кнопку "отправить" и даже с возможностью начать поиск по нажатию на Enter.
А вы каким модулем пользуетесь? Жду ваших отзывов о других подобных модулях, а на сегодня всё, спасибо за внимание и хорошего вам дня!
Пожалуйста, прокомментируйте, как Вам моя статья?