Поиск

Создание живого поиска

Пример для ознакомления.

Для автокомплита результатов используется плагин: jquery.autocomplete.js.

CSS прописывается по вкусу.

/search_suggestions.json

Параметры:

account_id: 225801 - id аккаунта магазина.
locale: ru - текущая локаль сайта.
hide_items_out_of_stock: скрывать товары которых нет на складе?
query: машинка - поисковая фраза

Liquid

        
          <form action="/search" method="get" class="search-form">
  <input name="q" type="text" placeholder="поиск" class="search-input js-search-input">
  <div class="autocomplete-suggestions"></div>
</form>
<script type="text/javascript">
jQuery(document).ready(function($) {
  //Поиск
  $('.js-search-input').autocomplete({
    serviceUrl: '/search_suggestions',
    onSelect: function (suggestion) {
      window.location.href = '/product_by_id/' + suggestion.data;
    },
    params: {
      account_id: {{ account.id }},
      locale:'{{ language.locale }}',
      hide_items_out_of_stock: true
    },
  });
});
</script>

Поиск

/search и /search.json для ajax запросов

Для поиска нужно передать гет параметр q, значением которого будет искомая фраза

например /search?q=товар

Liquid js

        
          <form action="/search" method="get">
  <input type="hidden" name="lang" value="{{ language.locale }}">
  <input type="text" name="q" value="" placeholder="Поиск"/>
  <button type="submit">Поиск</button>
</form>

        
          $.get('/search.json', {q: 'товар'}, function(products) {
  console.log(products);
});