категория: , Дорабатываем, Полезности
✎ Опубликовано: 18.03.2019 ✎ Обновлено: 15.04.2019 ☕ Просмотров: 5431 ✉ Комментарии: 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>
Таким образом у нас есть функционал для автоматического отделения заголовков и создания якорей.
Кстати якори очень полезная штука для СЕО
Читая информацию о рекламе в facebook я нашел кое что интересное
Чистый и валидный HTML и CSS код, Хорошие показатели Google Page Speed, Более 20 модулей в комплекте, Профессиональная техническая поддержка - это только часть того что есть в шаблоне
Исправляем странный баг в Opencart в удаляется товар при копировании. Этот баг присутствует в google chrome
Также в статье хочу выразить благодарность не только Виталию а и другим крутым авторам дополнений с кем приходилось иметь дело
Чтобы принимать Биткоин и Лайткоин в OpenCart, вам не нужно заполнять утомительные документы, проходить проверку и ждать несколько дней. Установите бесплатный модуль и просто введите адрес своего Биткоин и/или Лайткоин кошелька. Тогда все входящие платежи
Монобанк - прогрессивный банк без отделений в котором дают кредитные карточки с хорошим грейс периодом а также возможностью заработать открыв в нем депозит. Именно о нем и пойдет речь
Мы знаем что поисковые роботы любят текст на страницах. Однако публикуя тексты помните предназначена ли эта страница для такого текста
Небольшой пример как можно сделать автоматически содержание описания со скролом при клике на заголовок
Обзор платежного шлюза fondy который позволяет сделать онлайн оплату на сайте за любые товары или услуги
Как оптимизировать сайт для google page speed - обзор основного функционала сервиса от гугл для проверки скорости загрузки страницы
Для того что бы вывести кастомную информацию не надо много кода. Достаточно применить правильный подход и пару строк кода. Читаем в статье.
Как мне "посчастливилось" пощупать UMI CMS особенно со стороны переноса данных и почему меня до сих пор тошнит при слове UMI
В этом обзоре будут выявлены все плюсы и минусы каждого фильтра. Всего в обзоре будет 7 фильтров который продаются и развиваются. По завершению будет дана рекомендация какой же выбрать
Коллеги, давайте предоставлять хороший сервис и поднимать планку качества. Небольшая история как я обращался к разным разработчикам