Техническая поддержка 8 800 555 6342
Положение об оказании услуг технической поддержки
CMS.S3

Размещение формы поиска на сайте #2073

Обращаем Ваше внимание:

Служба технической поддержки не предоставляет консультаций по редактированию шаблонов.

При необходимости Вы можете разместить на своем сайте (например, в "шапке", в "подвале" или в каком-либо из меню сайта: верхнем или боковом) форму поиска по сайту.

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

После того как расширенные права доступа получены, можно приступать к работе.

Рассмотрим весь процесс размещения формы на примере верхнего меню.

Шаг 1

Прежде всего определитесь, в каком месте сайта Вы бы хотели разместить форму поиска. В нашем примере - это верхнее меню.

phpejgAzi

Шаг 2

Затем найдите нужное Вам место в коде страницы. Для этого, находясь на странице, нажмите F12 (в большинстве браузеров) в открывшейся рабочей области нажмите на иконку с изображением лупы или иным способом перейдите к выделению нужного элемента.

phppXFYlP

Выделите на странице то место, где Вы хотите разместить форму поиска. Обратите внимание - это место будет отмечено и в коде рабочей области ниже (в нашем случае это строка "<ul class="nav-top">).

php7XnW2K

Шаг 3

Перейдите к разделу "Настройки" - "Шаблоны и файлы".

phpDemEPw

Шаг 4

Выберите и откройте для редактирования нужный Вам шаблон. В нашем случае - это "_Главная. Верх".

phpGpsfpX

Шаг 5

Найдите в открывшемся шаблоне то место, которые Вы отмечали в шаге 2 (у нас это строка <ul class="nav-top">). И над этой строкой вставьте следующий код:

<form id="form" class="search" name="poisk" method="get" action="/search">

<input type="search" value="Поиск по сайту" onfocus="this.value=this.value=='Поиск по сайту'?'':this.value;" onblur="this.value=this.value==''?'Поиск по сайту':this.value;" name="search">

<input type="submit" value="">

</form>

phpovNucE

Шаг 6

Сохраните изменения в шаблоне.

phpj2Nd9h

Шаг 7

Можете перейти на сайт и посмотреть, что у Вас получилось. Должна отобразиться форма поиска. 

phpquL8x9

Теперь необходимо выровнять форму и загрузить иконку для кнопки.

Шаг 8

Вернитесь в раздел "Шаблоны и файлы" системы управления и перейдите к "Файлам" дизайна.

phpV5GXU7

Шаг 9

Далее Вам будет необходимо найти нужный файл стиля, это может быть: styles.less, styles.less.css или же styles.css. Найти нужный файл Вы можете в папке "images" или же в отдельной папке "css".

  • Выберите styles.less и откройте для редактирования, если дата его изменения позднее, чем дата styles.less.css.

phpAKVNVb

  • Или же откройте для редактирования styles.less.css - если именно он был изменен позднее.

phpmoCT5U

  • Если же ни того, ни другого файла в папках нет - откройте для редактирования файл styles.css.

php0qUj2p

Шаг 10

В открывшемся файле вставьте стили для формы.

.search {

height:26px;

width:212px;

background:#ffffff;

-webkit-border-radius:3px;

-moz-border-radius:3px;

border-radius:3px;

margin:4px 17px 0;

float:right;

}

.search input[type="search"]::-webkit-search-cancel-button { display:none; }

.search input[type="search"] {

float:left;

height:26px;

width:170px;

margin:0;

padding:0 0 0 10px;

border:none;

font:normal 12px Arial;

line-height:26px;

color:#afaeae;

background:none;

outline:none;

-webkit-appearance:none;

-moz-appearance:none;

}

.search input[type="submit"] {

float:right;

height:26px;

width:22px;

margin:0 8px 0 0;

padding:0;

border:none;

background:url(../search-but.png) center center no-repeat;

cursor:pointer;

}

phpPcgeWd

Обратите внимание!

  • Вы можете изменять значения в стилях, если хотите отредактировать длину и отступы формы.

Шаг 11

И сохраните изменения в файле.

phpWp50es

Шаг 12

Теперь снова откройте раздел "Шаблоны и файлы" системы управления и перейдите к "Файлам" дизайна, а затем в папку "Images".

phpSrdUg1

Нажмите на кнопку "Обзор" и выберите файл с иконкой для кнопки поиска (его мы предлагаем Вам скачать по следующей ссылке - при необходимости Вы можете использовать и свое изображение).

phpxVVtjc

И нажмите на кнопку загрузки.

phpliNoPM

Шаг 13

Перейдите на сайт. Форма поиска должна иметь примерно следующий вид.

phpKMUlS1

Обратите внимание!

  • Если иконка с изображением лупы не отображается - откройте файл стиля (Шаг 10) и в строке "background:url(../search-but.png) center center no-repeat;" укажите в скобках точный адрес до загруженного изображения с иконкой (Шаг 12). Строка должна принять примерно следующий вид "background:url(http://site/d/123456/t/search-but.png) center center no-repeat;" (курсивом выделен пример URL - в Вашем случае вместо него должен быть указан url загруженной Вами иконки).
  • Для корректной работы поиска в Вашей системе управления должна быть создана страница вида "Поиск" с адресом "/search".

Обратите внимание!

  • Данная инструкция является примером реализации описанного функционала. Показанные в инструкции результаты могут отличаться от реальных по причине специфики шаблонов конкретного сайта или иных технических нюансов.