BodySite — технологический партнёр Ozon!Подробнее
Полезная информация

Инструкция по интеграции плагина «Поиск PRO» в тему дизайна TopShop

Поддержка Bodysite
Поддержка Bodysite
22 марта 2019 16:26
+1

Откройте файл index.html.

Найдите код формы поиска 

<form method="get" action="{$wa->getUrl('shop/frontend/search')}" data-search="{$wa->getUrl('shop/frontend/search')}">
    <input {if $theme_settings.header_search}class="livesearch"{/if} id="search" name="query" autocomplete="off" type="text" placeholder="[`Search in shop`]" {if $wa->get("query")}value="{$wa->get("query")}"{/if}>
    <button type="submit" class="search_button"><i class="icon-icon_search"></i></button>
    <div class="search-popup"></div>
</form>

Замените код на {shopSearchproPluginViewHelper::field()}


Форма появилась, нужно вывести всплывающие подсказки поверх меню.

В настройках плагина нужно отредактировать файл стилей (нужно выбрать тему дизайна TopShop).

Нужно заменить 

.js-searchpro__dropdown,
.js-searchpro__helper {
    z-index: 999;
    position: absolute;
}

на 

.js-searchpro__dropdown,
.js-searchpro__helper {
    z-index: 9999;
    position: absolute;
}

И в блоке .searchpro__field .searchpro__field-categories-list нужно увеличить значение z-index до 9999.

В теме дизайна появится такая поисковая форма:

В настройках плагина необходимо отметить пункт «100% ширина поля поиска», чтобы на мобильных устройствах форма не выходила за пределы экрана.