Перейти к содержанию
griff

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

Рекомендуемые сообщения

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

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

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

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

ocStore 1.5.5.1.2

Шаблон Moneymaker

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Всё просто.

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

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

 

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

Изменено пользователем mazein

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Вот-вот)

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

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

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

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

Изменено пользователем afwollis

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

post-689859-0-38118900-1452513547_thumb.jpg

 

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

Изменено пользователем mazein

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

3343.jpg

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

На счёт только 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 еще не приходилось общаться

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

И еще..

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

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

display:none;

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

position: absolute;

 

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

display:none;

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

position: absolute;

 

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

 

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

Изменено пользователем pimur

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

жду)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

жду)

Написал

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

Тут обсуждалось, но решение так и не вынесли для всех: 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 сайта.

Изменено пользователем wwizard

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.