Реализация вкладок из ресурсов с помощью fenom
Добрый день!
Есть ресурс с id=2, у него три дочерних ресурса с заголовками «раз, два, три».
Хотел реализовать вывод дочерних ресурсов в виде вкладок, родителя с id=2.
На сайте нашел решение, вроде все сделал правильно, но почему то не выводит тело вкладок, режет и все.
Вот моя конструкция:
Есть ресурс с id=2, у него три дочерних ресурса с заголовками «раз, два, три».
Хотел реализовать вывод дочерних ресурсов в виде вкладок, родителя с id=2.
На сайте нашел решение, вроде все сделал правильно, но почему то не выводит тело вкладок, режет и все.
Вот моя конструкция:
{var $resource_list = $_modx->runSnippet('!pdoResources', [
'parents' => 2,
'includeContent'=> 1,
'includeTVs' => 'image',
'return' => 'json'
])}
{set $tab_parent = '2'}
{set $tabs = ''}
{foreach $resource_list | fromJSON as $item}
{set $parent = $item['parent']}
{set $id = $item['id']}
{set $pagetitle = $item['pagetitle']}
{set $content = $item['content']}
{if $parent == $tab_parent}
{set $tabs = $tabs ~ '<li>
<a href="#' ~ $id ~ '" aria-controls="' ~ $id ~ '" role="tab" data-toggle="tab">
' ~ $pagetitle ~ '
</a>
</li>'}
{else}
{set $tab_childs[$parent][$id] = '<p>' ~ $content ~ '</p>'}
{/if}
{/foreach}
<div class="background_block_menu">
<ul class="ul_inline_items">{$tabs}</ul>
<div class="tab-content">
{foreach $tab_childs as $parent_id => $tab_content}
<div role="tabpanel" class="tab-pane fade in active" id="{$parent_id}">
{foreach $tab_content as $tab_item}
{$tab_item}
{/foreach}
</div>
{/foreach}
</div>
</div>
Режет этот код:{foreach $tab_childs as $parent_id => $tab_content}
<div role="tabpanel" class="tab-pane fade in active" id="{$parent_id}">
{foreach $tab_content as $tab_item}
{$tab_item}
{/foreach}
</div>
{/foreach}
На выходе получается следующее:<div class="background_block_menu">
<ul class="ul_inline_items">
<li class="active"><a href="#85" aria-controls="85" role="tab" data-toggle="tab">Раз</a></li>
<li><a href="#86" aria-controls="86" role="tab" data-toggle="tab">Два</a></li>
<li><a href="#87" aria-controls="87" role="tab" data-toggle="tab">Три</a></li>
</ul>
<div class="tab-content">
Здесь пусто.....
</div>
</div>
где пусто хотелось бы получить следующее…<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="#85">
<p>Контент ресурса текущей вкладки.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="#86">
<p>Контент ресурса текущей вкладки.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="#87">
<p>Контент ресурса текущей вкладки.</p>
</div>
</div>
Комментарии: 4
Ни кто не поможет?
Нашел решение, хотя бы подскажите правильное ли оно?
Есть ресурс «Вкладки», у него дочерние «раз, два, три».
Необходимо было вывести дочерние ресурсы в виде вкладок, где сами вкладки это заголовок (pagetitle), а тело вкладки, это контент текущей вкладки.
Что получилось на выходе в браузере.
Есть ресурс «Вкладки», у него дочерние «раз, два, три».
Необходимо было вывести дочерние ресурсы в виде вкладок, где сами вкладки это заголовок (pagetitle), а тело вкладки, это контент текущей вкладки.
Что получилось на выходе в браузере.
<div class="background_block_menu">
<ul class="ul_inline_items">
<li class="active"><a href="#85" aria-controls="85" role="tab" data-toggle="tab" aria-expanded="false">Раз</a><li>
<li><a href="#86" aria-controls="86" role="tab" data-toggle="tab" aria-expanded="false">Два</a><li>
<li><a href="#87" aria-controls="87" role="tab" data-toggle="tab" aria-expanded="false">Три</a><li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="85">Контент ресурса</div>
<div role="tabpanel" class="tab-pane fade" id="86">Контент ресурса</div>
<div role="tabpanel" class="tab-pane fade" id="87">Контент ресурса</div>
</div>
</div>
Решение:{var $resource_list = $_modx->runSnippet('!pdoResources', [
'parents' => 2,
'includeContent'=> 1,
'includeTVs' => 'image', //в перспективе буду добавлять изображения
'return' => 'json'
])}
<ul class="ul_inline_items">
{foreach $resource_list | fromJSON as $idx => $item}
{if $idx == '0'}
<li class="active"><a href="#{$item.id}" aria-controls="{$item.id}" role="tab" data-toggle="tab">$item.pagetitle}</a></li>
{else}
<li><a href="#{$item.id}" aria-controls="{$item.id}" role="tab" data-toggle="tab">$item.pagetitle}</a></li>
{/if}
{/foreach}
</ul>
<div class="tab-content">
{foreach $resource_list | fromJSON as $idx => $item}
{if $idx == '0'}
<div role="tabpanel" class="tab-pane fade in active" id="{$item.id}">{$item.content}</div>
{else}
<div role="tabpanel" class="tab-pane fade" id="{$item.id}">{$item.content}</div>
{/if}
{/foreach}
</div>
За основу взял данное решение. {var $resource_list = $_modx->runSnippet('pdoResources', [ // Восклицательный знак не обязателен
'parents' => 2,
'includeContent'=> 1,
'includeTVs' => 'image',
'return' => 'json'
])}
{var $all = $resource_list | fromJSON} // Можно и один раз преобразовать
{if $all} // Проверка на пустоту, если переменная пустая, то не выводить
<ul class="ul_inline_items">
{foreach $all as $item}
<li{if $item@first} class="active"{/if}><a href="#{$item.id}" aria-controls="{$item.id}" role="tab" data-toggle="tab">{$item.pagetitle}</a></li> // Проверка в одну строку, так же проще
{/foreach}
</ul>
<div class="tab-content">
{foreach $all as $item}
<div role="tabpanel" class="tab-pane fade{if $item@first} in active{/if}" id="{$item.id}">
{$item.content}
</div>
{/foreach}
</div>
{/if}
Вот так-то лучше :)
Спасибо исправлю!
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.