Хлебные крошки для мобильной версии сайта

Цепочка навигации, или «хлебные крошки» — это один из важных элементов юзабилити сайта. К сожалению, при многоуровневой структуре каталога на мобильных устройствах такая цепочка выглядит, мягко говоря, «не очень». Не стоит пренебрегать этим, поскольку, на момент написания данной статьи, принцип «mobile first» стал уже совершенно очевиден. Ниже рассматривается один из возможных вариантов решения проблемы длинной навигационной цепочки на «мобильной версии» сайта. 

Как было сказано выше, иногда навигационная цепочка бывает достаточно длинной. В самом деле, это «бич» любого мало-мальски крупного магазина. Навигационная цепочка может быть, например, такой (и это еще не самый «страшный» вариант):

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

В данной статье решение рассматривается на примере компонента хлебных крошек в битриксе, но, в целом, оно универсально и, при небольшой модификации, может быть применено к другим CMS.

Шаг 1. Внесение изменений в шаблон компонента

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

<div id="mobButtonBreadCrab">...</div>

Также следует добавить дополнительный класс к навигационной цепочке, которую нужно убрать «под кат». В битриксе это логический блок внутри if($arResult[$index][«LINK»] <> «» && $index != $itemSize-1). Т.е. внутри данного ИФа, будет контейнер с дополнительным классом, например:

<div class="bx-breadcrumb-item mobHideBreadCrab" id="bx_breadcrumb_'.$index.'"

Т.е. добавился класс .mobHideBreadCrab.

Шаг 2. JS-код

Далее самый важный шаг, нужно добавить JS-код (Jquery), который будет раскрывать/сворачивать навигационную цепочку. По сути своей, это всего-лишь кнопка показать/скрыть элемент. Скрипт можно разместить прямо в файле шаблона, например добавить его к php-переменной:

$strReturn .= "<script>
$(function() {
  $('#mobButtonBreadCrab').click(function() {
    
    if ($(this).text() === '...')
      $(this).text('x')
    else
      $(this).text('...')
      
      
      $('.mobHideBreadCrab').fadeToggle(200);
  });
});

</script>";

Т.е. наша кнопка при клике меняет свой внешний вид с троеточия на крестик и наоборот, раскрывая и скрывая, при этом, навигационную цепочку каталога.

Шаг 3. CSS

В стилях следует сделать несколько вещей:

  1. Спрятать кнопку на десктопных устройствах
  2. Спрятать цепочку навигации на мобильных устройствах
  3. Задать какие-то стили для самой кнопки. В данном случае, она сделана синей.
#mobButtonBreadCrab {display: none;}

@media (max-width: 768px){
#mobButtonBreadCrab {
    display: inline; 
    float: left;
    color: #f8fafc;
    margin-right: 5px;
    line-height: 10px;
    padding: 3px 10px;
    background: #1485ce;
    font-size: 16px;
    font-weight: 600;
    border: #f8fafc 1px solid;}
 .mobHideBreadCrab{display:none;}
}

В результате получится что-то подобное:

и

В целом всё, при интеграции данного решения, особенно на битрикс, не должно возникнуть каких-либо сложностей. Конечно, должен быть подключен Jquery на сайте, т.к. код не на чистом JS написан, но это, наверное, очевидно.