Верстка фильтра товаров FilterVier на OpenCart 3

Здравствуйте!

Необходимо выполнить верстку фильтра товаров FilterVier на OpenCart 3 для декстопа и мобильной версии. Сайт адаптивный.

Сайт использует тему ReMarket:

https://re-market.octemplates.net/apple-ru-3/iphone-ru

Ссылку на сайт могу скинуть в личном сообщении.

Сайт закрыт от поисковых систем, на период переноса данных и технических работ, чтобы поисковые роботы его не индексировали. Для работ я готов открывать доступ по IP адресу. Обычно IP адрес динамический, может меняться раз в сутки. Это не проблема, открываю доступ при смене.

Ссылка на Figma (показаны вид фильтра на декстопе и мобильной версии). Отображены варианты, с примененным фильтром и без:

https://www.figma.com/file/jXOLGoLJ6IJxBoar6YBmLS/Untitled?node-id=0%3A1

На сайте установлен фильтр товаров FilterVier (https://opencartforum.com/files/file/5025-filtr-tovarov-filtervier_seo-dlya-opencart-2x-3x/)

А также дополнения AO Tooltips (https://opencartforum.com/files/file/2750-ao-tooltips-podskazki-dlya-opciy-i-atributov/)
Выводят подсказки к группам фильтров:

А также Attribute Text Select (https://opencartforum.com/files/file/7568-attribute-text-select/)

Организовывает характеристики для фильтра и позволяет загружать для опций фильтра изображения:

Необходимый функционал:

1. На декстопе нам необходимо внешний вид вывести вот так:

1.1 Слайдер, как видим, работает без кнопки ОК, при перемещении ползунка сам применяет.

1.2 Если значений у группы более 6-ти, то выводим первые 6 значений, а остальные выводим при клике на ссылку Показать все. Если нажали на ссылку Показать все, то список разворачивается а ссылка меняется на Свернуть.

Важно чтобы при отключенных скриптах отображался весь список значений раскрытым и подгружались все значения.

1.3 У блока с группой характеристик есть стелка-переключатель (находится справа), которая позволяет вообще свернуть блок со значениями. При повторном клике, она разворачивает блок со значениями.

1.4 При применении фильтров, выбранные значения показываются в фильтре в виде залитых чек-боксов или переключателей (смотря, какой вид отображения задан в настройках фильтра). А все выбранные фильтры отображаются вверху над списком товаров, а также присутствует ссылка Очистить все (позволяет отменить все выбранные фильтры)

2. На мобильной версии сайта отображение фильтра будет вот таким:

2.1 Присутствует крестик, при нажатии на который фильтр можно закрыть. Также фильтр можно закрыть обычным кликом на другой части экрана (где нет фильтра, в данном случае на любом сером месте)

2.2 Все выбранные фильтры отображаются вверху, а также присутствует кнопка Очистить все (позволяет отменить все выбранные фильтры)

2.3 При выборе допустим 1 варианта в фильтре появляется внизу кнопка Показать и отображается количество подобранных вариантов.

ВАЖНО! Если технически реализовать работу такой кнопки на этом фильтре невозможно, то мы не отображаем кнопку Показать и количество найденных вариантов, а просто применяем фильтр при выборе того или иного параметра.

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

2.5 В каталоге товаров, когда фильтр свернут его отображение будет таким:

2.6 При прокрутке страницы фильтр перемещается и остается закрепленным к верху страницы: