Дарим чек-лист по подготовке к сезону продаж за подписку на наш телеграм Получить
Оставить заявку
Вход в личный кабинет
Написать в техподдержку
Отправить заявку
База знаний
Создание интернет-магазина
SEO-продвижение
Маркетплейсы
Платный трафик и прайс-площадки
Техподдержка и разработка
E-Mail маркетинг
Работа с Казахстаном
База знаний
Bodysite.Help — единая база знаний и хаб поддержки по всем продуктам
К Инструкции
ГлавнаяБаза знанийДополнительный поиск товаров в категорииИнструкцииИнтеграция плагина "Дополнительный поиск" в тему дизайна Insales

Интеграция плагина "Дополнительный поиск" в тему дизайна Insales

Чтобы плагин работал в этой теме дизайна нужно внести изменения в файлы темы дизайна.

Это можно сделать через админ-панель в разделе Витрина - Шаблоны.

1) В css/user.css добавить в конец файла: 

.filterext-filter {
    display: flex;
    gap: 10px;
    white-space: nowrap;
    align-items: center;
}

.filterext-filter__input {
    width: 100%;
}

@media screen and (max-width: 767px) {
    .sorting {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .filterext-filter {
        order: -1;
        flex: 100%;
    }
}

2) В js/user.js добавить в конец файла 

$(function () {
    let debounce = function (callback, delay) {
        let id = null;
        
        return function () {
            const args = arguments;
            
            clearTimeout(id);
            id = setTimeout(function () {
                callback.apply(null, args);
            }, delay);
        };
    };
    
    let storeSelection = function (input) {
        let start = input.selectionStart;
        let end = input.selectionEnd;
        
        return function (input) {
            $(input).focus();
            input.setSelectionRange(start, end);
        };
    };
    
    let restoreSelection = null;
    
    let onInput = debounce(function (input) {
        input.readOnly = true;
        $('#products-filters-form').trigger('submit');
        restoreSelection = storeSelection(input);
    }, 500);
    
    $(document).on('input', '.filterext-filter__input', function () {
        onInput(this);
    });
    
    $(document).on('filterext_loaded', function () {
        if (!restoreSelection) {
            return;
        }
        
        let $input = $('.filterext-filter__input').first();
        restoreSelection($input.get(0));
    });
});

3) В category/filters.html найти 

<form class="filter__form" method="get" action="{$resetLink}">

и заменить на 

<form class="filter__form" method="get" action="{$resetLink}" id="products-filters-form">

4) В category/sorting.html найти 

<div class="sorting__right">

и заменить на 

<div class="filterext-filter">
    <span>Поиск по названию или артикулу:</span>
    <input class="filterext-filter__input" type="text" name="name_or_sku_code" value="{shopFilterextViewHelper::getLastGetParameter('name_or_sku_code')|escape}" form="products-filters-form">
    {if waRequest::isXMLHttpRequest()}
       <script>$(document).trigger('filterext_loaded');</script>
   {/if}
</div>
<div class="sorting__right">

После этого элемента. 

Инструкция была полезна?
76% считают ответ полезным
Спасибо за обратную связь!
Чтобы добавить комментарий, войдите в личный кабинет
Как правильно обращаться в техподдержку?
Не работает решение, что делать?
Не применяются настройки плагина, почему?
Куда пропали лицензии?
Как интегрировать плагин в мою тему дизайна
Купил плагин, как активировать лицензию?
Как можно получить скидку?
Есть ли тестовый период за продукт
Слетела лицензия что делать?
Не могу настроить CRON, что делать?
Написать в техподдержку
В техническую поддержку входит:
  • Консультации по вопросам приобретения
  • Консультации по функционалу и возможностям
  • Выявление и решение проблем в работе функционала
В техническую поддержку не входит:
  • Настройка решения
  • Доработка под запросы клиента
  • Устранение багов в консультационной форме (без предоставления доступов к сайту)
Платная диагностика:
  • Диагностика сложных и неоднозначных проблем
  • Выявление конфликтов со сторонними решениями
  • Выявление конфликтов в вашей среде сервера
  • Приоритетный срок на обработку тикетов
  • Оплата только банковской картой
Подробнее (SLA)
Вход в личный кабинет Написать в техподдержку Отправить заявку База знаний