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

Перейти к контенту

Главное меню:

Статьи
"Живой поиск" для сайтов WebsiteX5
Все статьи → Websitex5CMS    Websitex5    
"Живой поиск" для сайтов WebsiteX5
фото

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

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

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

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

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  -  в корень сайта.

 

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

  

 


<<пред.   след.>>

Просмотров 1770    Добавить комментарий  (3)

18.08.2019 23:11  Артур
Все отлично заработало!!!
Спасибо.
16.08.2019 23:30  Артур
Живой поиск на сайте: lombardo.com.ua Подскажите где косяк? Спасибо.
16.08.2019 23:05  Артур
Здравствуйте. Не понятно откуда взялся файл: add_live_search.php. В скринах и тексте файл называется: live-search.php. Подставил на сайт по тексту и превью появилось, однако после нажатия на выбранный продукт показало ошибку. После того, как был изменен в коде адрес add_live_search.php на live-search.php - заработало, однако показывает карточку которую выбрал из корзины товаров (согласно п.6 Вашего описания), а не тот товар который искал (при поиске товара всегда выдает установленную карточку согласно п. 6). Подскажите где косяк? Спасибо. (Сайт создан на X5 Pro).

Админ:
Здравствуйте, Артур. Надо все сделать по инструкции, не надо фантазировать и менять коды, тогда все заработает. Файл add_live_search. php это файл из архива "исходники". Если не получается, напишите мне на электронную почту


Назад к содержимому | Назад к главному меню