• Главная
• Полезности
• Как сделать автоматические якори в тексте

Как сделать автоматические якори в тексте

категория: , Дорабатываем, Полезности

---

✎ Опубликовано: 18.03.2019 ✎ Обновлено: 15.04.2019 ☕ Просмотров: 3797 ✉ Комментарии: 0

---

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

---

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

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

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

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

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

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

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

Для подключения библиотеки для начала скачиваем ее и открываем файл catalog/controller/product/product.php и после <?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>
Таким образом у нас есть функционал для автоматического отделения заголовков и создания якорей. 

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

---

---