pdoMenu и все тот же аккордеон
4.6K
19
Александр здравствуйте. Прочитал предыдущее по поводу аккордеона и формирования в pdoMenu. На основе этого пробовал реализовать данное меню
Итог достаточно плачевен, оно ни в какую не хочет выпадать. Кроме того не понятно как засадить несколько дочерних ресурсов при такой форме.
После множества проб, остановился на этом варианте и он естественно не правильный...
<div class="container-fluid">
<div id="MainMenu">
<div class="list-group panel">
[[pdoMenu?
&parents=`0`
&level=`2`
&tpl=`@INLINE <a class="list-group-item list-group-item" data-parent="#MainMenu" href="#[[+menutitle]]">[[+menutitle]]</a>`
&tplInner=``
&tplInnerRow=``
&tplOuter=`@INLINE [[+wrapper]]`
&tplParentRow=`@INLINE
<a class="list-group-item list-group-item" data-toggle="collapse" data-parent="#MainMenu" href="#[[+menutitle]]">
[[+pagetitle]]
</a>
<div id="[[+menutitle]]" class="collapse">
<a href="#[[+pagetitle]]" class="list-group-item">[[+pagetitle]]</a>
[[+wrapper]]
</div>`
]]
</div>
</div>
</div>
Ответы: 19
Подскажите куда что добавить пожалуйста.
Сейчас так:
А надо так:
Нужна ваша помощь, есть меню:
[[pdoMenu?
&lastClass=``
&firstClass=``
&rowClass=``
&hereClass=``
&level=`2`
&parents=`2`
&showUnpublished=`1`
&selfClass=`current`
&tplOuter=`@INLINE
[[+wrapper]]
`&tplParentRow=`@INLINE [[+menutitle]][[+wrapper]]`
&tplParentRowActive=`@INLINE [[+menutitle]][[+wrapper]]`
&tplInner=`@INLINE [[+wrapper]]`
&tplInnerRow=`@INLINE [[+menutitle]]`
&tplInnerHere=`@INLINE [[+menutitle]]`
&tplHere=`@INLINE [[+menutitle]]`
&tpl=`@INLINE [[+menutitle]]`
]]
Как можно сделать чтобы у нужных родителей не показывались дочерние страницы, а только родитель и все, кликая на него пользователь должен попасть на страницу???
СПАСИБО!!!
Вот код меню:
[[pdoMenu?
&lastClass=``
&firstClass=``
&rowClass=``
&hereClass=``
&level=`3`
&parents=`2,-80`
&showUnpublished=`1`
&selfClass=`current`
&tplOuter=`@INLINE
[[+wrapper]]
`&tplParentRow=`@INLINE [[+menutitle]][[+wrapper]]`
&tplParentRowActive=`@INLINE [[+menutitle]][[+wrapper]]`
&tplInner=`@INLINE [[+wrapper]]`
&tplInnerRow=`@INLINE [[+menutitle]]`
&tplInnerHere=`@INLINE [[+menutitle]]`
&tplHere=`@INLINE [[+menutitle]]`
&tpl=`@INLINE [[+menutitle]]`
]]
Сейчас меню прекрасно работает и все вроде хорошо вот живой пример: maniyaremonta.ru/remont-detskoj-komnatyi.html
Но выплыл один косяк, с хлебными крошками при такой иерархии в хлебных крошках нет родителя допустим у «ремонта детской комнаты для девочки», хотя родителем должен быть «ремонт детской комнаты». Когда вкладываешь «ремонт детской комнаты для девочки» и делаешь родителем «ремонт детской комнаты», хлебные крошки отображаются правильно, а меню рушиться как исправить этот косяк? СПАСИБО!!!
Я так понимаю нужно доработать меню, но моих мозгов не хватает, прошу вас помогите решить эту проблему если нужно могу вас пустить в админку, терпения моего уже нет!!!
Наиболее просто это решить с помощью JavaScript.
Например, можно добавить такой скрипт на страницы (в шаблон):
$(function(){ var parent = $('.gh.current').parent('.collapse'); if (parent.length > 0) { var parentText = parent.prev('a').text(); $('<li>' + parentText + '</li>').insertBefore('.breadcrumb li:last'); } });До выполнения скрипта:
После выполнения скрипта:
У вас в js есть ошибки и если вы вставите вышеприведённый JavaScript код после них, то он не выполниться. Вам необходимо исправить ошибки в JavaScript коде, либо вставить вышеприведённый код до них.
На JavaScript эта проблема решается с помощью нескольких строчек кода.
[[pdoMenu? &level=`2` &selfClass=`current` &parents=`0` &plPrefix=`wf.` &tplOuter=`@INLINE <nav id="MainMenu"><div class="list-group panel">[[+wrapper]]</div></nav>` &tplParentRow=`@INLINE <a id="tplParentRow[[+isfolder]]" href="#[[+id]]" class="list-group-item hvr-underline" data-toggle="collapse" data-parent="#MainMenu"> <span class="fa fa-chevron-down fa-lg"></span> [[+menutitle]]</a>[[+wrapper]]` &tplInner=`@INLINE <div class="collapse" id="[[+id]]">[[+wrapper]]</div>` &tplInnerRow=`@INLINE <a href="[[+link]]" class="[[+classnames]] list-group-item"><span class="fa fa-minus fa-lg"></span> [[+menutitle]]</a>` &tpl=`@INLINE <a id="tpl" href="[[+link]]" class="list-group-item hvr-underline">[[+menutitle]]</a>` ]] <script> $(function(){ $('#MainMenu .current').parent('div.collapse').addClass('in'); }); </script>Добрый вечер! Сделал как у вас написано но увы, сам аккордеон возвращается в исходное состояние и не остается активным, при открытии страницы вот живой пример lisovv.bget.ru/remont-odnokomnatnoj-kvartiryi-60-metrov.html помогите пожалуйста!!![[!pdoMenu? &level=`2` &parents=`0` &plPrefix=`wf.` &tplOuter=`@INLINE <div id="MainMenu"><div class="list-group panel">[[+wrapper]]</div></div>` &tplParentRow=`@INLINE <a id="tplParentRow[[+isfolder]]" href="#[[+id]]" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu"> [[+menutitle]] <span class="caret"></span> </a>[[+wrapper]]` &tplInner=`@INLINE <div class="collapse" id="[[+id]]">[[+wrapper]]</div>` &tplInnerRow=`@INLINE <a href="[[+link]]" class="list-group-item">[[+menutitle]]</a>` &tpl=`@INLINE <a id="tpl" href="[[+link]]" class="list-group-item">[[+menutitle]]</a>` ]]А не подскажите моменты еще по этому меню?
Вот у Вас стоит кеширования у снипета. Можете пролить свет все-таки окончательно. Стоит ли везде кешировать все и вся или же стоит отказаться (ну кроме меню) от кеширования? Просто сколько я тестировал и прочее, сайт работает куда быстрее, если сниппеты (за исключением которые, скажем так, динамические) не кешируются.
И второй момент с показательным классом для этого меню.
Вот знаете, добавил [[+classnames]] в
[[pdoMenu? &level=`2` &parents=`0` &plPrefix=`wf.` &tplOuter=`@INLINE <nav id="MainMenu"><div class="list-group panel">[[+wrapper]]</div></nav>` &tplParentRow=`@INLINE <a id="tplParentRow[[+isfolder]]" href="#[[+id]]" class="list-group-item hvr-underline" data-toggle="collapse" data-parent="#MainMenu"> <span class="fa fa-chevron-down fa-lg"></span> [[+menutitle]]</a>[[+wrapper]]` &tplInner=`@INLINE <div class="collapse" id="[[+id]]">[[+wrapper]]</div>` &tplInnerRow=`@INLINE <a href="[[+link]]" class="[[+classnames]] list-group-item"><span class="fa fa-minus fa-lg"></span> [[+menutitle]]</a>` &tpl=`@INLINE <a id="tpl" href="[[+link]]" class="list-group-item hvr-underline">[[+menutitle]]</a>` ]]И вроде бы задумка правильная. Типа когда мы выбираем страницу из этого аккордеона, то она типа как остается активной и указывает пользователю, что находясь на этой странице он находится в этой части меню.Но вот сам аккордеон возвращается в исходное состояние и не остается активным…
Т.е. при выборе пункта в этом меню, пункт остается активным, но аккордеон сворачивается. Не поможете и с этим?
Чтобы это сделать, можно выполнить 2 следующих действия:
<script> $(function(){ $('#MainMenu .current').parent('div.collapse').addClass('in'); }); </script>Александр, но я начал очень издалека. Просто я подумал что поэтапно подходя к этому — будет хорошо. Ведь это главный элемент моего вопроса. Заранее прошу простить за простынь.
Мой вопрос касается семантической разметки сайта. В интернете полно информации, но эта информация сводится к примерам: блогам, магазинам, новостных порталов. И вопросы которые появляются сами собой ответов не находят.
Я начну с макета. Предполагаемый макет не: интернет магазин, блог, новости. Я делаю себе сайтик под свою мастерскую (может буду вести блог, но с блогом все понятно как устроенно).
На рисунке видно, в элемент <.header> вложена навигация по сайту <.nav>. По сути это основная навигация, которая позволяет пользователю совершать переходы по сайту, по основным страницам (главная, о нас, контакты и такого плана). Так же в <.header> расположен логотип, контакты и кнопки соц сетей. Так же говорится, что навигация может быть вложена в элемент header.
Я опущу про разметку элементов, такие как address, arcticle, section и т.п.Дальше у нас идет основное содержимое сайта <.main>. Везде говорится, что в этом элементе должна находиться информация которая меняется на каждой странице. Т.е. сюда лучше класть [[*content]].
Но у меня, как видите, этот элемент стилями бутстрапа разбит на две колонки. Колонка 1 — имеет роль боковой части сайта, в которую разместился наш аккордеон и в этой же колонки будут находиться блоки с информацией и дополнительными блоками (такие как реклама например). Колонка 2 — собственно куда и выводится контент страницы. Так же в этой колонке на верху (на других страницах кроме главной) выведены хлебные крошки.
1. Правильно ли так делать с .main? Ведь колонка 1 имеет роль боковой панели, в которой информация не меняется.
И вот получается, что мы имеем на сайте три навигации:
— навигация в .header. Тут у нас основные страницы.
— навигация аккордеон. Тут у нас расположились категории продукций.
— хлебные крошки (тут понятно как делать).
2. Александр, скажите как лучше сделать семантику для этих элементов на сайте? Не могу же я два раза использовать .nav или могу? Т.е. на сайте получается две навигации в любом случае же.
У Вас на сайте приведены статьи касательно разметки nav.
<nav> <ul> <li><a href="/">Главная</a> <li><a href="news.html">Новости</a> <li><a href="blog.html">Блог</a> <li><a href="about.html">О блоге</a> </ul> </nav>Так же можно использовать и другие способы разметки.<nav> <h2>...</h2> <ul> <li><a>...</a></li> <li><a>...</a></li> <li><a>...</a></li> </ul> </nav>С полученным аккордеоном получается что у нас будет:<nav> <h2>Категории</h2> <ul> <li><a>...</a></li> <ul name=""> <li><a>...</a></li> <li><a>...</a></li> </ul> <ul name=""> <li><a>...</a></li> <li><a>...</a></li> </ul> </ul> </nav>3. Правильно я понял, что так можно сделать?Александр и предпоследний вопрос. С получившимся аккордеон у нас пропали главные категории. Целость навигации нарушена. Посему я подумал что правильней сделать посадочные страницы категорий в главном меню (которое расположено в .header), пусть это будут: дерево, сталь, стекло.
<nav> <ul> <li><a>Главная</a></li> <li><a>О нас</a></li> <ul name="Продукция"> <li><a>Дерево</a></li> <li><a>Сталь</a></li> <li><a>Стекло</a></li> </ul> <li><a>Контакты</a></li> </ul> </nav>а боковое меню (аккордеон) привести в вид:<nav> <h2>Категории</h2> <ul> <ul name="Дерево"> <li><a>Двери</a></li> <li><a>...</a></li> </ul> <ul name="Сталь"> <li><a>...</a></li> <li><a>...</a></li> </ul> <ul name="Стекло"> <li><a>Зеркала</a></li> <li><a>...</a></li> </ul> </ul> </nav>4. Скажите, правильно ли я думаю? (Конечно все так же будет зависеть от перелинковки и прочего)И последний вопрос.
После много чего прочитанного пришел к выводу, что если верстать семантикой html5 то неплохо было бы подкреплять это дело и ARIA (естественно где нужно задавать роли) и внимательно смотреть, что бы не было тавтологии. К примеру .nav это уже role=navigation, .main это role=main и так далее.
Для лучшего отображения так же делаем разметку с помощью Open Graf для соц сетей и с Schema.org для поисковиков.
И вот тут вопрос с Schema.org. Никак не могу допереть какой критерий использовать для материала на сайте. Моя мастерская не предлагает никаких готовых изделий, не является блогом. На ней просто будет описание материала из чего можно сделать. Пусть это будет «Стекло» и можно заказать «Душевую кабину». Готовых решений нету и все полностью индивидуально. Т.е. пользователь ознакамливается с услугами, понимает из каких материалов можно сделать, использует на сайте калькулятор изделия и понимает приблизительно что к чему по сумме.
Далее делается замер, производится изделие и монтаж изделия.
И вот не понятно под какой фильтр моя информация попадает у Schema.org
И еще раз извините что так много текста получилось.
В спецификации HTML 5 говорится, что элемент main – это контейнер, который должен содержать уникальную информацию, не повторяющуюся на других страницах. Т.е. указать, где у вас находится основное содержимое страницы. Т.е. правильно его использовать в соответствии со спецификацией HTML 5.1 только для блока 2. Но бывает многое случаев, когда этот блок используют неправильно. Например, такой авторитетный ресурс как html5doctor.com. Сделать это можно используя 2 способа. Первый – это всё содержимое 2 колонки обернуть элементом main. Т.е. создать внутри 2 колонки элемент main, а внутри него помещать содержимое content. При этом он может находиться в любой цепочки иерархии. Второй способ — заменить элемент div на main.
1 вариант:
<div class="container"> <div class="row"> <div class="col-md-4"> <aside> ... </aside> </div> <div class="col-md-8"> <main> ... </main> </div> </div> </div>2 вариант<div class="container"> <div class="row"> <aside class="col-md-4">...</aside> <main class="col-md-8">...</main> </div> </div>Блок nav в соответствии со спецификацией можно использовать несколько раз на странице. Если он у Вас будет находиться в header, а header в body – то это основной блок навигации на сайте. А если в aside, то nav уже будет считаться вспомогательной навигацией, косвенно связанной со страницей. Т.к. все, что помещено в aside является уже второстепенным, но связанным с основным содержанием страницы. Это как раз то, что вам и надо. Из представленных вариантов на мой взгляд лучше сделать последний. Т.к. не хорошо внутри основного содержимого (main + aside) помещать ссылки на главную страницу сайта или разделы, если конечно ваша цель контент. Т.е. в этом блоке лучше поместить ссылки на другие страницы. Помещать в aside ссылки на главную или разделы обычно необходимо только в том случае, если ваша цель – главная страница или разделы.Конечно, можно добавлять и ARIA. Но если от него практическая польза. Сколько людей его будет использовать?
А вот микроразметку сделать необходимо обязательно. Это позволит поисковым роботом лучше ориентироваться на сайте, что в итоге может привести к значительному увеличению трафика (что как обычно и происходит).
Лучше что предлагается на сайте schema.org не использовать, т.к. это не всё поддерживается системами Google и Яндекс. Необходимо выбрать из той категории, что поддерживается этими системами (Фильмы, Отзывы о книгах, Рестораны, Мероприятия, Приложения, Статьи, Местные организации, Продукты), т.к. именно они формируют сниппет, который увидит пользователь при поиске. Ваша категория – это Article.