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

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

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

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

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

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

Изображение

Изображение

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

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

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

Демо

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

Ограничения

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

Изображение

Прикреплённый файл:
Скачать 18 Кбскачан 23 раза
0
Happy Happy 17 дней назад #

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

0
Happy Happy 17 дней назад #

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

0
Zau4man Zau4man 17 дней назад #

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

0
Happy Happy 17 дней назад #

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

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

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

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

Ну не знаю.

Изображение

0
Zau4man Zau4man 17 дней назад #

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

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

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

Изображение

0
pupsik pupsik 17 дней назад #

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

0
Pro AV Pro AV 17 дней назад #

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

0
Pro AV Pro AV 17 дней назад #

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

0
Happy Happy 17 дней назад #

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

0
Zau4man Zau4man 16 дней назад #

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

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

0
Happy Happy 16 дней назад #

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

0
F_a_R_i_D F_a_R_i_D 16 дней назад #

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

0
Zau4man Zau4man 16 дней назад #

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

0
F_a_R_i_D F_a_R_i_D 15 дней назад #

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

0
pupsik pupsik 15 дней назад #

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

Изображение

0
Happy Happy 15 дней назад #

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

0
pupsik pupsik 15 дней назад #

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

0
Zau4man Zau4man 15 дней назад #

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

0
Happy Happy 15 дней назад #

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

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

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

0
Happy Happy 16 дней назад #

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

Изображение

Изображение

0
Happy Happy 14 дней назад #

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

0
Zau4man Zau4man 14 дней назад #

В процессе.

0
Zau4man Zau4man 14 дней назад #

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

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

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

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

0
Николаич Николаич 13 дней назад #

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

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

0
Zau4man Zau4man 13 дней назад #

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

0
Николаич Николаич 13 дней назад #

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

0
Zau4man Zau4man 13 дней назад #

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

+1
Николаич Николаич 13 дней назад #

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

0
Happy Happy 13 дней назад #

аналогично

0
Zau4man Zau4man 13 дней назад #

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

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

0
Николаич Николаич 13 дней назад #

Ну вот.... 

Изображение

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

0
Happy Happy 13 дней назад #

Изображение

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

0
kalikimaka kalikimaka 15 дней назад #

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

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

0
Happy Happy 15 дней назад #

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

0
kalikimaka kalikimaka 15 дней назад #

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

0
Happy Happy 15 дней назад #

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

0
pupsik pupsik 15 дней назад #
  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.  

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

Еще от автора

Виджет "Меню добавить"
Небольшой виджет, предназначенный исключительно для вывода меню добавления контента.
Конструктор блоков Zbuilder v 1.0.2
Небольшое обновление конструктора блоков: копирование элементов/блоков, доработка элемента Картинка.
Скидка 50% за отзыв
В каталоге дополнений движка множество дополнений, в том числе и бесплатных, у которых за сотню скачиваний, но минимум отзывов. Или их вообще нет
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.