Рубрики
vam shop Заметки Новости Обучение Юзабилити

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

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

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

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

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

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

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;
}

Всё.

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

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

рис 1, рис 2

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *