"Живой поиск" для сайтов WebsiteX5

Эта публикация начинает цикл статей, посвященных скриптам, кодам и плагинам, предназначенным для расширения возможностей интернет-магазина на конструкторе сайтов WebsiteX5. Это продвинутый поиск, избранное, фильтры товаров и многое другое. В следующей статье будет представлен плагин "Добавить в Избранное".

Конечно же лучше строить интернет-магазин на специализированных CMS, в которых уже есть полный встроенный функционал, в том числе для облегчения поиска товаров. Но предлагаемый скрипт пригодится тем, у кого уже имеется один или несколько интернет-магазинов, сделанных в конструкторе, и переход на другую платформу является для них проблематичным по каким-либо причинам.

Что такое живой поиск? Вы с ним сталкиваетесь постоянно, когда что-то ищете в Гугле или Яндексе. Вы только начинаете набирать поисковый запрос, а поисковик уже начинает предлагать вам варианты, из которых вам остается лишь выбрать наиболее подходящий.

Используется живой поиск и в интеренет-магазинах. По мере набора поискового запроса, в выпадающем окне появляется список товаров или категорий товаров или брендов, подходящих под ваш запрос. Примеры такого поиска можно помотреть на сайтах 

https://cactus-trade.ru

https://zenden.ru

https://discount77.ru/

(ссылки привожу ни в коем случае не для рекламы, а только в качестве примеров)

Многие пользователи недовольны встроенным поиском конструктора сайтов WebsiteX5, поэтому для расширения его возможностей, я предлагаю скрипт "живого поиска" по каталогу интернет-магазина, сделанного в этом конструкторе.

Демонстрация работы скрипта находится здесь.

Поиск производится по наименованиям товаров вашего магазина. После набора первых трех (или более) символов поискового запроса в окне ниже формы поиска появляется список ссылок на подходящие товары. Ссылки упорядочены по времени добавления товара в каталог. Т.е. в начале списка - самые последние добавленные товары, в конце - более старые товары. По клику на одной из ссылок вы попадете на страницу с карточкой этого товара, которая будет создана динамически. Оформление карточки вы задаете в проекте (для версии 17). По клику на ссылке "все результаты" запустится штатный поиск WebsiteX5. Скрипт никак не ограничивает возможности встроенного поиска, а только дополняет их.

Базовую версию скрипта можно сачать бесплатно по ссылке внизу статьи.

Для установки скрипта надо сделать следующее.

1. Добавить в проекте вашего интернет-магазина объект «Поле поиска» (если его еще нет).
   
   
2. Поставить объект HTML-код под поле поиска, высота объекта неважна. В нем будет всплывающее окно «живого поиска». Вставить в него такой код:
   
   

   <ul class="search_result"></ul>
   

   
   
3. Задать расположение этого объекта для всех точек останова адаптивного дизайна.
   
   
4. Создать страницу для вывода результатов живого поиска, задать в свойствах страницы ее имя файла  live-search и задать расширение php на вкладке "Эксперт". На панели инструментов "Создание карты сайта" нажмите кнопку "Скрыта" (Скрытая страница в меню).
   
   
5. В той части страницы live-search.php, где должна будет выводиться карточка-результат живого поиска, вставить  объект  html-код (высота 0 , без полос  прокрутки) с  кодом:
   
   

   <?php require_once("add_live_search.php"); ?> 

   
   
6. На странице live-search.php добавить объект «Каталог товаров» с одной карточкой товара (такой же ширины, как HTML объект в п.5) . Сама эта карточка отображаться на сайте не будет, но размеры и оформление этой карточки будет служить шаблоном для карточки-результата живого поиска. Карточка – шаблон должна быть с полным набором полей, включая поле “Параметры” (“Опции”). Это может быть любая карточка товара из вашего каталога или  карточка со специально созданным «шаблоном» товара.
   
   
7. В расширенных настройках “Статистика,СЕО,Код Перед закрывающим тегом body” вставить коды для подключения скриптов и стилей css :
   
   

   <link rel="stylesheet" href="files/live_search_min.css">
   <script src="files/live_search_min.js"></script>
   

   
   
8. Загрузить сайт на сервер.
   
   
9. Загрузить на сервер файлы:
   
   live_search_min.css    и    live_search_min.js -   в папку /files
   
   add_live_search.php  -  в корень сайта.
   
   

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