Було одне цікаве доопрацювання нещодавно. Треба було створити автоматичний зміст статті виходячи з його 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 ) . 'UTF-8');
$data['description'] = str_replace($h->nodeValue . "</" . $h->nodeName. ">", '<a name="hname-' . $index_h . '"></a >' . $h->nodeValue.
}
$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: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>
Таким чином, у нас є функціонал для автоматичного відділення заголовків і створення якорів.
До речі якорі дуже корисна штука для СЕО
