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

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

Image CMS

Валерий

Специалист
#1
Плагин 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
 

Валерий

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

delitant

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

Валерий

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

ksu

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

johns

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

appletownworld

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

Вложения

tsvetnoff

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

D&B

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

pro_vitaly

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