ZПоиск. Другой взгляд на поиск

+12
2.02K
ZПоиск. Другой взгляд на поиск

В рамках более глубокого знакомства с vue в частности с появившимся недавно Composition  Api сделал на Vue небольшой компонент, который по функционалу повторяет встроенный компонент Поиск. Из него же берутся поисковые результаты для вывода, поэтому если что-то хотите настроить по поиску, меняйте в компоненте Поиск.

Как использовать

Вместе с компонентом идет виджет ZПоиск, который надо разместить на сайте. Виджет представляет из себя иконку поиска, при нажатии на которую поверх сайта откроется форма поиска. Весь поиск происходит по ajax, без переходов на другие страницы. Всегда можно закрыть форму и продолжить пользоваться сайтом.

Все адаптивно

Изображение

Изображение

А если типов контента в поиске много, появится возможность поскролить список типов вправо.

Минимальная нагрузка

Виджет поиска содержит только один небольшой js скрипт, который загрузит все остальные скрипты, нужные поиску, только после нажатия на иконку поиска. Поэтому виджет можно смело ставить на все страницы сайта.

Демо

Попробовать поиск можно на демо demo.bergorod.ru
Жмите на иконку поиска в шапке рядом с Войти

Ограничения

Работает на 2.17.1 и свежее. Только для modern шаблона и дочерних. Предоставляется как есть. Могут быть баги, пишите — поправлю.
Вы всегда можете отключить компонент и виджет и использовать обычный поиск.
Если вы используете modern без доработок, не забудьте указать navbar-dark в поле Класс CSS для контейнера, иначе иконка поиска будет того же цвета, что и обычные ссылки.

Изображение

Прикреплённый файл:
Скачать 18 Кбскачан 29 раз
0
Всем пока! Всем пока! 1 год назад #

Офигенная штука ) потестил на демо, супер. Спасибо 

0
Всем пока! Всем пока! 1 год назад #

Первая вкладка новости, повторяет записи, вместо трех показывает 6 найденных. Во второй вкладке вроде четко 

0
Zau4man Zau4man 1 год назад #

По какой фразе ищете? На демо или на своем сайте проблема?

0
Всем пока! Всем пока! 1 год назад #

На вашем сайте, например слово «страна». Я много слов пробовал в первой вкладке дублируется. Я с мобилы тестю, подозреваю дело в автопогрузке на странице с которой открываешь поиск . 

С компа нормально, с мобилы нет. 

UPD на моем сайте все отлично

Николаич Николаич 1 год назад #
Комментарий удален
0
pupsik pupsik 1 год назад #

Ну не знаю.

Изображение

0
Zau4man Zau4man 1 год назад #

В обычном поиске также. Я поэтому и акцентировал на этом внимание.

Это просто другой внешний вид.

А вот почему так в обычном поиске, надо разбираться, но это тема для другой серии фильма.

Изображение

0
pupsik pupsik 1 год назад #

Ясно. Да, поиск в инстант не айс эт точно.

0
Pro AV Pro AV 1 год назад #

Давно хочу нормальный поиск. Попробую поставить 😎

0
Pro AV Pro AV 1 год назад #

Поставил. Работает, красота. Сайт теперь прям как яндекс ))

0
Всем пока! Всем пока! 1 год назад #

мне вот интересно а можно выводить существующие поля в списке поиска? 

0
Zau4man Zau4man 1 год назад #

Можно. Делал вывод цены и размера для одного интернет магазина. И в коробочный поиск заложена возможность передать имена доп.полей, которые нужны в результатах поиска.

Но это потребует доп.доработок, типа админку компонента для выбора этих полей и т.п… Таких планов нет.

0
Всем пока! Всем пока! 1 год назад #

Если у вас есть свободное время, То можно обсудить доработку. 

0
F_a_R_i_D F_a_R_i_D 1 год назад #

А можно ли вывести на главной странице форму поиска без иконки?

0
Zau4man Zau4man 1 год назад #

А иконка настроек поиска? Ее не убрать. И тогда иконка поиска совсем и не мешает в паре с иконкой настроек.

0
F_a_R_i_D F_a_R_i_D 1 год назад #

Я про, чтотоб изменить внешний вид страницы /search, как в виджете.

0
pupsik pupsik 1 год назад #

Я думаю он хичет поставить ваш поиск в сам поиск инстант, вот так. 

Изображение

0
Всем пока! Всем пока! 1 год назад #

Я думаю что нет, ему нужно визуализировать вместо иконки типа поле ввода поиска, при клике открывается сам поиск. Это не сложно сделать с помощью CSS как и текст добавить туда аля «поиск».

0
pupsik pupsik 1 год назад #

Значит я не так понял. Да и до сих пор не понял. 

0
Zau4man Zau4man 1 год назад #

И я не понял. Поэтому ответа и не будет :)

0
Всем пока! Всем пока! 1 год назад #

Да вместо иконки лупы, до открытия формы, сделать форму ввода ( как системную) только при клике на нее открывать вашу форму. Короче кнопку открытия сделать полем ввода .

П. С. Мне не надо я просто помогаю расшифровать ))

А по проблеме дублирования поисковой записи будет решение ?

0
F_a_R_i_D F_a_R_i_D 1 год назад #

Стиль, который открывается при клике на лупу сделать такой же на стандартной странице /search + сам виджет раскрытый уже, без лупы.

0
Всем пока! Всем пока! 1 год назад #

Все таки проблема есть на моб устройстве. Причем не на всех. Видимо от разрешения зависит. пробовал также на страницах где нет автоподшрузки контента все равно появляется то один то два 

Изображение

Изображение

0
Всем пока! Всем пока! 1 год назад #

Интересует, исправление данного бага. 

0
Zau4man Zau4man 1 год назад #

В процессе.

0
Zau4man Zau4man 1 год назад #

Нужны тесты. Скачайте архив по ссылке disk.yandex.ru/d/kZfNvytsXO1p0w (новая)

Распакуйте. Файл из архива положите в папку templates/modern/controllers/zsearch/js/ согласившись на замену

Потом в настройках сайта увеличьте Абстрактный счетчик и сохраните настройки. Это важно. Меняется js файл, важно, чтобы кеш браузера не мешал.

Потом обновите страницу с виджетом и пробуйте повторить проблему.

0
Николаич Николаич 1 год назад #

У меня после замены файла поиск вообще работать отказался.

Виджет открывается. После написания поискового запроса при попытке нажать кнопку «поиск» ничего не происходит.

0
Zau4man Zau4man 1 год назад #

Спасибо за тесты. Обновил архив и ссылку в комменте выше. Должно работать.

0
Николаич Николаич 1 год назад #

Спасибо. Всё заработало. 

0
Zau4man Zau4man 1 год назад #

А проблема с дублированием результатов пропала?

+1
Николаич Николаич 1 год назад #

Поэкспериментировал с разными поисковыми запросами. Дублирование иногда появляется, иногда нет. Чаще появляется, чем нет. 

0
Всем пока! Всем пока! 1 год назад #

аналогично

0
Zau4man Zau4man 1 год назад #

Обновил демо. Попробуйте поймать проблему там.

И опишите порядок действий, чтобы можно было повторить...

0
Николаич Николаич 1 год назад #

Ну вот.... 

Изображение

Порядок действий очень простой:
Нажимаем на иконку поиска.
Вводим поисковый запрос.
Получаем результат.

0
Всем пока! Всем пока! 1 год назад #

Изображение

Тоже самое, но у меня исключительно только на мобиле 

0
Николаич Николаич 1 год назад #

Чувствую, не удалось проблему поймать... 

0
kalikimaka kalikimaka 1 год назад #

Спасибо большое!

Подскажите, а не заливать все страницу страницу можно? Чтобы просто в модальном окне форма открывалась.

0
Всем пока! Всем пока! 1 год назад #

Задайте ширину и высоту как вам нужно 

0
kalikimaka kalikimaka 1 год назад #

да неужели? вас никто не спрашивал

0
Всем пока! Всем пока! 1 год назад #

пффф… а вы что хотели услышать что там есть кнопка?) Так вот, ее там нет)

0
pupsik pupsik 1 год назад #
  1. .zsearch {
  2. width: 50%;
  3. height: fit-content;
  4. margin: 0 auto;
  5. top: 5em;
  6. }
  7. .zsearch__body{
  8. width: 45vw !important;
  9. margin-top: 0px !important;
  10. }
  11.  

