Каталог мобильной версии


Добрый день! Прочитал статью как сделать раскрытым каталог товаров в мобильной версии. Неплохое решение, которое делаем мобильный вариант более понятным. Но есть проблема. Каталог  раскрывается нормально, а когда выбираешь категорию и кликаешь, открываются товары в этой категории, которые через секунду перекрываются вновь раскрывающимся каталогом.

Можно ли решить вопрос? Оптимальным может быть такое решение:
каталог раскрывается только при заходе на сайт. В дальнейшем при серфинге по сайту каталог "прилипает" к верхней части экрана и раскрывается только кликом по нему.
Это сделает мобильный вариант более удобным для покупателя. 50% заходов на сайт со смартфонов.

9 ответов
  • Владимир Сергеев
    Разработчик
    Решение
    6 июля 2018 20:38

    Здравствуйте, Юрий! 

    Иными словами вы хотите, чтобы фича, с раскрытым каталогом работала только на определённых страницах?
    На каких страницах она должна работать, а на каких нет? 

  • Юрий
    Решение
    6 июля 2018 20:54

    Владимир, здравствуйте!
    Лучше, если раскрытый каталог будет на главной. На остальных страницах закрытый каталог вверху экрана и перемещающийся при прокрутке, т.е закрытый каталог залипает вверху экрана. В таком варианте мобильная версия будет совсем неплоха :)

    • Владимир Сергеев
      Разработчик
      Решение
      6 июля 2018 23:29

      По поводу раскрытия только на главной, написал комментарий в той теме, где вы про раскрытие прочитали.

      По поводу прилипания меню. 
      1. Нужно включить прилипание панели в настройках темы.
      2. Затем открыть тему для приложения Сайт - шаблоны - файл index.scripts.html.

      В этом файле найдите код: 

      function stickTopNavInit() {
          if ($(window).width() < 768 ) {
              $(".top-navbar-2").unstick();
              $('.header').css('height', 'auto').css('z-index', '220');
          } else {
              if (!is_touch()) {
                  $(".top-navbar-2").sticky({
                      wrapperClassName: 'top-navbar-2-holder',
                  });
                  {* z-index, чтобы перебить новогодние украшения *}
                  {* до инициализации z-index задаётся в файле index.html:162 *}
                  $('.top-navbar-2').on('sticky-start', function() {
      				$('.header').css('z-index', '330');
      			});
      			$('.top-navbar-2').on('sticky-end', function() {
      				$('.header').css('z-index', '220');
      			});
              }{*/is_touch*} else {
                  $('.header').css('height', 'auto').css('z-index', '220');
              }
          }
      };
      stickTopNavInit();
      $(window).resize(stickTopNavInit);

      И замените его на этот:

      function stickTopNavInit() {
          $(".top-navbar-2").sticky({
              wrapperClassName: 'top-navbar-2-holder',
          });
          {* z-index, чтобы перебить новогодние украшения *}
          {* до инициализации z-index задаётся в файле index.html:162 *}
          $('.top-navbar-2').on('sticky-start', function() {
      		$('.header').css('z-index', '330');
      	});
      	$('.top-navbar-2').on('sticky-end', function() {
      		$('.header').css('z-index', '220');
      	});
      };
      stickTopNavInit();
      $(window).resize(stickTopNavInit);

      3. В блок prostore.user_css добавьте код: 

      @media screen and (max-width: 767px) {
          .is-sticky .top-navbar-2 .top-nav.visible-xs {
      	box-shadow: 0 0 10px rgba(0,0,0,.3);
      	z-index: 1;
          }
          .is-sticky .top-navbar-2 .top-nav {
      	max-height: 75vh;
      	overflow-y: auto;
          }
      }

  • Юрий
    Решение
    7 июля 2018 14:50

    Владимир, не могу найти в шаблонах файл index.scripts.html. Только index.html
    Может не там ищу: Витрина- шаблоны

  • Юрий
    Решение
    7 июля 2018 15:13

    Вроде все сделал. Теперь каталог автоматически открывается только на главной.

    А вот прилипания меню не происходит.
    Может код в prostore.user_css неправильно вписал. Сейчас это выглядит так:

    .list_thumb_static.fixed_height .product_title {
         height: 44px;
    }
    .is-sticky .top-navbar-2 {
          max-height: 75vh;
          overflow-y: auto;
    }

  • Юрий
    Решение
    10 июля 2018 09:49

    Владимир, спасибо большое! Все работает! Супер!!!

  • Юрий
    Решение
    28 мая 2019 09:14

    Владимир, здравствуйте!

    По отзывам покупателей, как оказалось, раскрывающийся на первой странице мобильной версии каталог больше мешает, чем помогает. Как сделать только принудительное раскрытие каталога по клику?

    • Владимир Сергеев
      Разработчик
      Решение
      28 мая 2019 17:05

      На сколько я понимаю, «принудительное раскрытие по клику» - это изначальное поведение темы. В таком случае отмените все изменения, описанные в топике, в обратном порядке.

  • Юрий
    Решение
    28 мая 2019 17:40

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

  • Юрий
    Решение
    30 мая 2019 11:48

    Владимир, все сделал в обратном порядке, как Вы сказали. Теперь каталог раскрывается принудительно. Вот только прилипния нет. Как вернуть прилипание? Нужная галочка стоит.

  • Юрий
    Решение
    30 мая 2019 11:59

    Вроде разобрался

Добавить ответ
Чтобы добавить комментарий, зарегистрируйтесь или войдите
Мы получаем и обрабатываем персональные данные посетителей нашего сайта в соответствии с официальной политикой.
Если Вы продолжите использовать сайт, мы будем считать, что Вас это устраивает.
Подписывайтесь и получайте скидки!

Узнавайте первым о скидках и специальных предложениях!