Введите часть искомого слова, названия или фразы...
↑ ↓
  1. Новые темы озаглавленные с маленькой буквы - удаляются без предупреждения!
  2. Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!

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

Тема в разделе "Плагины для WooCommerce", создана пользователем Валерий, 7 окт 2013.

  1. Валерий

    Валерий

    Сообщения:
    271
    Симпатии:
    152
    Баллы:
    43
    Плагин 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
     
    • Нравится Нравится x 3
  2. delitant

    delitant

    Сообщения:
    128
    Симпатии:
    30
    Баллы:
    28
    Отличный обзор. Интересно, как у такого плагина с нагрузкой на сайт?
     
  3. Валерий

    Валерий

    Сообщения:
    271
    Симпатии:
    152
    Баллы:
    43
    А что Вам мешает это проверить?;)
     
    • Нравится Нравится x 1
  4. delitant

    delitant

    Сообщения:
    128
    Симпатии:
    30
    Баллы:
    28
    Предпочитаю учиться на чужом опыте :)
     
    • Нравится Нравится x 1
  5. Валерий

    Валерий

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

    delitant

    Сообщения:
    128
    Симпатии:
    30
    Баллы:
    28
    Не проще исходные файлы темы перезалить? А то потом не разберётесь что к чему, или кто-то после вас не разберётся.
     
  7. Валерий

    Валерий

    Сообщения:
    271
    Симпатии:
    152
    Баллы:
    43
    Нет, не проще, наоборот - это усложнит понимание. Все что я тут описал, все исходники берутся из файлов самого плагина, а точнее из yith-woocommerce-ajax-search.php. И все это применимо к любой теме методом копи-паст. Еще правятся стили в yith_wcas_ajax_search.css (это если нужно, например я там в исходный css добавил только стили горизонтальных разделителей списка выводимых результатов; код приводился выше) и добавляются нужные стили уже в сам css файл шаблона выше (тоже все приведено выше). Все это можно копипастить практически в любой шаблон, только нужно будет подкорректировать стили под свой шаблон.
     
    • Нравится Нравится x 1
  8. ksu

    ksu

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

    johns

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

    appletownworld

    Сообщения:
    33
    Симпатии:
    6
    Баллы:
    8
    Попробуйте файлы языка во вложении, я для себя переводил, может быть поможет.
     

    Вложения:

    • languages.zip
      Размер файла:
      2,5 КБ
      Просмотров:
      21
    • Нравится Нравится x 2
  11. Drunk_Monkey

    Drunk_Monkey

    Сообщения:
    15
    Симпатии:
    3
    Баллы:
    3
  12. tsvetnoff

    tsvetnoff

    Сообщения:
    7
    Симпатии:
    1
    Баллы:
    3
    Добрый день! Камрады, кто-нибудь может поделиться, пожалуйста, Pro? Видимо пока я доберусь до "Проверенного" мне уже ничего не нужно будет. :) (правила посмотрел, там, вроде, не запрещено просить).
     
  13. D&B

    D&B Администратор Команда форума Местный

    Сообщения:
    3.262
    Симпатии:
    721
    Баллы:
    113
    У нас и не было никогда версии ПРО. Это они только недавно ко многим своим плагинам прикрутили. По моем,у премиум вариант этого плагина даже еще никто не пробовал толком.
     
  14. tsvetnoff

    tsvetnoff

    Сообщения:
    7
    Симпатии:
    1
    Баллы:
    3
    Ясно. Воспользовался WooCommerce Predictive Search. Доволен, то, что надо.
     
  15. pro_vitaly

    pro_vitaly

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