Help with sitting up tab items in Migx

gavin · September 12, 2019, 10:22am

I’m trying to set up tab items for a front-end and I have no idea how to get the menu (list Items) of it working with Migx, If I pull the list items in with [[getImageList? &tvname=tab&tpl=tab-menu]] it will not connect with the content itself, and if I just let it pull in with all the code in one place I will end up with a new <ul> each time. I’m sure I’m missing something simple but I can’t seem to get my head around what I’m doing with it right now any help would be much appreciated

Migx Code

[
{"caption":"New Tab Heading (Menu)", "fields": [
{"field":"tab","caption":"Menu Heading","inputTVtype":"text"}
]},
{"caption":"Content", "fields": [
{"field":"heading","caption":"Heading","inputTVtype":"text"},
{"field":"description","caption":"Content","inputTVtype":"richtext"}
]},
{"caption":"List Items", "fields": [
{"field":"list","caption":"List Items","inputTV":"list"}
]},
{"caption":"Images", "fields": [
{"field":"image","caption":"Image for Content","inputTV":"imageplus"}
]}
]

Bootstrap I’m using

<ul class="nav nav-pills nav-pills-border-bottom nav-pills-border-lg nav-justified flex-row justify-md-content-center" role="tablist" data-toggle="scrollbar" tabindex="5" style="overflow: hidden; outline: none; cursor: grab;">
          <li class="nav-item"> <a class="nav-link text-center text-uppercase font-weight-bold px-3 px-lg-4 py-3 active" id="nav-tab[[+idx]]" data-toggle="tab" href="#nav[[+idx]]" role="tab" aria-controls="nav[[+idx]]" aria-selected="true">[[+tab]]</a> </li>
              </ul>
 <div class="container">
          <div class="row">
            <div class="col-xs-12 ">
              <div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
                <div class="tab-pane fade" id="nav[[+idx]]" role="tabpanel" aria-labelledby="nav-tab[[+idx]]">
        <div class="row">
            <div class="col-lg-12">
              <div data-animate="fadeIn" data-animate-duration="0.8">
                <hr class="hr-lg mt-3 mb-3 w-10 mx-auto op-4 hr-primary" />
                <h2 class="text-center text-muted text-uppercase font-weight-light">
                </h2>
    			<hr />
            <div class="icon-rotate-270 pos-absolute text-grey op-6 mt-10 text-x2 ml-10-neg text-uppercase display-2">
               </div>
              </div>
            </div>
                <div class="col-lg-6" data-animate="fadeIn" data-animate-delay="0.4" data-animate-offset="100%">
                  <div class="font-weight-lighter m-3 text-justify text-muted text-x1">[[+description]]</div>
    			   </div>
                <div class="col-lg-6" data-animate="fadeIn" data-animate-delay="0.8" data-animate-offset="100%">
                  <ul class="fa-ul list-unstyled mt-4 text-muted text-sm mt-md-0">
      
                  </ul>
                </div>
               </div>
              </div>
            </div>
           </div>
          </div>
        </div>

bruno17 · September 12, 2019, 11:23am

I think, what you want is a nested MIGX, where the outer MIGX is for the tabs and the inner MIGX is for the items
https://forums.modx.com/thread/90045/need-some-help-with-nested-migx

gavin · September 12, 2019, 11:40am

Hi Bruno thanks for the help

Sorry half the code was missing, The main problem I’m having is with [[+idx]] when setting up a new menu item and tab section

If i add a call of

 [[getImageList? 
        &tvname=`tab`
        &tpl=`@CODE:
     <li class="nav-item"> <a class="nav-link text-center text-uppercase font-weight-bold px-3 px-lg-4 py-3" id="nav-tab[[+idx]]" data-toggle="tab" href="#nav[[+idx]]" role="tab"  aria-controls="nav[[+idx]]" aria-selected="false">[[+tab]]</a> </li>`]]

and

