Быстрый ajax поиск для интернет-магазина на Webasyst | Делюсь опытом

Быстрый ajax поиск для Webasyst shop-script

webasyst ajax-поиск товаров

Недавно я столкнулся с задачей реализовать быстрый ajax-поиск для интернет-магазина, реализованного на Webasyst. Гугление и прочий поиск ни к какому готовому решению не привели, поэтому пришлось реализовывать данную возможность самостоятельно. Выкладываю решение, вдруг кому-то оно пригодится.

1. Создаем или редактируем файл search.html в настройках дизайна:

{if strtolower($wa->server('HTTP_X_REQUESTED_WITH')) == 'xmlhttprequest'}
<!-- plugin hook: 'frontend_search' -->
{* @event frontend_search.%plugin_id% *}
{foreach $frontend_search as $_}{$_}{/foreach}
<div id="autocomplete" style="width: 300px; max-height: 300px; display: block;">
   {if !$products}
   [`По заданным параметрам ничего не найдено.`]
   {else}
   {include file='list-thumbs-ajax-search.html'}
   {/if}
</div>
{else}
{include file='searchform.html'}
<br />
<h1>
   Результаты поиска для {$title}
</h1>
<!-- plugin hook: 'frontend_search' -->
{* @event frontend_search.%plugin_id% *}
{foreach $frontend_search as $_}{$_}{/foreach}
{if !$products}
[`По заданным параметрам ничего не найдено.`]
{else}
<div id="product-list">
   {include file='list-thumbs.html'}
</div>
{/if}
{/if}

2. Создаем или редактируем файл searchform.html в настройках дизайна:

<div>
   {$query = $wa->get("query")}
   <form method="get" action="{$wa->getUrl('shop/frontend/search')}">
      <input type="search" name="query" {if !empty($query)}value="{$query}"{/if} placeholder="[`Поиск`]">
      <input type="submit" value="Поиск" />
   </form>
   <div style="">
   </div>
</div>
<script type="text/javascript">
   if (typeof search_autocomplete != 'function') {
     function search_autocomplete( e ){
           var element = $(e.target);
           var form = element.closest('.search-form');
           var container = form.find('.autocomplete-container');
           var query = form.find('.search').val();
           if(query.length > 0){
               var request = $.ajax({
                   url: "{$wa->getUrl('shop/frontend/search')}?query="+query,
                   type: 'get',
                   cache: false,
                   dataType: "html"
               });

               request.success(function(response, textStatus) {
                   container.html(response);
               });

               request.fail(function(response, textStatus) {
                   //alert('error');
               });
           }else{
               container.html('');
           }
     }
   }
   $(document).ready(function() {
     $('.search').on('keyup', search_autocomplete);
   });

</script>

3. Добавляем файл list-thumbs-ajax-search.html для вывода списка товаров в подсказке:

<!-- products ajax search thumbnail list view: related products, etc. -->
{$query = $wa->get("query")}
{$replace = '<strong>'|cat:$query|cat:"</strong>"}
{foreach $products as $p}
<a href="{$p.frontend_url}" title="{$p.name}" class="">
{$wa->shop->productImgHtml($p, '35x35', ['itemprop' => 'image', 'alt' => $p.name, 'default' => "`$wa_theme_url`img/dummy96.png"])}{$p.name|replace:$query:$replace}
</a>
{/foreach}

4. Определяем внешний вид для всплывающего списка:

.search-form .autocomplete-container{
/*height: 200px;*/
/*width: 300px;*/
/*display: none;*/
position: absolute;
text-align: left;
}
.search-form .autocomplete-container .autocomplete{
position: absolute;
z-index: 9999;
left: -50px;
width: 300px;
max-height: 300px;
display: block;
overflow-x: hidden;
overflow-y: scroll;
padding: 5px;
border: 1px solid #cccccc;
background-color: #ffffff;
font-size: 12px;
color: #404041;
text-transform: none;
}
.search-form .autocomplete-container .autocomplete a{
display: block;
line-height: 35px;
vertical-align: middle;
white-space: nowrap;
margin-bottom: 5px;
font-size: 12px;
text-transform: none;
}
.search-form .autocomplete-container .autocomplete a:hover{
         background-color: #D4D3FC;
}
.search-form .autocomplete-container .autocomplete img{
vertical-align: middle;
margin-right: 5px;
}
.search-form .autocomplete-container .autocomplete strong{
         color: #0000ff;
}

Архив с исходниками можно скачать по ссылке: shop_script_ajax_search.

 

Похожие записи:

5 комментариев

  1. Здравствуйте, скажите это дополнение для какой версии шоп скрипта?

  2. Здравствуйте. Извините, а для webasysta 308 версии этот модуль можно реализовать? Указанные для редактирования файлы типа search.html и searchform.html в данном шаблоне отсутствуют.

    С уважением, Дмитрий

    • Для версии 308 не подскажу. Но суть в том, что нужно обработать ajax-запрос, выполнить стандартную функцию поиска в webasys, если она есть и вывести результат. Возможно в 308 версии эти шаблоны как-то по-другому называются.

    • Здравствуйте Дмитрий если актуально пишите в скайп jorange-script поможем решить вопрос

Добавить комментарий

Обязательные поля помечены *.