Как то так попробуйте. Ну эт на глаз. С цифрами надо играть на вкус и цвет.

0
F_a_R_i_D F_a_R_i_D 1 год назад #

Изображение

Можно ли реализовать в таком формате виджетом? Н-р, хочу вывести это на главной странице. Без клика на лупу.

0
Zau4man Zau4man 1 год назад #

А теперь добавьте в свой пример содержимое сайта, а также бесконечный список результатов поиска, который не позволит докрутить страницу до футера. 

Это только первое, что пришло на ум, что делает ваши идею нереализуемой.

0
F_a_R_i_D F_a_R_i_D 1 год назад #

Сорри, я думал, что там есть пагинация как на странице /search . 

0
Bazileo Bazileo 1 год назад #

Вчера установил потестить на 2.17.1, один день поработа, потом неизвестно что стало с ним, почему-то вообще ничего не ищет, хотя изначально искал, кнопка поиска перестала работать, при нажатии ничего не происходит.

0
Zau4man Zau4man 1 год назад #

Тут или какие-то ошибки js, надо смотреть в консоли браузера.

Или вы отключили стандартный поиск, а текущий берет данные из него. Или вы ищете то, что даже стандартный поиск не находит. Тогда надо настраивать его.

0
Endroid Endroid 1 год назад #

Виджет классный, спасибо за разработку!

Есть один баг — при включенном кэшировании выдает ошибку "<b>fatal error</b>: uncaught error: undefined constant "lang_search_no_results"" со ссылкой на файл \templates\modern\controllers\zsearch\widgets\zsearch\zsearch.tpl.php

0
Zau4man Zau4man 1 год назад #

Перекачайте из приложения к посту новую версию zsearch20250407_1.0.2

В новой версии кеширование для виджета отключено.

0
disc disc 1 год назад #

Дополнение классное!

Было бы круто, если результаты поиска выделялись бы (как это делается в стандартном поиске modern) если рядом с поиском отельная кнопка была бы для перехода в search?q=(поисковый запрос.)

И ещё! При открытии раздела с фотографиями, они к сожалению отсутствуют!

Изображение

0
disc disc 1 год назад #

Еще один  нюанс при работе с поиском. При поиске в группах запросы дублируются. Вот бы этих два момента исправить в поиске. Было бы крайне здорово.

0
disc disc 1 год назад #

Сделать можно? С меня благодарность разумеется!

1) При открытии раздела с фотографиями, фотографии к сожалению отсутствуют!

2)  При поиске в группах (привязанный контент к группам) запросы дублируются. 

Благодарю!

0
Zau4man Zau4man 8 месяцев назад #

Есть желающие до анонса протестировать новую версию поиска?

Что нового:

1. дублей в поиске больше быть не должно
2. добавлен вывод поиска по фотографиям
3. обновлен внешний вид

Изображение

Скачать можно по ссылке disk.yandex.ru/d/IjEmfQO89JPAwA

Важно проверить на дубли. Теперь при изменении текста все фоновые поисковые запросы отменяются, проблемы с дублями быть не должно.

На демо demo.bergorod.ru также стоит новая версия

0
pupsik pupsik 8 месяцев назад #

Изображение

+1
Zau4man Zau4man 8 месяцев назад #

ответ на этот вопрос вы получили год назад… он есть выше. не вижу смысла дублировать.

0
pupsik pupsik 8 месяцев назад #

Да, год назад, я конечно «помню». Ваш компонент, вы и запомнили. Попросили протестить, я протестил. 

Еще от автора

Выбор пользователем количества записей на странице
Небольшой компонент, который позволяет пользователям выбирать, по сколько записей выводить на странице.
Вышло обновление афиши 1.2.2
В обновлении новый современный дизайн всех страниц афиши, новый блок места проведения в афише, возможность указать несколько изображений, поддержка ко
Управление персональным меню v.1.0.2
Небольшое обновление компонента, в котором стало удобнее выбирать иконку пункта меню, а также добавлена опция, разрешающая пользователю добавление ссы
🍪Мы используем файлы cookie для работы сайта. Читать подробнее.