[[getImageList? 
        &tvname=`tab`
        &tpl=`@CODE:
   <div class="tab-pane fade active show" id="nav[[+idx]]" role="tabpanel" aria-labelledby="nav-tab[[+idx]]">
    <div class="row">
        <div class="col-lg-12">
          <div data-animate="fadeIn" data-animate-duration="0.8">
            <hr class="hr-lg mt-3 mb-3 w-10 mx-auto op-4 hr-primary" />
            <h2 class="text-center text-muted text-uppercase font-weight-light">
             [[+heading]] 
            </h2>
			<hr />
        <div class="icon-rotate-270 pos-absolute text-grey op-6 mt-10 text-x2 ml-10-neg text-uppercase display-2">
            [[+heading]]
           </div>
          </div>
        </div>
            <div class="col-lg-6" data-animate="fadeIn" data-animate-delay="0.4" data-animate-offset="100%">
              <div class="font-weight-lighter m-3 text-justify text-muted text-x1">[[+description]]</div>
			   </div>
            <div class="col-lg-6" data-animate="fadeIn" data-animate-delay="0.8" data-animate-offset="100%">
              <ul class="fa-ul list-unstyled mt-4 text-muted text-sm mt-md-0">
  [[getImageList?
    &tvname=`tab`
    &tpl=`list`]] 
              </ul>
            </div>
           </div>
          </div>`]]

The tabs and content get a different [[+idx]] , Now I know it’s something I’m doing wrong my head is not with it today

aaantz · October 7, 2020, 2:27pm

@bruno17 , what about outputting the nested MIGX configuration without using a TV for the inner MIGX?
I have set up two MIGX configs via the CMP - one outer and one inner.

The inner gets called inside the outer like so:

fieldname: nothing (tried random names here without luck)
Input TV type: migx
Configs: myInnerStuff

halftrainedharry · October 7, 2020, 3:52pm

Use the parameter &value for the call to getImageList in the template of the outer migx:

[[getImageList? &value=`[[+fieldname_of_inner_migx_in_outer_migx]]` &tpl=`template_for_inner_migx`]]

aaantz · October 7, 2020, 4:33pm

Thanks @halftrainedharry - that’s what I am doing, but I don’t get any output.

outer migx call:

[[!getImageList?
&tvname=`myTv`
&tpl=`outerTpl`
&docid=`[[*id]]`
]]

outerTpl

<h3>[[+product]]</h3> (this one works)

[[getImageList
&value=`[[+innerMigx]]`
&tpl=`innerTpl`
]]

innerTpl
[[+randomInnerMigxField]] (no output)

screenshot from inside my outer migx call

halftrainedharry · October 7, 2020, 4:40pm

Have you tried calling everything cached [[getImageList?...?

If you output the value of [[+innerMigx]] in the outerTpl directly, do you see the json-string of the inner migx?

outerTpl

<h3>[[+product]]</h3>
<p>[[+innerMigx]]</p>

aaantz · October 7, 2020, 7:19pm

I have already tried everything cached, uncached and a mix of both.

The value of [[+innerMigx]] in the outerTpl outputs the json string:

[{"MIGX_id":"1","tab-name":"Lorem","tab-content":"
Hello world"},{"MIGX_id":"2","tab-name":"Ipsum","tab-content":"
Hi there"}]

halftrainedharry · October 7, 2020, 7:34pm

I can’t reproduce your problems. If I put that json-string directly into a call to getImageList, everything looks ok:

[[getImageList? &value=`[{"MIGX_id":"1","tab-name":"Lorem","tab-content":"Hello world"},{"MIGX_id":"2","tab-name":"Ipsum","tab-content":"Hi there"}]` &tpl=`@CODE:<li>[[+tab-name]] | [[+tab-content]]</li>`]]

aaantz · October 7, 2020, 7:39pm

I just checked the error log and found this:

(ERROR @ /Applications/MAMP/htdocs/mysite/core/model/modx/modparser.class.php : 541) Could not find snippet with name getImageList

&value=`[{"MIGX_id":"1","tab-name":"Lorem","tab-content":"<p>Hello world</p>"},{"MIGX_id":"2","tab-name":"Ipsum","tab-content":"<p>Hi there</p>"}]`
&tpl=`innerTpl`.

halftrainedharry · October 7, 2020, 7:44pm

You probably have to add a ? after getImageList → [[getImageList? ...

aaantz · October 7, 2020, 7:47pm

Wow… okay. Done that, restarted server, deleted cache manually and now it magically started working.
Thank you very much for your patience and for getting this fixed!