VaM

Вывод результатов поиска товаров через ajax прямо в строке поиска!

1 сообщение в этой теме

В данной небольшой заметке расскажу как сделать вывод результатов поиска товаров прямо рядом со строкой поиска.

Без перезагрузки страницы, через ajax.

Вот как это будет выглядеть, смотрите скриншоты:

5a5c569d769d3_Screenshotfrom2018-01-14225a5c56a0087ae_Screenshotfrom2018-01-1422

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

Как это сделать?!

1. Открываем основной шаблон магазина в Админке - Оформление - Шаблоны - Основной шаблон и ищем код формы поиска:

     <form class="navbar-form navbar-left" role="search" action="{base_path}/page/search-result{config value=url_extension}" method="get" id="search">
       <div class="input-group">
           <input type="text" class="form-control" placeholder="{lang}Search{/lang}" name="keyword" id="search-keywords">
           <div class="input-group-btn">
               <button class="btn btn-primary" type="submit"><i class="fa fa-search"></i></button>
           </div>
       </div>
       <div id="searchPreview"></div>
     </form>

меняем его на:

     <form class="navbar-form navbar-left" role="search" action="{base_path}/page/search-result{config value=url_extension}" method="get" id="search">
       <div class="input-group">
           <input type="text" class="form-control" placeholder="{lang}Search{/lang}" name="keyword" id="search-keywords">
           <div class="input-group-btn">
               <button class="btn btn-primary" type="submit"><i class="fa fa-search"></i></button>
           </div>
       </div>
       <div id="searchPreview"></div>
     </form>


 
Что изменилось:     

Мы добавили атрибут id="search" в саму форму.
Добавили атрибут id="search-keywords" input полю.
Добавили блок с id="searchPreview" для вывода результатов поиска.

2. Открываем файл /app/webroot/js/vamshop.js и ищем строку:

// Ajax cart

добавляем НАД этой строкой следующий код:

// Search Preview

  $("#search-keywords").keyup(function(){
      var action = $("#search").attr("action");
      var searchString = $("#search-keywords").val(); 
      $.ajax({
          url: "/site/search_preview",             
          dataType : "html",
          type: "POST",
          data: "keyword="+searchString,
          success: function(msg){$("#searchPreview").html(msg);}            
 });   
 });


 
3. Открываем файл /app/Controller/SiteController.php и внизу, НАД последней скобкой } добавляем следующий код:

    public function search_preview () {
        // Clean up the post
        App::uses('Sanitize', 'Utility');
        $clean = new Sanitize();
        $clean->paranoid($_POST);

        $_GET['keyword'] = $_POST['keyword']; 

    if ($this->RequestHandler->isAjax()) {
        $this->Smarty->display("{search_result}");
        die();
    } 
        
    }


    
4. Открываем файл стилей /app/webroot/css/vamshop.css и внизу добавляем:

#searchPreview {
    position: absolute;
    z-index: 999999;
    width: 50%;
    height: auto;
    overflow-y: hidden;
    overflow-x: hidden;
    background: #fff; 
}


Всё.

Теперь у нас результаты поиска выводятся прямо под строкой поиска, без перезагрузки страницы.

Как на скриншотах:

5a5c569d769d3_Screenshotfrom2018-01-14225a5c56a0087ae_Screenshotfrom2018-01-1422

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!


Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.


Войти сейчас