0 Пользователей и 1 Гость просматривают эту тему.
  • 5 Ответов
  • 549 Просмотров
*

mag_num83

  • Осваиваюсь на форуме
  • 40
  • 0 / 0
Коллеги, всем добра!
Направьте неопытного : сайт конвертируется в мобильный с помощью @media (ширина экрана)
Добавил в JoomShopping модули фильтров в каждой категории - экземпляры этого модуля в левой колонке . В мобильной версии при разрешении менее 767px вся левая колонка и ,соответственно,  эти модули фильтров становятся display:none. Но теперь встала необходимость отображать эти модули фильтров не отображая левую колонку. 
Хочется реализовать по красоте: выводить кнопку- иконку  "фильтр" сверху списка товаров. нажатие на эту кнопку-иконку должно открывать (разворачивать поверх) этот фильтр . Как пример (не реклама) как на мобильной версии авито.ru  или сайт dns.ru да и множество других.

Модулей много (20 категорий - 20 фильтров) , но тип у них один id="jshop_unijax_filter" name="jshop_unijax_filter". Наверное надо как-нибудь привязать проверку отображения именно к этому "name".  Как фильтр будет раскрываться не имеет особого значения, выезжать сбоку или поверх появляться, главное чтоб при выборе опций в фильтре, нажимая кнопку применить , окно фильтра сворачивалось . и желательно чтоб подсвечивалось как то, указывая что есть выбранные опции ..

помогите пожалуйста реализовать.
« Последнее редактирование: 12.05.2023, 11:01:18 от mag_num83 »
*

mag_num83

  • Осваиваюсь на форуме
  • 40
  • 0 / 0
никто не подскажет?
*

Театрал

  • Захожу иногда
  • 231
  • 7 / 0
Вопрос очень общий, поэтому точно подсказать сложно...

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

Всё разные подходы:
  • можно использовать @media CSS и делать, в зависимости от ширины, блок с фильтрами слева или сверху от контента.
  • можно примерно по той же схеме использовать JS и ширину...
  • определять какое устройство используя PHP, у Joomla есть класс JApplicationWebClient(), который по моему нормально определяет мобильники. Поищите.

Далее как будет вылетать или выезжать блок с фильтрами? На чём у вас верстка строится (CSS-JS фреймворк), вряд ли самописанный, вероятно Bootstrap, UIKit или что-то подобное... Смотрите документацию по ним.

"Подсвечивать" когда фильтр сработал... Я фильтры JoomShopping не часто вижу, но по моему там должны использоваться GET-параметры в URL, попробуйте отталкиваться от них.

Ну как-то так, будут точнее вопросы, станут точнее ответы!  ;)
*

mag_num83

  • Осваиваюсь на форуме
  • 40
  • 0 / 0
Далее как будет вылетать или выезжать блок с фильтрами?
без разницы, как проще в реализации.
Joomla 3/6  c Bootstrap
*

mag_num83

  • Осваиваюсь на форуме
  • 40
  • 0 / 0
конкретизирую вопрос: " как свернуть модуль фильтра в кнопку (допустим чтоб по нажатию  он всплывал или выезжал )  при  @медиа max760  с помощью CSS? не создавая еще дубли модулей.
 
*

Театрал

  • Захожу иногда
  • 231
  • 7 / 0
Через CSS наверное не очень.

Попробуйте определить устройство, Joomla даёт нам для этого средства:
Код

<?php $client    = new JApplicationWebClient(); ?>

<?php if ($client->mobile) : // если определился как мобильный, выводим где-то сверху ?>
    <!-- кнопка вызывающая Offcanvas Bootstrap -->
     <!-- Обёртка Offcanvas открывается -->
        <jdoc:include type="modules" name="filter" />
    <!-- Обёртка Offcanvas закрывается -->
<?php endif; ?>

<?php if (!$client->mobile) : // если определился как НЕ мобильный, выводим слева ?>
    <jdoc:include type="modules" name="filter" />
<?php endif; ?>


У ДНС по этому же принципу работает.
« Последнее редактирование: 17.05.2023, 09:41:27 от Театрал »
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться