Строка поиска в мобильной версии Default 3.0 Есть решение

Нужно вывести строку поиска на страницу. Вставляю этот код:

    <form method="get" action="{$wa->getUrl('shop/frontend/search')}" class="search">
        <div class="search-wrapper">
            <input id="search" type="search" name="query" {if !empty($query)}value="{$query}"{/if} placeholder="[s`Find products`]">
            <button type="submit"></button>
            {* <span class="search-sample">{sprintf('[`E.g. %s`]', '<a href="'|cat:$wa_app_url:"search/?query=productname":'">productname</a>')} *}
        </div>
    </form>

В ПК версии все норм. В мобиле ничего не отображает. 

Как сделать чтобы в мобильной версии тоже работало?

2 ответа

  • 2
    replicant 4 марта 2019 08:54 # Решение

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

    2. Поведение объектов зависит от CSS (ищите строку .search {display:none;}) в основном css шаблона. Она находится в секции

    @media screen and (max-width: 760px)

    и отвечает за то, что у вас пропадает форма поиска. Строку надо либо закомментировать, либо удалить, либо изменить. Тут вариантов несколько в зависимости о того, где у вас будет находиться форма поиска, куда она будет вложена и что с ней надо делать или не делать в адаптивной версии.

    3. Сам поиск из головы (header) в адаптивной версии не пропадает, а прячется под "гамбургер" мобильного меню. За это отвечает строка в основном js файле темы

    $('body').prepend($('header .search').clone().addClass('nav-negative'));

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

    К объекту по имени класса можно обратиться разными способами. Условно говоря "сразу ко всем" или "точно к определенному объекту". Допустим .search {display:none;} скроет все объекты данного класса, header .search {display:none;} скроет только те, которые находятся в header, а остальные, раскиданные по странице, возможные формы поиска не затронет.

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите