Фильтр в мобильной верстке

[OLTIS]

 

В верхней части центрального блока добавляем пустой контейнер для мобильного фильтра. Назовем его .mob-filter

Если ширина экрана меньше 500 - перекидываем содержимое левой колонки в контейнер для фильтра, а саму колонку удаляем, чтобы не дублировать id элементов.

if (screen.width <= '500') {
   $(".mob-filter").html($(".column-left").html());
   $('.column-left').remove();
}

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

[B080BB]

апну тему, как добавить фильтр в мобильную версию сайта, с отдельной кнопки, может есть люди добрые, кто может разжевать по полкам, как это реализовать?

[deim]

какой именно фильтр?

[jaffagold]

Народ, есть такой фильтр OCFilter, Он работает в мобильной версии "из коробки".

Просто под полоской откуда выпадает Меню, находится еще одна полоска, откуда выпадают настройки Фильтра.

Там только текст( заголовок) надо немного подправить, сменить на Фильтр товаров или какой захотите. 

[B080BB]

У меня Brainy Filter Ultimate 4.6.1 стоит, вывод в мобильной версии должен осуществляться с отдельной кнопки

Змінено 20 лютого 2017 користувачем B080BB

[VpsK]

Здравствуйте! Подскажите если не трудно, возможно ли стандартный фильтр запустить на мобильном телефоне? Я читал ветку, но к сожалению не настолько программист, может кто нибудь по шагам объяснит как добиться работы фильтра на телефоне. А если все таки нельзя, подскажите неплохой модуль. На модуль - мега фильтр пока не ма, потом возможно ) 

[Shureg]

А что может помешать? Собственно фильтр работает на стороне сервера, клиенту приходит только результат.

Если в шаблоне фильтр не скрыт, то в мобильной версии будет работать точно так же, как в десктопной.

[jaffagold]

Фильтр пропадает, потому что на мобильных скрывается левая колонка.

Самое простое- разместите фильтр В Схемах не в боковой панели, а в позиции Content-top

Можно еще сделать так, чтобы левая колонка не исчезала на мобильных

Но тогда и другие модули из левой боковой колонки будут в самом верху страницы. Это не слишком хорошо

 

[Shureg]

5 минут назад, jaffagold сказал:

Фильтр пропадает, потому что на мобильных скрывается левая колонка.

Это вопрос не фильтра, а шаблона. Дефолтный(как и большинство других) скрывает левую колонку. Но это совсем не обязательно.

[pimur]

Может поможет)

[AlexandrSY]

Добрый день!
Парни, подскажите пожалуйста. 
В мобильной версии вот эти две строки меняются местами http://prntscr.com/icj4om
Иными словами - $column_left в мобильной версии уходит вниз, а нужно чтобы был вверху. В коде $column_left прописан сразу после breadcrumb , но по факту отображается внизу. Предполагаю что это скрипт скирпт его опускает, но не могу найти где и какой. 
Это на всех страницах - главная, категория, товар.
Если кто знает ответ, поделитесь. 
Cайт vago.ua
Заранее спасибо!

 

Змінено 9 лютого 2018 користувачем AlexandrSY

[Mariya812]

Если в стилях css прописать:    display: block;

Цитата

@media (max-width: 480px){
.hidden-xs {
    display: block;
}
}

то фильтр будет наверху. Всегда. Функции никакие не нужны.
У меня тоже вопрос, я никак не могу сообразить как прописать функцию для кнопки. Я сделала две кнопки, одна работает по путям, появляется таблица размеров, а вот вторую хочу под фильтр использовать, пробовала путями, но совсем запуталась (в именах опен карта), не получается.
Подскажите кто-нибудь как прописать, что бы при клике на кнопку/текст появлялся фильтр и что бы можно было его также кнопкой скрыть. По сути это как выпадающее меню должно работать или можно скроллом, вообще всё равно))) Сейчас попробую 10 вариант (у меня в именах каша и бардак) если получится – отпишусь.
 

[Mariya812]

В 11.01.2016 в 20:38, mazein сказал:

На счёт только css я погорячился, нужен небольшой скриптик:

<script type="text/javascript">
$(".column_left_button").click(function(){
   $("#column_left").toggleClass("column_left-vis");
});
</script>

В данном случае при нажатии на класс column_left_button, блоку column_left добавляется стиль column_left-vis

 

Так вот, при какой-то ширине экрана column_left делаем абсолютное позиционирование, и сдвигаем влево за пределы экрана. Делаем кнопку column_left_button, ну и пишем стиль column_left-vis, при котором column_left будет видна, украшаем по вкусу, и всё готово.

Благодарю Вас!!! Отличное решение. Всё получилось!!!