Не работает поиск OpenCart при переносе

В базовый шаблон OpenCart уже встроено немало скриптов, облегчающих жизнь разработчику. Однако, иногда приходится сталкиваться с не самыми очевидными проблемами. Одна из них: перестает работать поиск при переносе его в другое место.

В чем это проявляется?

Вот, предположим, вы решили переместить поиск в другое место. Перенести его просто: находим в файле шаблона шапки (\template\common\header.tpl) что-то типа этого:

<div class="col-sm-5">
<?php echo $search; ?>
</div>

И переносим в том, место, куда требуется. Однако, радость наша будет недолгой: поиск перестает искать. То есть. Поле нажатия показывает, что ничего не найдено.



Почему?

Дело в том, что обработчик кнопки поиск (функция JavaScript) получает значение для поиска не просто по имени поля ввода, но еще имя должно быть в одном элементе. То есть привязано к её расположению относительно других элементов (то есть дерева DOM). Так что, если мы откроем файл «catalog\view\javascript\common.js», то увидим вот это:

	/* Search */
	$('#search input[name=\'search\']').parent().find('button').on('click', function() {
		var url = $('base').attr('href') + 'index.php?route=product/search';

		var value = $('header #search input[name=\'search\']').val();

		if (value) {
			url += '&search=' + encodeURIComponent(value);
		}

		location = url;
	});

И это:

$('#search input[name=\'search\']').on('keydown', function(e) {
		if (e.keyCode == 13) {
			$('header #search input[name=\'search\']').parent().find('button').trigger('click');
		}
	});

Первая строка функция запускает поиска по клику по кнопке, а вторая – при нажатии энтера (точнее, когда его отпускают) имитирует клик по кнопке, то есть делает то же, что и первая.

Как решить проблему?

Просто убрать из этих функций слово header из этих строк:

$('header #search input[name=\'search\']')

Получится:

$('#search input[name=\'search\']')

Работает для OpenCart 2.3 и ocStore 2.3.