Ajax поиск для сайта на Joomla 2.5 и VirtueMart 2

"Все аспекты самостоятельного создания и продвижения сайтов
от практика с многолетним опытом." — блог Рудь Сергея
info@site-on.net
Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!
01.09.2013

Всем доброго времени суток! Сегодня мы поговорим о поиске по сайту, причём о поиске, который не требует перезагрузки страницы, то есть использует JS технологию под названием Ajax.

Нравится вам стандартный поиск Joomla и VirtueMart или нет, но я убеждён, что использование поиска от таких гигантов как Яндекс и Гугл может принести гораздо больше ответов на вопросы пользователей.

Именно с этим убеждением я начал поиски готового модуля с поиском от Гугл. Естественно, можно было прикрутить поиск от Гугл и самому, но в этот раз мне хотелось найти комфортное решение: быстро установил и забыл.

В ходе поиска по официальному каталогу расширений для Joomla (JED), я нашёл только один модуль, который привлёк моё внимание, им оказался RokAjaxSearch. Это слегка не то, что я хотел изначально. Однако как оказалось, этот поиск находит все, что мне нужно, да ещё и приятное дополнение в виде Ajax.

После небольшого редактирования CSS и правки языковых файлов я остановился на следующем внешнем виде поиска:

Обычный вид

Вид в фокусе

Результаты поиска

Скачать, установить и настроить Ajax поиск для сайта

Необходимые данные:

В административной панели нас ждут следующие настройки:

Настройки поиска

На скриншоте видны мои настройки. Как видите, я отключил встроенный 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.

А вы каким модулем пользуетесь? Жду ваших отзывов о других подобных модулях, а на сегодня всё, спасибо за внимание и хорошего вам дня!

С уважением, .
Пожалуйста, оцените эту статью
Средняя оценка: 4.89 из 5 (проголосовало: 9)
Статья оказалась вам полезной? Подпишитесь, чтобы не пропустить новые!

Ваш email:
Вы можете помочь развитию проекта, сделав всего 1 клик:
Спасибо!
Пожалуйста, прокомментируйте, как Вам моя статья?
Имя:
Комментарий:

Если Вы хотите вставить код, пожалуйста, заключайте его в [code][/code]

Подписаться на новые комментарии:

E-mail:


Защита от спама: у треугольника три...
Ответ:
Подписаться на новые комментарии без комментирования - Email:
Защита от спама: у треугольника три...
Ответ:

04.09.2013 15:13:16 Snake 60:
Модуль хорош, сам его использовал на паре проектов, но применительно к Виртуемарт многие хотят в выводе поиска, как минимум картинку и цену, как максимум еще и кнопку Купить... Есть ли подобная модификация у Вас? Еще раз спасибо за статью...
04.09.2013 21:49:18 Сергей отвечает:
К сожалению, готовых набросков у меня нет, пока не было необходимости.

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


20.09.2013 20:03:42 Теймур:
Очень необходима реализация картинок и цены в результатах поиска. Пока в интернете готового решения не нашёл. Вот здесь небольшое обсуждение, но кода для правки не выложили
http://www.rockettheme.com/forum/index.php?f=204&t=198819&rb_v=viewtopic

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


18.02.2014 17:30:28 Степаныч:
У меня Rok не работает. Ничего не находит. При любых настройках. No results. Чуть ниже: Advanced search Больше ничего.
01.04.2014 11:21:11 Сергей отвечает:
У меня теперь тоже. На Joomla 2.5.14 + VM 2.0.22a работало.
На Joomla 2.5.19 + VM 2.0.26d уже не работает :(
21.08.2014 15:59:34 Александра отвечает:
Проверьте, включен ли плагин поиска виртуемарта. У меня заработало после включения плагина, он почему-то дефолтно отключен.
Виртуемарт 2.6.6
22.08.2014 22:03:03 Сергей отвечает:
Спасибо за актуальный совет, я ещё даже не пробовал новый Virt, ушёл в работу на чистом PHP.

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


31.07.2015 11:02:10 Alex:
Спасибо, бро!

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

Использую для работы
Мои расширения
Свежие статьи
Рекомендую
Горячо обсуждаемые
Подписка
  • Следовать в twitter:
  • Подписаться по RSS:
  • Подписаться по E-mail:
  • Следить ВКонтакте:
  • Следить на Facebook:
Пользовательское соглашение об условиях использования сайта и Политика конфиденциальности
Перепечатывание или копирование материалов сайта (текста, изображений и другого содержимого) для их публичного или коммерческого использования в сети Интернет, либо в печатных изданиях строго запрещены. При нарушении данного правила, с нашей стороны будут предприняты соответствующие меры, вплоть до судебной жалобы.
© site-on.net
Шрифт: +стандартно-