Jump to content
griff

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

Recommended Posts

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

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

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

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

ocStore 1.5.5.1.2

Шаблон Moneymaker

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Всё просто.

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

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

 

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

Edited by mazein

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

Вот-вот)

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

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

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

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

Edited by afwollis

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

 

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

Edited by mazein

Share this post


Link to post
Share on other sites

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

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

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

3343.jpg

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

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

И еще..

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

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

 

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

Share this post


Link to post
Share on other sites

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

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

display:none;

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

position: absolute;

 

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

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

Share this post


Link to post
Share on other sites

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

display:none;

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

position: absolute;

 

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

 

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

Edited by pimur

Share this post


Link to post
Share on other sites

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

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

жду)

Share this post


Link to post
Share on other sites

жду)

Написал

Share this post


Link to post
Share on other sites

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

 

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

Edited by wwizard

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.