1С Битрикс: убираем из кода скрытые подпункты в меню

1С Битрикс - интересная CMS, с множеством ньюансов и "подводных камней". Не так давно в команду, где я работаю, пригласили seo-специалиста и он сказал, что у нас на сайте огромное количество внутренних ссылок. Около 350 на каждой странице. И это снижает вес других ссылок, которые он планировал использовать для перелинковки внутри нашего сайта. Я не сео-специалист, а веб-разработчик, поэтому, есть задача - надо выполнять! Много ссылок я нашёл в блоке с каруселью логотипов партнёров. Удалил их очень быстро, присвоил картинкам атрибут data-src, в который записал реальный url, и после построения разметки оборачивал с помощью javascript картинки ссылками. Так решил проблему с первой сотней ссылок. Основная же масса ссылок генерировалась в левом меню сайта, отображаемого стандартным компонентом темы bitrix/templates/.default/components/bitrix/menu/services_left_menu/template.php. Причём, у компании, где я работаю, количество услуг более 150. Каждая услуга разделана на категорию. В итоге, структура левого меню в сайдбаре получается такая:

<ul>
  <li class="active"> - пункт меню активной в настоящий момент категории
    <ul>
      <li></li> - подпункт активной категории, виден в настоящий момент
      <li></li> - такой же подпункт
      .........
    </ul>
  </li>
  <li> - пункт меню неактивной в настоящий момент категории, виден всегда
    <ul>
      <li></li> - скрытый стилями подпункт неактивной в настоящий момент категории. Он не виден, но в коде присутствует!
      <li></li> - такой же скрытый стилями, но присутствующий подпункт. И таких подпунктов очень и очень много!
      .........
    </ul>
  </li>
  .....
  .....
</ul>

На выходе получается огромная структура меню, в которой реально показываются как все активные пункты меню + подпункты активной категории, а неактивные подпункты скрываются стилями, но продолжают при этом присутствовать в коде.

Я переписал компонент вывода меню, ниже привожу код.

Вы можете использовать его у себя на сайте на своё усмотрение.

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

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

Итак, как выводить в код только нужные подпункты меню

<? 

$innerMenu = []; // создаём массив, в который будем помещать подпункты активной категории

for($i=0; $i<count($arResult); $i++) {
  if($arResult[$i]['SELECTED']) {
    if($arResult[$i]['DEPTH_LEVEL']==1 && ($arResult[$i]['IS_PARENT'] || $arResult[$i+1]['DEPTH_LEVEL']==1)) {
      $number = $i; $numberParent = $i;
    }
    elseif($arResult[$i]['DEPTH_LEVEL']!=1) {
      $number = $i; 
      for($j=$number-1; $j>=0; $j--) {
        if($arResult[$j]['IS_PARENT'] && $arResult[$j]['DEPTH_LEVEL']==1) {
          $numberParent = $j; break;
        }
      }
    }
    for($k=$numberParent+1; $k<count($arResult); $k++) {
      if($arResult[$k]['DEPTH_LEVEL']==1) {
        $numberNextParent = $k; break;
      }
    }
  }
}
for($l=$numberParent+1; $l<$numberNextParent; $l++) { // находясь в интервале между текущим родительским элементом и следующим родительским элементом
  $innerMenuText = $arResult[$l]['TEXT']; // записываем в переменную текст ссылки
  $innerMenuLink = $arResult[$l]['LINK']; // записываем в переменную путь ссылки
  $innerMenuResult = "<li class='sm'><a href='{$innerMenuLink}'>{$innerMenuText}</a></li>"; // формируем строку вывода
  array_push($innerMenu, $innerMenuResult); // заполняем массив готовыми подпунктами меню
}
?>

<ul class="uslugi_inner">
  <?foreach($arResult as $arItem):?>
    <?if($arItem['DEPTH_LEVEL']==1):?>
      <li <?if($arItem['SELECTED'])echo"class='active'"?>><a href='<?=$arItem['LINK']?>'><?=$arItem['TEXT']?></a></li>
    <?endif?>
    <?if($arItem['SELECTED'] && $arItem['IS_PARENT']):?>
      <? // когда мы внутри выбранного пункта меню нашей категории, вставляем туда массив со списком ссылок подпунктов и преобразуем этот массив в строку ?>
      <ul class="submenu"><?=implode('', $innerMenu)?></ul>
    <?endif?>
  <?endforeach?>
</ul>

<script>
  // и напоследок, скрипт, который будет выделять активный подпункт меню
  // вставлять его предлагаю именно здесь, а не в отдельный файл со скриптами,
  // поскольку именно в этом случае глазу не будет видно изменение стиля данного элемента
  let leftMenuLinks = document.querySelectorAll('ul.uslugi_inner .submenu a');
  leftMenuLinks.forEach(function(item) {
    let leftMenuLink = item.getAttribute('href');
    if(leftMenuLink == window.location.pathname) {
      item.style.fontWeight = 'bold';
    }
  })
</script>

?>