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

Как реализовать табы с помощью ресурсов?
Например контейнер это сам таб, а дочерние ресурсы выводятся списком в этом табе.

UDAV

24 марта 2017, 06:28

2 944

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

Максим Кузнецов

25 марта 2017, 11:17

Если использовать минимальное количество запросов, то можно воспользоваться 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

Максим, подскажи пожалуйста, как вместо pdoResource сделать msProducts?
Видимо из-за json что-то не срабатывает, пробовал убрать его, но все равно ничего не выводится. С pdoResource все отлично.

dokreg

31 мая 2020, 22:03

А как реализовать, чтобы только у первой ссылки был класс active? Т.е. учитывая ваш пример сделать только первую ссылку таба такой: ?

dokreg

31 мая 2020, 22:18

<a data-id="' ~ $id ~ '" class="tab-selector active">

Андрей

31 мая 2020, 22:20

Использовать first — Тег {foreach}

{foreach $list as $value}
     <div>{if $value@first} first item {/if} {$value}</div>
{/foreach}

dokreg

01 июня 2020, 10:22

Спасибо, попробовал ваш способ, только теперь у меня 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

pdoMenu

Максим Кузнецов

25 марта 2017, 13:42

Тоже вначале написал этот вариант, но с pdoMenu без ухищрений не получится разделить родителей и потомков по разным контейнерам => не получится удобно сгруппировать переключатели табов.
Хотя, конечно, можно повставлять их по плейсхолдерам, но это уже отдает извращением.

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

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

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

Здесь упомянуты