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

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

Напомним, что это вовсе не обязательное условие возникновения проблемы, поскольку многое зависит от того, как именно стилизованы блоки на вашем сайте. 

Механизм возникновения проблемы таков: при стилизации у блока, содержащего ваш виджет, было установлено свойство overflow: hidden или overflow-y: hidden. Иногда эти параметры в блоках не нужны, но разработчики страхуются на случай слишком широкого или длинного контента и выставляют их, чтобы не ломалась верстка, если контент шире блока, в котором он содержится. 

Как правило, эту проблему можно решить, убрав или подкорректировав значения этого свойства для конкретного места.

Может возникнуть и такая ситуация: вы размещаете виджет на сайте и ожидаете, что все поля для поиска будут идти в одну строчку, а в результате встраиваемые поля отображаются в две строки. Это происходит в том случае, если блок слишком мал, чтобы вместить всю длину виджета, и, следовательно, он ужался, но чтобы длина полей осталась удобной для пользователя — расположил их друг под другом. Исправить такое поведение можно через увеличение ширины родительского блока виджета: в свойствах стилизации такого блока практически всегда имеется параметр width. 

Именно его значение необходимо увеличить. Рекомендуем также обратить внимание на то, используется ли эта же часть стилизации где-то еще: иногда проще добавить новый класс, чем переписывать старые. Кроме того, ширина может быть жестко задана не только этому контейнеру, но и другим родительским контейнерам.

Что делать если виджет просто не появляется на странице? Одна из причин такого поведения виджета — его неправильное размещение. В частности, в тэге head. Обычно он содержит ссылки на скрипты, необходимые стили для вашего сайта, а также SEO информацию. На самой странице этот тэг не отображается и, соответственно, если вставить в него что-то, то на сайте это не появится. 

В заблуждение может вводить тот факт, что вы вставляете тег script, который при разработке вашего сайта помещают в этот тег head или же в самом конце кода разметки вашей страницы. Но код виджета — это не просто сценарий какого-то поведения, поэтому вставлять его следует туда, где вы хотите его видеть. 

Например, итоговый код странички вашего сайта может выглядеть так:

Красной рамкой выделен код формы поиска. Он лежит внутри тэга, обозначающего главное содержимое страницы, но не в шапке, обозначаемой тегом header, и не в блоке с мета-информацией.

Или другой пример:

Красной рамкой выделен всё тот же скрипт нашей формы. Оранжевым подчеркиванием отмечена граница видимого содержимого страницы. Теги здесь совершенно другие, но суть осталась прежней: наш скрипт всегда лежит в теге body.

По этим и другим вопросам техническим вопросам вы всегда можете обратиться к нам на partner@onetwotrip.com

25 декабря в 17:00 по Москве мы ждём вас на очередной вебинар для партнёров, но на этот раз он будет особенным: мы будем вручать призы🎁.

Три самых наших активных партнёра в трёх номинациях получат сертификаты на 15 тысяч рублей, которые можно потратить на OneTwoTrip. А ещё трём случайно выбранным участникам вебинара подарим брендированные подушки для путешествий.

Посмотрите, не претендуете ли ли вы на одну из номинаций — ещё есть время поднажать:)

• Прорыв года — партнёр, который присоединился к нам в 2018 году и показал впечатляющие результаты.

• Стабильность — признак мастерства — партнёр, который в течение последнего года стабильно показывал высокие результаты.

• Локомотив — партнёр, который продаёт больше всего ж/д билетов.

Ждём вас 25 декабря! Записаться на вебинар можно здесь.