Как сделать табы из ресурсов?

Как реализовать табы с помощью ресурсов?
Например контейнер это сам таб, а дочерние ресурсы выводятся списком в этом табе.
UDAV
24 марта 2017, 06:28
modx.pro
3
1 847
-1

Комментарии: 8

Максим Кузнецов
25 марта 2017, 11:17
3
+3
Если использовать минимальное количество запросов, то можно воспользоваться fenom'ом примерно таким образом:

//Собираем ресурсы, из которых необходимо будет сформировать табы
{var $resource_list = $_modx->runSnippet('!pdoResources', [
	...
	'return' => 'json'
])}

//Родитель, от которого формируем табы
{set $tab_parent = '11'}

{set $tabs = ''}
{foreach $resource_list | fromJSON | split as $item}
	{set $parent = $item['parent']}
	{set $id = $item['id']}
	{set $pagetitle = $item['pagetitle']}

	//Настроить оформление по вкусу
	{if $parent == $tab_parent}
		{set $tabs = $tabs ~ '<a data-id="' ~ $id ~ '" class="tab-selector">' ~ $pagetitle ~ '</a>'}
	{else}
		{set $tab_childs[$parent][$id] = '<div class="body">' ~ $pagetitle ~ '</div>'}
	{/if}
{/foreach}


<div class="wrapper">
	<div class="tabs">{$tabs}</div>
	<div class="items">
		{foreach $tab_childs as $parent_id => $tab_content}
			<div data-parent="{$parent_id}" class="body">
				{foreach $tab_content as $tab_item}
					{$tab_item}
				{/foreach}
			</div>
		{/foreach}
	</div>
</div>
    UDAV
    03 августа 2017, 08:49
    0
    Максим, подскажи пожалуйста, как вместо pdoResource сделать msProducts?
    Видимо из-за json что-то не срабатывает, пробовал убрать его, но все равно ничего не выводится. С pdoResource все отлично.
      dokreg
      31 мая 2020, 22:03
      0
      А как реализовать, чтобы только у первой ссылки был класс active? Т.е. учитывая ваш пример сделать только первую ссылку таба такой: ?
        dokreg
        31 мая 2020, 22:18
        0
        <a data-id="' ~ $id ~ '" class="tab-selector active">
          Андрей
          31 мая 2020, 22:20
          1
          +1
          Использовать first — Тег {foreach}

          {foreach $list as $value}
               <div>{if $value@first} first item {/if} {$value}</div>
          {/foreach}
            dokreg
            01 июня 2020, 10:22
            0
            Спасибо, попробовал ваш способ, только теперь у меня 2 таба одинаковых, потому что в первом if c first я делаю первый таб активным, а по второму if он тоже появляется, как его исключить из второго условия, чтобы не дублировать, не могу додуматься, вот код:
            <!--Родитель, от которого формируем табы-->
            {set $tab_parent = '0'}
            
            {set $tabs = ''}
            
            {foreach $resource_list | fromJSON | split as $item}
            	{set $parent = $item['parent']}
            	{set $id = $item['id']}
            	{set $pagetitle = $item['pagetitle']}
                {if $item@first}
                    {set $tabs =  '<li class="nav-item"><a data-toggle="tab" href="#' ~ $id ~ '" class="nav-link active">' ~ $pagetitle ~ '</a></li>'}
                {/if}
            	<!--Настроить оформление по вкусу-->
            	{if $parent == $tab_parent}
            	    {set $tabs = $tabs ~ '<li class="nav-item"><a data-toggle="tab" href="#' ~ $id ~ '" class="nav-link">' ~ $pagetitle ~ '</a></li>'}
            	{else}
            		{set $tab_childs[$parent][$id] = '<a href="#" class="rounded-pill">' ~ $pagetitle ~ '</a>'}
            	{/if}
            {/foreach}
            
            <ul class="nav nav-tabs">{$tabs}</ul>
            <div class="tab-content">
            		{foreach $tab_childs as $parent_id => $tab_content}
            			{if $parent_id ==69}
            			    <div id="{$parent_id}" class="container tab-pane active">
                				{foreach $tab_content as $tab_item}
                					{$tab_item}
                				{/foreach}
            			    </div>
            			{/if}
            			<div id="{$parent_id}" class="container tab-pane fade">
            				{foreach $tab_content as $tab_item}
            					{$tab_item}
            				{/foreach}
            			</div>
            		{/foreach}
            </div>
        Дмитрий Иванов
        25 марта 2017, 13:14
        0
        pdoMenu
          Максим Кузнецов
          25 марта 2017, 13:42
          +1
          Тоже вначале написал этот вариант, но с pdoMenu без ухищрений не получится разделить родителей и потомков по разным контейнерам => не получится удобно сгруппировать переключатели табов.
          Хотя, конечно, можно повставлять их по плейсхолдерам, но это уже отдает извращением.
          Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
          8