В данной небольшой заметке расскажу как сделать вывод результатов поиска товаров прямо рядом со строкой поиска.
Без перезагрузки страницы, через 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