• Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!
  • Темы озаглавленные с маленькой буквы или капсом удаляются без предупреждения!

YITH AJAX SEARCH - плагин AJAX поиска / кастомизация плагина

Валерий

Специалист
Плагин YITH WooCommerce Ajax Search позволяет создать на вашем сайте систему поиска, основанную на AJAX технологии. В WooComerce уже встроена штатная система поиска. По умолчанию ее можно активировать виджетом в сайдбаре, или с помощью кода вывести в другом месте сайта. Плагин добавляет приятные мелочи к дефолтному поиску WooCommerce - динамический (т.е. меняющийся по мере ввода искомого текста) выпадающий список товаров и подсветку искомой фразы. Выглядит это так:

woocommerce-yith-ajax-search-6.png
Причем большой плюс данного плагина в том, что он, как и штатный поиск WooCommerce, может быть расширен за счет сторонних плагинов. Изначально в нем заложен базовый принцип поиска, основанный на поиске по названиям товаров. Однако, путем активации ряда других плагинов, возможности плагина существенно расширяются. Так, активация плагина Saphali Search Castom Filds позволяет в форме поиска осуществлять поиск не только по названиям товаров, но и по заказным полям (т.е. вариациям товаров) и свойствам товара (разработчики Saphali утверждают, что их плагин ищет еще и по артикулам, но я почему-то этого не заметил o_O), а активации плагина Search By SKU - for Woocommerce еще больше расширяет возможности поиска, и поиск будет осуществляться еще и по названиям артикулов. Таким образом, настроив плагин "YITH WooCommerce Ajax Search", а также активировав дополнительные плагины "Saphali Search Castom Filds" и "Search By SKU - for Woocommerce" можно получить продвинутую и довольно симпатичную систему поиска товаров вашего интернет-магазина, которая будет работать по принципу "Найдется все!" Ну, или почти все... :D

Сейчас встречается много интернет-магазинов где большие красивые картинки товаров, да и все такое большое и красивое... только вот почему-то такие важные составляющие как грамотная навигация, многоуровневая система фильтрации товаров и продвинутый поиск там отсутствуют напрочь?!o_O Видимо владельцы таких интернет-магазинов считают, что клиенты приходят на их сайты картинки смотреть! :D :D :D

КАСТОМИЗАЦИЯ ПЛАГИНА

Изначально, при активации виджета в сайдбаре, дефолтная форма поиска плагина имеет следующий вид:

woocommerce-yith-ajax-search-8.png

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

Так выглядит блок поиска в неактивном виде:

woocommerce-yith-ajax-search-1.png

Так, при клике в области поиска (т.е. подсказка исчезает):

woocommerce-yith-ajax-search-2.png
Так, при вводе текста для поиска (работает ajax загрузчик):

woocommerce-yith-ajax-search-3.png

Так виде выдаются динамические результаты поиска (искомый текст подсвечивается, если он содержится в названии; если подсветки нет, то искомый текст содержится в заказных полях или артикулах):

woocommerce-yith-ajax-search-4.png

Ну а так, когда ничего найти не удалось:

woocommerce-yith-ajax-search-5.png

При этом, в форме настроек плагина прописано следующее:

woocommerce-yith-ajax-search-7.png

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

ЭТАПЫ КАСТОМИЗАЦИИ ПЛАГИНА

Кастомизация плагина начинается с поиска нужного кода для вставки в шаблон, который находится в файле yith-woocommerce-ajax-search.php, расположенном в папке "templates". Вот этот кусок кода:

Код:
<div class="yith-ajaxsearchform-container">
<form role="search" method="get" id="yith-ajaxsearchform" action="<?php echo esc_url( home_url( '/'  ) ) ?>">
    <div>
        <label class="screen-reader-text" for="yith-s"><?php _e( 'Search for:', 'yit' ) ?></label>
        <input type="search" value="<?php echo get_search_query() ?>" name="s" id="yith-s" placeholder="<?php echo get_option('yith_wcas_search_input_label') ?>" />
        <input type="submit" id="yith-searchsubmit" value="<?php echo get_option('yith_wcas_search_submit_label') ?>" />
        <input type="hidden" name="post_type" value="product" />
    </div>
</form>
</div>

Для начала Вам нужно вставить вышеуказанный кусок кода в то место шаблона, где у Вас будет выводиться форма поиска, при этом добавить общие стили вашей темы и добавить/убрать какие-то элементы в исходном коде. Вот, например, как стал выглядеть исходный кусок кода у меня в шаблоне после незначительных изменений:

Код:
            <div class="yith-ajaxsearchform-container">
                <form role="search" method="get" id="yith-ajaxsearchform" action="<?php echo esc_url( home_url( '/'  ) ) ?>">
                  <div class="allsearch-container">
                    <input type="search" onfocus="placeholder='';" onblur="placeholder='<?php echo get_option('yith_wcas_search_input_label') ?>';" value="<?php echo get_search_query() ?>" name="s" id="yith-s" class="ctr_search" title="Введите и нажмите ввод" placeholder="<?php echo get_option('yith_wcas_search_input_label') ?>" />
                    <input type="submit" id="yith-searchsubmit" class="bt_search" title="Найти Все Варианты" value="<?php echo get_option('yith_wcas_search_submit_label') ?>" />
                    <input type="hidden" name="post_type" value="product" />
                  </div>
                </form>
              </div>

Затем нужно внести изменения в css стили вашего шаблона, дописав нужные стили. Вот пример стилей для формы поиска, изображенной на рисунках выше:

Код:
/*** Стили для скрипта YITH AJAX SEARCH ***/

/* Стиль общего контейнера  для поля ввода и кнопки */

.allsearch-container {
  background: #FFFFFF;
  border: 1px solid #E1DFDF;
  padding: 0;
  height: 29px;
}

/* Стиль поля ввода */

.ctr_search {
  background-image: url("http://vash-obraz.info/wp-content/plugins/yith-woocommerce-ajax-search/assets/images/ajax-loader@2x.gif") no-repeat;
  background-size: 16px 16px !important;
  background-position: 98% center !important;
  border: none;
  float: left;
  padding: 0 22px 0 6px !important;
  position: relative;
  height: 29px;
}

/* Стиль кнопки поиска */

.bt_search {
  background: url("http://vash-obraz.info/wp-content/themes/Vitrine-2.1/images/bg-search.png") no-repeat 0 5px;
  border: none;
  padding: 6px;
  cursor: pointer;
  float: right;
  height: 29px;
  max-width: 29px;
  position: relative;
  width: 16%;
}

/* Стили, преобразующие форму поиска search к виду обычного текстового поля.
  Стили убирают декорацию формы поиска в виде рамки с тенью, а также убирают
  кнопку сброса, отображаемую для поля search по умолчанию в браузерах    */

input[type=search] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    font-family: inherit;
    font-size: 100%;
    width: 159px;
}

input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
    display: none;
}

/* Данные стили убирают оранжевую рамку вокруг поля ввода */

input, textarea { outline:none; }
input:active, textarea:active { outline:none; }
:focus { outline:none; }

Также следует не забыть слегка видоизменить стили в файле плагина yith_wcas_ajax_search.css, например так (как я делал для формы выше):

Код:
/**
* Frontend style
*
* @author Your Inspiration Themes
* @package YITH WooCommerce Ajax Search
* @version 1.0.0
*/

/* search autocomplete */

