Небольшой пример как можно сделать автоматически содержание описания со скролом при клике на заголовок

Была одна интересная доработка недавно. Надо было создать автоматическое содержание статьи на основании его h1-h6 заголовков.

Зачем это нужно и как выглядит

Это нужно что бы в определенном блоке вывести все заголовки описания и при клике на любой зоголовок идет пролистывание к нему в описании.

Также при скролле справа надо было сделать плавающий блок с заголовками что бы читая описание можно было переходить по нему с помощью удобного меню.

Как было сделано

Так как описаний в магазине 80 000 было принято решение сделать все автоматически. Для этого надо обработать описание товара. А где это сделать как не в контроллере. Но для 'считывания' описания нам поможет библиотека phpQuery. 

phpQuery - это как jQuery только в php. Позволяет забирать какие-то данные по селекторам, как в js

Для подключения библиотеки для начала скачиваем ее и открываем файл catalog/controller/product/product.php и после

require_once(DIR_SYSTEM . 'library/phpQuery-onefile.php');

После можем в любом удобном месте функции index вставить код который 'выдергивает' все заголовки из описания и создает блок с заголовками

$description = $data['description'];
$tags = array();
$doc = phpQuery::newDocumentHTML($description);
phpQuery::selectDocument($doc);
foreach(pq(':header') as $index_h => $h){
 $tags[] = html_entity_decode("<a class='mh-" . $h->nodeName . "' data-name='hname-" . $index_h . "' href='". $this->url->link('product/product', $url . '&product_id=' . $product_id) . "#hname-" . $index_h . "'>" . $h->nodeValue . "</a>",ENT_QUOTES,'UTF-8');
 $data['description'] = str_replace($h->nodeValue . "</" . $h->nodeName. ">", '<a name="hname-' . $index_h . '"></a>' . $h->nodeValue. "</" . $h->nodeName. ">", $data['description']);
}
$data['description_tags'] = $tags;

Далее нам надо в любом удобном месте вывести это в шаблоне товара

<?php foreach($description_tags as $desc_tag){ ?>
  <li>
    <?php echo $desc_tag; ?>
  </li>
<?php } ?>

И конечно же добавим стилей и скриптов что бы все это украсить и оживить

Стили

.show-description-nav{padding: 10px 10px 7px 10px;background: #fff;border: 1px solid #ddd;box-shadow: 0 0 10px #999;}
.fixed_menu_right{display:none;position: fixed;z-index:9999999;left:50%;top:30%;margin-left:360px;}
.fixed_menu_right:hover .description-navigation-scrolling{display:block;}
.show-description-nav .fa{font-size:25px;}
.description-navigation-scrolling{position: absolute;display: none;background:#fff;width:410px;top:-20px;left:-60px;border: 1px solid #ddd;box-shadow: 0 0 10px #999;padding:10px 10px 10px 5px;}
.description-navigation ul{padding-left:0;}
.description-navigation li{list-style-type: none;margin-bottom:5px;}
.description-navigation li a{font-size:13px;text-decoration:none;border-bottom:1px dashed #333;}
.description-navigation li a:hover{border-bottom:1px dashed #fff;}
.mh-h1{margin-left:0px;font-size:20px!important;margin-bottom:20px;}
.mh-h2{margin-left:10px;font-size:16px!important;margin-bottom:10px;}
.mh-h3{margin-left:20px;font-size:14px!important;}
.mh-h4{margin-left:30px;font-size:13px!important;}
.mh-h5{margin-left:40px;font-size:12px!important;}
.mh-h6{margin-left:50px;font-size:11px!important;}

Скрипты

$(document).ready(function(){
  $(".description-navigation a, .description-navigation-scrolling a").click(function(e) {
   e.preventDefault();
   scrollTo = $(this).data("name");
    $([document.documentElement, document.body]).animate({
      scrollTop: $("a[name = '" + scrollTo + "']").offset().top
   }, 700);
  });
 $(document).scroll(function(){
    if($(window).scrollTop() < 500  && $(window).width() > 768){
     $('.fixed_menu_right').fadeOut(200);
    }else{
      $('.fixed_menu_right').fadeIn(200);
   }
 });
});

И чуть не забыл еще если хотите вывести плавающий фикс блок с заголовками то сделать это можно например так

<div class="fixed_menu_right">
  <button class="show-description-nav"><i class="fa fa-bars" aria-hidden="true"></i></button>
  <div class="description-navigation-scrolling">
    <ul>
      <?php foreach($description_tags as $desc_tag){ ?>
        <li>
          <?php echo $desc_tag; ?>
        </li>
      <?php } ?>
    </ul>
  </div>
</div>

Таким образом у нас есть функционал для автоматического отделения заголовков и создания якорей. 

Кстати якори очень полезная штука для СЕО