В предыдущей статье - "Умный поиск с кнопкой внутри поля ввода текста (часть 1)" мы разместили на сайте модуль умного поиска. Как было в ней сказано, в стандартных настройках кнопки "Искать" модуля поиска, отсутствует положение "Внутри поля". Это негативно сказывается на его юзабилити.
Итак, давайте избавимся от этого недостатка и сделаем модуль "Умный поиск" с кнопкой "Искать" внутри поля ввода текста.
Сначала отобразим нужную нам настройку в настройках модуля умного поиска (см. рис. 1).
Рис. 1. Отображение настроек умного поиска.
Для того, чтобы добавить новый пункт выпадающего списка "Внутри поля" позиции кнопки (см. рис. 1), внесем изменения в языковые файлы данного модуля, в нашем случае добавим соответствующие изменения в файлы локализации русского и английского языков. Для этого, открываем файл локализации русского языка "ваш_сайт/language/ru-RU/ru-RU.mod_finder.ini" и дописываем в самый его конец:
MOD_FINDER_CONFIG_OPTION_INTO="Внутри поля"
Аналогично, в файле локализации английского языка "ваш_сайт/language/en-GB/en-GB.mod_finder.ini" дописываем:
MOD_FINDER_CONFIG_OPTION_INTO="Into text"
Далее добавим отображение переменной "MOD_FINDER_CONFIG_OPTION_INTO" в позицию кнопки, для ее отображения в настройках модуля умного поиска. Для этого в файле "ваш_сайт/modules/mod_finder/mod_finder.xml" добавляем в соответствующий раздел "button_pos" (позиция кнопки - обычно это строка 79) отображение новой переменной. Должно получиться следующее:
<field name="button_pos" type="list" label="MOD_FINDER_FIELDSET_ADVANCED_BUTTON_POS_LABEL" description="MOD_FINDER_FIELDSET_ADVANCED_BUTTON_POS_DESCRIPTION" default="left" > <option value="right">JGLOBAL_RIGHT</option> <option value="left">JGLOBAL_LEFT</option> <option value="top">MOD_FINDER_CONFIG_OPTION_TOP</option> <option value="bottom">MOD_FINDER_CONFIG_OPTION_BOTTOM</option> <option value="into">MOD_FINDER_CONFIG_OPTION_INTO</option></field>
После этого в настройках модуля умного поиска появится новая позиция кнопки "Искать", как представлено на рис. 1. Но, выбрав ее, кнопка "Искать" не примет вид, представленный на рис. 2, пока мы не внесем изменения в файл, отвечающий за внешний вид компонента умного поиска.
Рис. 2. Умный поиск с кнопкой внутри поля ввода текста.
Конечно, можно внести изменения в сам файл модуля "ваш_сайт/modulesmod_finder /tmpl/default.php", но при следующем обновлении данного модуля, все сделанные изменения пропадут. Чтобы этого не произошло, нужно сделать переопределение модуля. Для этого, в административном разделе Joomla, кликаем по главному меню Joomla - "Расширения" и выбираем подменю "Шаблоны" и из него выбираем следующее подменю "Шаблоны". В списке шаблонов открываем свой, кликнув мышкой по его названию. Переходим на вкладку "Создать переопределение" (см. рис. 3).
Рис. 3. Переопределение модуля умного поиска mod_finder.
Выбираем интересующий нас модуль в позиции колонки модулей (см. рис. 3). Модуль умного поиска называется mod_finder, кликаем по нему мышкой. При этом выводится сообщение:
"Переопределение создано в /templates/osprealhomes/html/mod_finder . Переопределение успешно создано".
При этом в каталоге с шаблоном Вашего сайта "ваш_сайт/templates/osprealhomes/html" создается подкаталог mod_finder, где расположен файл, отвечающие за отображения модуля умного поиска. Откроем, созданный при переопределении модуля, файл "ваш_сайт/templates/osprealhomes/html/mod_finder/default.php" для внесения в него изменений. Я внесу в него изменения прям в редакторе файлов менеджера шаблонов Joomla, перейдя на вкладку "Редактор" и указав нужный файл default.php (см. рис. 4).
Рис. 4. Редактор файлов менеджера шаблонов Joomla.
Ориентировочно в строке 53 мы видим, что кнопка "Искать" умного поиска формируется в переменной $button:
$button = '<button class="btn btn-primary hasTooltip ' . $suffix . ' finder' . $suffix . '" type="submit" title="' . JText::_('MOD_FINDER_SEARCH_BUTTON') . '"><span class="icon-search icon-white"></span>' . JText::_('JSEARCH_FILTER_SUBMIT') . '</button>';
Далее, в зависимости от настроек умного поиска переменной $output, которой задан вывод самого поля умного поиска:
$output = '<input type="text" name="q" id="mod-finder-searchword' . $module->id . '" class="search-query input-medium" size="' . $params->get('field_size', 20) . '" value="' . htmlspecialchars(JFactory::getApplication()->input->get('q', '', 'string'), ENT_COMPAT, 'UTF-8') . '"' . ' placeholder="' . JText::_('MOD_FINDER_SEARCH_VALUE') . '"/>';
добавляется конкатинацией вывод кнопки "Искать":
switch ($params->get('button_pos', 'left')) { case 'top' : $output = $button . '<br />' . $output; break;
case 'bottom' : $output .= '<br />' . $button; break;
case 'right' : $output .= $button; break;
case 'left' : default : $output = $button . $output; break; }
Здесь мы не видим нужного нам положения "Внутри текстового поля", поэтому сделаем его сами.
Сначала нужно определиться с видом самой кнопки поиска. В нашем случае она представлена Glyphicons - иконкой лупы от Bootstrap с названием "glyphicon glyphicon-search". Для отображения этой иконки нужно в html коде прописать:
<i class="glyphicon glyphicon-search" aria-hidden="true"></i>
Т.к. сама кнопка в html формируется парными тэгами <button></button>, для вывода кнопки с изображением лупы, соответственно нужно прописать код:
$button = '<button><i class="glyphicon glyphicon-search" aria-hidden="true"></i></button>';
Но, в таком виде кнопка расположется не совсем нужным образом. Чтобы это исправить и поместить кнопку искать внутри текстового поля, добавим в файл "ваш_сайт/templates/osprealhomes/html/mod_finder/default.php" положение into (внутри кнопки), определенное в файле "ваш_сайт/modules/mod_finder/mod_finder.xml" при его редактировании вначале данной статьи. Для этого в файле "ваш_сайт/templates/osprealhomes/html/mod_finder/default.php" добавим код:
case 'into' : //кнопка поиска с иконкой лупы $button = '<button style="margin-left: -30px; border: none; background: none;"><i class="glyphicon glyphicon-search" aria-hidden="true"></i></button>';
$output = '<div class="search" style="display: flex;">' . $output . $button . '</div>'; break;
В нем переменной $button присваивается кнопка в виде лупы, как было рассмотрено чуть выше. Попутно кнопке задаем стили, сдвигая ее на 30 пикселей левее, для помещения в текстовую область и убираем рамку с заливкой кнопки поиска.
При добавлении переменной $output, которой уже присвоена текстовая область ввода значений поиска конкатенацией переменной $button, следует учесть, что большинство шаблонов, включая их мобильные версии разместят сначала поле ввода текста, а затем под этим полем отобразит иконку кнопки поиска и сдвинет ее влево на 30 пикселей.
Чтобы этого не произошло, вывод текстового поля и кнопки происходит в новом слое - div с названием search, которому присваивается стиль display: flex, тем самым мы задаём направление дочерних элементов этого div-а по вертикали.
С учетом вносимых изменений в файл "ваш_сайт/templates/osprealhomes/html/mod_finder/default.php" получаем (ориентировочно со строки 51) следующий код:
if ($params->get('show_button')){ $button = '<button class="btn btn-primary hasTooltip ' . $suffix . ' finder' . $suffix . '" type="submit" title="' . JText::_('MOD_FINDER_SEARCH_BUTTON') . '"><span class="icon-search icon-white"></span>' . JText::_('JSEARCH_FILTER_SUBMIT') . '</button>';
switch ($params->get('button_pos', 'left')) { case 'top' : $output = $button . '<br />' . $output; break;
case 'bottom' : $output .= '<br />' . $button; break;
case 'right' : $output .= $button; break;
case 'into' : //кнопка поиска с иконкой лупы $button = '<button style="margin-left: -30px; border: none; background: none;"><i class="glyphicon glyphicon-search" aria-hidden="true"></i></button>';
$output = '<div class="search" style="display: flex;">' . $output . $button . '</div>'; break;
case 'left' : default : $output = $button . $output; break; }}
Итак, подведем итог!
Внеся нужные изменения в файлы:
- ваш_сайт/language/ru-RU/ru-RU.mod_finder.ini
- ваш_сайт/language/en-GB/en-GB.mod_finder.ini
- ваш_сайт/modules/mod_finder/mod_finder.xml
- ваш_сайт/templates/osprealhomes/html/mod_finder/default.php
Мы получим модуль умный поиск с кнопкой внутри поля ввода текста, как представлено на рис. 2. Для этого в его настройке (см. рис. 1) будет достаточно указать позицию кнопки поиска - внутри поля и задав настройку отображения самой кнопки умного поиска в положение показать.
На этом сегодня все. Успехов Вам в разработке.