Как реализовать вывод табов из boostrap 4 в ModX?

Question

[RushV]

Всех приветствую!
Решил реализовать вывод табов из boostrap 4.
Вот этот код:

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

Вот эти пункты

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </div>
</nav>

вывел вот этим кодом:

<nav>
			  <div class="nav nav-tabs color-green" id="nav-tab" role="tablist">
				[[pdoResources?
            &parents=`5`
            &depth=`0`
            &tpl=`ListRowMenuTpl`
        ]]
        </div>
			</nav>

Вот чанк:

<a class="nav-item nav-link font-weight-bold" id="nav-[[+id]]-tab" data-toggle="tab" href="#nav-[[+id]]" role="tab" aria-controls="nav-[[+id]]" aria-selected="false">[[+pagetitle]]</a>

Как теперь вывести во эти пункты:

Что бы в каждом разделе выводился свой список товаров
?

Answer 1

[Дмитрий Христоев]

а tab-content вы выводите?

Comments

[RushV]

Вот так вывожу

Вот чанк:

<div class="tab-pane fade show" id="nav-[[+id]]" role="tabpanel" aria-labelledby="nav-[[+id]]-tab">
  <div class="col-12 col-xl-3 col-lg-3 col-md-4 col-sm-6">
    <div class="card p-3 shadow-sm mb-4">
        <img src="assets/img/2019-07-24 192948.jpg" class="card-img-top" alt="...">
        <div class="card-body p-2 text-center">
          <a href="[[~[[+id]]]]" class="btn btn-link font-weight-bold cart-link link-orange">[[+pagetitle]]</a>
        </div>
      </div>
  </div>
</div>

[Дмитрий Христоев]

RushV, а где #nav-[[+id]] на который вы ссылаетесь выше?

[RushV]

Возможно ли вообще сделать
Что бы в каждом разделе выводился свой список товаров
?

[Дмитрий Христоев]

RushV, вместо блока

<div class="card p-3 shadow-sm mb-4">
        <img src="assets/img/2019-07-24 192948.jpg" class="card-img-top" alt="...">
        <div class="card-body p-2 text-center">
          <a href="[[~[[+id]]]]" class="btn btn-link font-weight-bold cart-link link-orange">[[+pagetitle]]</a>
        </div>
      </div>

ставьте вывод pdoMenu типа

[[pdoMenu?
    &parents=`[[+id]]`
    &level=`1`
]]

и делаете нужную tpl

[RushV]

Вот спасибо вам большое!!!
Думал не получится)