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

Добрый день подскажите пожалуйста как сделать табы из ресурсов из стандартных дополнений к MODX?
FENOM и PHP не знаю!

Сергей

10 апреля 2018, 23:43

1 156

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

Іван Клімчук

11 апреля 2018, 10:16

Если «FENOM и PHP не знаю!», то стоит писать сразу сюда modx.pro/work/

Сергей

11 апреля 2018, 12:28

А вы сразу программистом родились? Хорошо сколько стоит реализовать такую задачу?

Іван Клімчук

11 апреля 2018, 12:30

Для начала хотелось бы увидеть более четко сформулированный вопрос. Потому то, что у вас в голове, только там и есть. Что означает табы из ресурсов в вашем понимании?

Сергей

11 апреля 2018, 13:08

Знаете компонент у Bootsrap 3 “tabs”
Вот есть например структура меню:
Фотографии
— фото март
— — фотографии
— фото апрель
— — фотографии

Так вот необходимо сделать что бы во кладках выводились категории (фото март, фото апрель), а в теле вкладок выводились фотографии контейнера активной вкладки

Іван Клімчук

11 апреля 2018, 14:28

docs.modx.pro/components/pdotools/snippets/pdomenu
Вот хорошая документация по pdoMenu. С помощью этого снипета такое сделать возможно.

Сергей

11 апреля 2018, 15:10

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

<div> вывод табов
    
    <ul>
      <li></li> категория 1 id=1
      <li></li> категория 2 id=2
      <li></li> категория 3 id=3
    </ul>

    <div> обертка ресурсов

        <div> обертка категории 1 id=1
          <p></p> ресурс категории 1
          <p></p> ресурс категории 1
          <p></p> ресурс категории 1
        </div>

        <div> обертка категории 2 id=2
          <p></p> ресурс категории 2
          <p></p> ресурс категории 2
          <p></p> ресурс категории 2
        </div>

        <div> обертка категории 3, id=3
          <p></p> ресурс категории 3
          <p></p> ресурс категории 3
          <p></p> ресурс категории 3
        </div>

    </div>


  </div>

Давайте разберем:

<div> 
    
    <ul> -> &tplOuter
      <li></li> -> &tplParentRow
      <li></li> 
      <li></li> 
    </ul>

    <div> -> &tplInner

        <div> -> &tplInnerRow
          <p></p> -> &tpl
          <p></p> 
          <p></p> 
        </div>

        <div> 
          <p></p> 
          <p></p> 
          <p></p> 
        </div>

        <div> 
          <p></p> 
          <p></p> 
          <p></p> 
        </div>

    </div>


  </div>

Не работает…

Сергей

11 апреля 2018, 15:29

Вот мой вызов, но ни чего не работает.

[[pdoMenu?
                &parents=`36`
                &level=`3`
                &tplOuter=`@INLINE <ul class="nav nav-tabs row-flex" role="tablist">[[+wrapper]]</ul>`
                &tplParentRow=`@INLINE <li role="presentation" class="active">[[+menutitle]]</li>`
                &tplInner=`@INLINE <div class="tab-content">
                              [[+wrapper]]</div>`
                &tplInnerRow=`@INLINE <div role="tabpanel" class="tab-pane fade in active" id="home">
                <div class="row">[[+wrapper]]</div></div>`
                &tpl=`@INLINE  <div class="col-md-6 img-portfolio">
                           <p>[[+menutitle]]</p>
                              </div>`
            ]]

<div class="portfolio-tabs">

            <!-- Nav tabs -->
            <ul class="nav nav-tabs row-flex" role="tablist">

              <li role="presentation" class="active"><a class="btn btn-default" href="#home" aria-controls="home" role="tab" data-toggle="tab">Предпродажная полготовка автомобиля</a></li> - категория - 1

            </ul>

            <!-- Tab panes -->
            <div class="tab-content"> - обертка внутренних пунктов меню
              <div role="tabpanel" class="tab-pane fade in active" id="home"> -  обертка категории -1
                  <div class="row"> -  обертка категории -1
                      <div class="col-md-6 img-portfolio">
                        <div class="after-block">ДО</div>
                        <img src="images/p1.png" alt="" class="img-responsive">
                      </div>

                      <div class="col-md-6 img-portfolio">  - это сам ресурс категории 1
                        <p>Заголовок</p>
                      </div>

                  </div>
              </div>
</div>

Сергей

11 апреля 2018, 15:49

Вот так работает

[[pdoMenu?
                &parents=`36`
                &level=`3`
                &tplOuter=`@INLINE <ul class="nav nav-tabs row-flex" role="tablist">[[+wrapper]]</ul>`
                &tplParentRow=`@INLINE <li role="presentation" class="active"><p>[[+menutitle]]</p>
                [[+wrapper]]</li>`
                &tplInner=`@INLINE <div class="tab-content">
                <div role="tabpanel" class="tab-pane fade in active" id="home">
                  <div class="row">[[+wrapper]]</div></div></div>`
                &tplInnerRow=`@INLINE <div class="col-md-6 img-portfolio">[[+menutitle]]</div>`
            ]]

но это не правильно для моей задачи.
Вот что на выходе:

<div class="portfolio-tabs">
              
              
              <ul class="nav nav-tabs row-flex" role="tablist">
                <li role="presentation" class="active"><p>Категория-1</p>
                  <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="home">
                        <div class="row">
                          <div class="col-md-6 img-portfolio">ресурс категории 1</div>
                          <div class="col-md-6 img-portfolio">ресурс категории 1</div>
                        </div>
                    </div>
                  </div>\
                </li>
                <li role="presentation" class="active"><p>Категория-2</p>
                  <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="home">
                      <div class="row">
                        <div class="col-md-6 img-portfolio">ресурс категории 2</div>
                        <div class="col-md-6 img-portfolio">ресурс категории 2</div>
                        <div class="col-md-6 img-portfolio">ресурс категории 2</div>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>

            
          </div>