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

Это самый простой способ — подходит для изменения цветов, шрифтов, отступов и прочих визуальных параметров. Добавьте нужные стили в файл user.css вашей темы дизайна (или аналогичный файл для пользовательских стилей).

Все элементы быстрого поиска имеют CSS-классы с префиксом wsearch_dropdown_, например:

  • .wsearch_dropdown_search_wrapper — обёртка всего блока
  • .wsearch_dropdown_search_products — блок товаров
  • .wsearch_dropdown_search_categories — блок категорий
  • .wsearch_dropdown_header — заголовок блока
  • .wsearch_dropdown_list — список результатов
  • .wsearch_dropdown_product_name — название товара
  • .wsearch_dropdown_product_price — цена товара
  • .wsearch_dropdown_search_showall — блок "Посмотреть все результаты"

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

Если изменений CSS недостаточно и нужно изменить HTML-структуру блоков — можно переопределить шаблоны дропдауна через тему дизайна. Плагин сначала ищет шаблон в теме, и только если не находит — берёт свой стандартный.

Для этого создайте папку по пути:

wa-data/public/[shop|blog]/themes/{theme_name}/plugins/wsearch/

и разместите в ней нужные файлы шаблонов.

Шаблоны в плагине для Магазина:

  • dropdown_wrapper.html — обёртка всего дропдауна
  • dropdown_products.html — блок товаров
  • dropdown_categories.html — блок категорий
  • dropdown_currentquery.html — текущий запрос
  • dropdown_showall.html — ссылка "Посмотреть все результаты"
  • dropdown_history.html — история запросов
  • dropdown_popularqueries.html — популярные запросы
  • dropdown_seofilter.html — SEO-фильтры

Шаблоны в плагине для Блога:

  • dropdown_wrapper.html — обёртка всего дропдауна (не используется в режиме "Сквозной поиск с магазином")
  • dropdown_blogposts.html — посты блога
  • dropdown_currentquery.html — текущий запрос (не используется в режиме "Сквозной поиск с магазином")
  • dropdown_showall.html — ссылка "Посмотреть все результаты" (не используется в режиме "Сквозной поиск с магазином")

В качестве основы используйте оригинальные шаблоны плагина, которые находятся в wa-apps/shop/plugins/wsearch/templates/ и wa-apps/blog/plugins/wsearch/templates/.