.autocomplete-suggestions {
    background: #FBF5F5;
    margin-left: 1px;

    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.autocomplete-suggestion {
    background: #FBF5F5;
    padding-left: 10px;
    padding-right: 10px; 
    cursor: pointer;
    text-align: left;
    line-height: 25px;
    font-size: 12px;
    box-shadow: 0.2em 0.2em 2px rgba(122,122,122,0.4);
    width: 170px;
}

.autocomplete-suggestion:hover {
    background-color: #FFFFFF;
    color: #B90204;
}

/* Стиль для разделителей вертикальных списка результатов поиска */

.autocomplete-suggestion {
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #F4DEDE;
}

/* Стиль удаляет верхнюю рамку для первого элемента списка */

.autocomplete-suggestion:first-child {
    border-top: none;
}

/* Стиль удаляет верхнюю рамку для последнего элемента списка */

.autocomplete-suggestion:last-child {
    border-bottom: none;
}
Вот собственно и все! :D
 

delitant

Опытный
Отличный обзор. Интересно, как у такого плагина с нагрузкой на сайт?
 

Валерий

Специалист
Сейчас убрал виджет плагина "YITH WooCommerce Ajax Search" (он у меня в сайдбаре висел с того момента, как я начал заниматься кастомизацией плагина), и обнаружил что форма без виджета перестала работать. :( Для решения проблемы сперва ставил код с официального сайта плагина, но форма, выводимая кодом жила своей жизнью. Получилось в хедере 2 формы, и та, которую я кастомизировал, не работала. :mad: В итоге втавил весь код из yith-woocommerce-ajax-search.php прямо в хедер шаблона. :eek: Все работает. :) Только вот как-то это неправильно, вставлять полное описание функции в хедер. Я сперва вынес все это в отдельный java скрипт, и попытался его стандартно подключить одной строкой в хедере так как, это обычно делается: <script type="text/javascript" src="путь к скрипту (причем абсолютный)"></script>, только такой финт ушами не прошел. Если кто-то в дальнейшем найдет более изящное решение этой проблемы, напишите в комментариях этой темы.
 

delitant

Опытный
Не проще исходные файлы темы перезалить? А то потом не разберётесь что к чему, или кто-то после вас не разберётся.
 

Валерий

Специалист
Не проще исходные файлы темы перезалить? А то потом не разберётесь что к чему, или кто-то после вас не разберётся.
Нет, не проще, наоборот - это усложнит понимание. Все что я тут описал, все исходники берутся из файлов самого плагина, а точнее из yith-woocommerce-ajax-search.php. И все это применимо к любой теме методом копи-паст. Еще правятся стили в yith_wcas_ajax_search.css (это если нужно, например я там в исходный css добавил только стили горизонтальных разделителей списка выводимых результатов; код приводился выше) и добавляются нужные стили уже в сам css файл шаблона выше (тоже все приведено выше). Все это можно копипастить практически в любой шаблон, только нужно будет подкорректировать стили под свой шаблон.
 

ksu

Новичок
YITH WooCommerce Ajax Search и Search By SKU - for Woocommerce - для моего магазина, более чем достаточно :), спасибо.
А вот с кастомизацией не получается, форма совсем не вписывается в дизайн шаблона, хочу как у вас. Что нужно сделать для изменения? Пыталась просто вставить код (предложенный выше) в стили в файле плагина yith_wcas_ajax_search.css , но ничего не изменилось, подскажите, пожалуйста.
 

johns

Форумчанин
YITH WooCommerce Ajax Search поставил. Работает хорошо.
Не могу разобраться с русификацией. Особенно надписи над формой: Search for
Делал файлы и правил через Poedit . Не помогает. Где в плагине меняется язык?
 

appletownworld

Форумчанин
YITH WooCommerce Ajax Search поставил. Работает хорошо.
Не могу разобраться с русификацией. Особенно надписи над формой: Search for
Делал файлы и правил через Poedit . Не помогает. Где в плагине меняется язык?
Попробуйте файлы языка во вложении, я для себя переводил, может быть поможет.
 

Вложения

tsvetnoff

Новичок
Добрый день! Камрады, кто-нибудь может поделиться, пожалуйста, Pro? Видимо пока я доберусь до "Проверенного" мне уже ничего не нужно будет. :) (правила посмотрел, там, вроде, не запрещено просить).
 

D&B

Администратор
Команда форума
Местный
У нас и не было никогда версии ПРО. Это они только недавно ко многим своим плагинам прикрутили. По моем,у премиум вариант этого плагина даже еще никто не пробовал толком.
 

tsvetnoff

Новичок
Ясно. Воспользовался WooCommerce Predictive Search. Доволен, то, что надо.
 

pro_vitaly

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

alekseykurylev

Новичок
Кто подскажет, как добавить вывод картинки и цены товара не используя pro версии?
 
Сверху Снизу