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

[griff]

Нужна помощь с таким вопросом..

Хочу сделать так, чтоб на компьютере в категориях фильтр отображался в левой колонке, а в мобильной верстке(на телефонах, планшетах) в верхней части страницы. И чтоб отображался в виде "кнопки" (открывался при нажатии).

Может кто-то сможет помочь с этим вопросом или хотя бы толкнуть в нужном направлении?

Использую модуль FilterPro

ocStore 1.5.5.1.2

Шаблон Moneymaker

[deim]

Для начала адресуйте вопрос автору шаблона

[mazein]

Всё просто.

На страницу категорий выводится два модуля filter_pro, один в левую колонку, другой вверх страницы.

Далее, с помощью css настраивается вывод фильтра на странице только для телефонов/планшетов. Ну и кнопку тоже легко сделать.

 

PS: Хотя нет, проверил, два фильтра на одной странице не работают.

Змінено 24 грудня 2015 користувачем mazein

[mazein]

Ещё подумал, у меня 2 варианта:

1. Использовать под filter_pro правую колонку, если она свободна, перепозиционировать её влево (если надо) на больших разрешениях, и вверх страницы при маленьких.

2. Выполнить перенос блока с фильтром при изменении ширины экрана через javascript.

[griff]

Вот-вот)

Перебрал уже все что можно с медиа-запросами.

И все равно два фильтра не сработались.

С javascript все вроде логично, но есть одно но... Я в этом абсолютно ничего не понимаю))

Вообще спасибо. Возможно в этом я и найду решение.

Змінено 24 грудня 2015 користувачем afwollis

[dooreemar]

Люди добрые, если кто-нибудь найдёт решение как на мобайле выводить фильтрпро при включённой адаптивности в манимэйкере, отпишитесь пожалуйста! Желательно в левой колонке, но хотя бы где-нибудь.

[griff]

Присоединяюсь)

А то жуть выходит какая то..

Покупаешь фильтр в надежде что все будет в шоколаде, а вывести туда его никак нельзя.

Создатель вообще с этим помогать не хочет, прям разочарование какое то..

Кстати, Можете попробовать mega filter pro - совсем другой модуль от другого создателя.

Там при просмотре с моб. устройств есть фиксированная кнопка и фильтр выезжает сбоку.

Но нет поддержки тачскрина в слайдером цены.

[dooreemar]

Спасибо огромное, а есть ещё какие-то подводные камни в связке мега фильтр про и манимэйкера? В нём нет SEO как я понимаю? И вы если сами пользовались скажите пожалуйста мега фильтр про подхватывает стандартные фильтры и если да, то там есть возможность сделать слайдер из них? А то в фильтрпро этого не хватает...

[griff]

В монеймэйкере прилагается адаптация с МегаФильтрПро, все работает хорошо.

Фильтры подхватывает. Точнее вы сами выбираете какой включать/выключать и тд.

А по поводу seo и слайдера не понял ещё. Совсем недолго пользуюсь.

Как разберусь, напишу)

Поставил его только из-за мобильной версии, так как выбора не было. Вот бы эти два фильтра совместить..я был бы в восторге)

[mazein]

В чём проблема сделать вывод фильтра при низком разрешении по кнопке?

Как я понял, вопрос переноса блока с фильтром из левой колоки в верхнюю часть страницы уже не стоит?

Вот, к примеру, так я сделал вывод этого фильтра всего лишь на css.

 

Выезжает вся левая колонка, вместе с фильтром.

Змінено 11 січня 2016 користувачем mazein

[griff]

В чём проблема сделать вывод фильтра при низком разрешении по кнопке?

Как я понял, вопрос переноса блока с фильтром из левой колоки в верхнюю часть страницы уже не стоит?

Вот, к примеру, так я сделал вывод этого фильтра всего лишь на css.

3343.jpg

Выезжает вся левая колонка, вместе с фильтром.

Вопрос ещё стоит)

Я пробовал через медиа запросы, видимо не то пробовал..

Если подскажете как это сделать, буду очень благодарен.

[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 будет видна, украшаем по вкусу, и всё готово.

[griff]

На счёт только 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 будет видна, украшаем по вкусу, и всё готово.

 

В какой файл нужно скрипт пихать?

С js еще не приходилось общаться

[griff]

И еще..

Что мне нужно указать, чтоб левая колонка отображалась при просмотре с мобильного?

Что бы я не делал, её не видно все равно..

 

Спасибо за совет. Надеюсь что то получится.

[mazein]

Что мне нужно указать, чтоб левая колонка отображалась при просмотре с мобильного?

В стилях при какой-то ширине экрана левая колонка скрывается, как-то так:

display:none;

Соответственно, надо это убрать, и сделать:

position: absolute;

 

В какой файл нужно скрипт пихать?

В footer.tpl запихай.

[griff]

В стилях при какой-то ширине экрана левая колонка скрывается, как-то так:

display:none;

Соответственно, надо это убрать, и сделать:

position: absolute;

 

В footer.tpl запихай.

 

В общем, долго пробую уже, но ничего не выходит.

При нужной ширине убираю display: none; ничего не меняется.

Наверное прелести шаблона какие то..

[mazein]

Нет никаких прелестей шаблона, есть css, и, возможно, javascript, в любом случае ничего сверхъестественного там нет.

[griff]

Нет никаких прелестей шаблона, есть css, и, возможно, javascript, в любом случае ничего сверхъестественного там нет.

В любом случае спасибо. Буду вникать)

[pimur]

Можно подробнее пример?  Тема очень актуальна.

[HyperLabTeam]

я сверстаю его под мобилку если фрилансер свободное время найдёт обсудить некоторые детали

[pimur]

я сверстаю его под мобилку если фрилансер свободное время найдёт обсудить некоторые детали

Нашел решение, если интересно могу написать в лс.

причем делов на 10 мин.

Змінено 18 липня 2016 користувачем pimur

[HyperLabTeam]

Нашел решение, если интересно могу написать в лс.

причем делов на 10 мин.

жду)

[pimur]

жду)

Написал

[wwizard]

можно мне тоже, очень нужно, спвсибо.

 

Тут обсуждалось, но решение так и не вынесли для всех: https://opencartforum.com/topic/54917-%D1%84%D0%B8%D0%BB%D1%8C%D1%82%D1%80-%D0%B2-%D0%BC%D0%BE%D0%B1%D0%B8%D0%BB%D1%8C%D0%BD%D0%BE%D0%B9-%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%BA%D0%B5/page-2

 

Очень надо плиз. У меня с фильтром - 3 сайта.

Змінено 21 листопада 2016 користувачем wwizard

[Skunk]

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

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

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