Авторизация  
VaM

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

Рекомендуемые сообщения

VaM

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

Без перезагрузки страницы, через 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

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


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

Для публикации сообщений создайте учётную запись или авторизуйтесь

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

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти
Авторизация