Как добавить поиск Ajax в реальном времени на свой сайт Divi

Ajax - отличный способ добавить в Divi поиск в реальном времени. С Ajax страницу не нужно перезагружать, чтобы показывать пользователям результаты поиска. Это позволяет вашим посетителям видеть результаты намного быстрее, что помогает им дольше оставаться на ваших страницах. В результате веб-сайт выглядит чище и работает более плавно.

Поиск Ajax не встроен в Divi, но его можно легко добавить с помощью стороннего плагина. В этом руководстве мы увидим, как добавить поиск Ajax в Divi, и узнаем, как оформить поиск в соответствии с дизайном вашего веб-сайта.

Переходим к учебнику.

Sneak Peek

Прежде чем мы начнем, посмотрим, как будет выглядеть наш поиск Ajax, когда мы закончим. Это вид рабочего стола. Я добавлю поиск Ajax в магазин WooCommerce. Я использую страницу шоу из пакета макетов Интернет-магазина. Мы также настроим поиск в соответствии с макетом. Конечно, поскольку это тестовый сайт, я обманываю и использую тестовые продукты WooCommerce. Результаты будут одинаковыми для любых продуктов.

Вот как такой же дизайн выглядит на телефоне.

Как добавить поиск Ajax в реальном времени на свой сайт Divi

Подпишитесь на наш канал Youtube

1. Установка Divi Ajax Search

Сначала приобретите Divi Ajax Search на торговой площадке Divi. Обычно это 29 долларов и включает в себя неограниченное использование и один год поддержки и обновлений. Divi Ajax Search позволяет искать страницы, сообщения, проекты и продукты WooCommerce. Это работает одинаково с каждым из этих типов сообщений. Он может искать заголовок, отрывок и избранное изображение и отображать их в соответствии с вашими настройками.

Чтобы установить плагин, перейдите в « Плагины» > « Добавить новый» и выберите « Загрузить плагин» .

Выберите « Выбрать файл», перейдите в папку с файлом на вашем компьютере и выберите его. Щелкните Установить сейчас .

После установки плагина выберите « Активировать плагин» .

2. Добавьте поиск Ajax на свой сайт Divi.

Вот посмотрите на оригинальный макет. он включает заголовок, категории, которые перекрывают изображение заголовка, и модуль WooCommerce для отображения продуктов. Я добавлю функцию поиска Ajax над модулем магазина. Я также оформлю его так, чтобы он соответствовал элементам макета.

Добавить Divi Ajax Search в макет

Щелкните значок под модулем магазина, чтобы открыть модальное окно модуля. Прокрутите до или найдите Divi Ajax Search и добавьте его в макет. Я показываю каркасный вид, но все виды работают одинаково.

Перетащите модуль над модулем магазина.

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

Щелкните шестеренку, чтобы открыть параметры. Я переключился в режим рабочего стола, чтобы видеть свои изменения в реальном времени.

Сначала мы настроим текст-заполнитель. В тексте-заполнителе по умолчанию используется слово «Поиск». Это нормально, но я меняю его на « Поиск по нашим продуктам», чтобы пользователь знал, что он ищет в магазине, а не в сообщениях в блогах или другом контенте. Я оставлю значения по умолчанию для параметров « Порядок» , « Порядок» и « Текст без результатов» .

• Текст-заполнитель - поиск по нашим продуктам
• Результат поиска - 10
• Сортировать по - дате
• Заказ - по убыванию
• Нет текста результата - ничего не найдено

Решите, что отображать в результатах поиска

В разделе «Область поиска» выберите то, что вы хотите найти. Я оставляю для него настройки по умолчанию, которые включают заголовок, содержимое и отрывок.

Затем выберите типы сообщений. Вы можете использовать его для поиска сообщений, страниц, проектов, продуктов или всего вышеперечисленного. Я выбираю Товары.

Искать в:

• Заголовок
• Содержание
• Отрывок

Типы сообщений:

• Продукты

Выберите, что отображать

Прокрутите вниз до области «Отображение», чтобы выбрать способ отображения результатов. Я сохраняю настройки по умолчанию для значка поиска, заголовка, отрывка и избранного изображения. Я также включил цену продукта, изменил количество столбцов на 4 и выбрал кладку. Это даст мне нужный мне макет.

Показать значок поиска:

• да

Поля отображения:

• Заголовок
• Отрывок
• Популярные изображения
• Цена продукта

Число столбцов:

• 4

Используйте кладку:

• да

Показать полосу прокрутки

Перейдите в настройки полосы прокрутки и решите показать или скрыть полосу прокрутки. Я включаю полосу прокрутки, чтобы пользователь лучше знал, что он может прокручивать.

Полоса прокрутки:

• Показать

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

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

3. Настройте модуль так, чтобы он соответствовал вашему веб-сайту.

Чтобы стилизовать окно поиска, я буду использовать элементы дизайна из макета, который я использую. Внизу страницы магазина макета Интернет-магазина находится пара элементов дизайна. Один из них - интересный модуль подписки на электронную почту. Я буду использовать это как вдохновение для фона и поля. Я также буду использовать цвет фона призыва к действию «Купить сейчас» для результатов поиска. Особо обращаю внимание на три элемента дизайна:

• Цвет фона информационного бюллетеня - # 757d79
• Цвет фона призыв к действию магазина - # dcae83
• Отступ для обоих - 50 пикселей (сверху, снизу), 60 пикселей (справа, слева)

Стилизация поля поиска

Откройте настройки фона на вкладке содержимого. В этом разделе есть три разных фоновых области. Перейти к последнему. Он просто называется "Фон". Введите цвет здесь.

• Цвет фона - # 757d79.

На вкладке «Дизайн» перейдите к настройкам «Интервал» и введите отступ. Это позволит нам увидеть область вокруг поля, чтобы мы могли лучше видеть результаты в процессе. Это также придаст окну поиска много цвета, который будет соответствовать элементам в макете.

• Padding 50 пикселей (сверху, снизу), 60 пикселей (справа, слева)

В настройках поля поиска добавьте цвет фона поля и цвет текста поля. Я сделал поле таким же, как фон модуля, и просто выбрал белый цвет для текста.

• Цвет фона поля - # 757d79
• Цвет текста поля - #ffffff

В тех же настройках прокрутите вниз до Цвет границы поля и выберите белый. Мы также можем настроить толщину и радиус границы. Я оставлю его квадратным, чтобы он соответствовал текстовому полю модуля optin.

• Цвет границы поля - #ffffff

Откройте настройки для значка поиска и выберите белый цвет.

• Цвет значка поиска - #ffffff

Откройте настройки загрузчика и выберите белый цвет в качестве цвета загрузчика . Загрузчик будет виден только на мгновение, но он будет выглядеть лучше, если он будет соответствовать остальным элементам.

• Цвет загрузчика - #ffffff

Стилизация поля результатов

Откройте настройки фона на вкладке «Содержимое» и добавьте цвет для фона окна результатов поиска и элемента результатов поиска . Это не будет видно, пока мы стилизуем модуль, поскольку он отображается только при отображении результатов поиска.

• Цвет фона - # dcae83

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

• Стиль шрифта заголовка - TT
• Цвет текста заголовка - #ffffff

Откройте вкладку Excerpt и выберите белый цвет для Excerpt Text Color .

• Цвет текста отрывка - #ffffff

Откройте вкладку Цена. Выберите полужирный шрифт для веса цены и белый для цвета текста.

• Цена шрифта - полужирный
• Цвет текста отрывка - #ffffff

Полученные результаты

Вот как Ajax Search выглядит на рабочем столе с моим стилем. Результаты поиска отображаются практически сразу. Смотрится нарядно и гладко.

Вот как это выглядит на телефоне. Результаты складываются и настраиваются по размеру экрана.

Конечные мысли

Добавить поиск Ajax на ваш сайт Divi можно быстро и легко с помощью подключаемого модуля Divi Ajax Search. Его легко использовать, его легко адаптировать к вашему веб-сайту, а результаты получаются быстрыми и выглядят фантастически. У вас есть много вариантов для типов сообщений, которые он может искать, и для типов контента, который он будет отображать в результатах.

Теперь ваш сайт Divi может иметь профессионально разработанную функцию поиска Ajax, которую оценят ваши посетители!

Ждем вашего ответа. Вы добавили на свой сайт Divi поиск Ajax в реальном времени? Расскажите нам о своем опыте в комментариях.

Лучшее изображение через Kroster / shutterstock.com