Home › Toolset Professional Support › [Resolved] Outputting Repeatable Group as bootstrap Navs
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
Sun | Mon | Tue | Wed | Thu | Fri | Sat |
---|---|---|---|---|---|---|
- | 7:00 – 14:00 | 7:00 – 14:00 | 7:00 – 14:00 | 7:00 – 14:00 | 7:00 – 14:00 | - |
- | 15:00 – 16:00 | 15:00 – 16:00 | 15:00 – 16:00 | 15:00 – 16:00 | 15:00 – 16:00 | - |
Supporter timezone: Europe/London (GMT+00:00)
Tagged: Content Templates, Views plugin
Related documentation:
This topic contains 10 replies, has 2 voices.
Last updated by doronN-2 4 years, 11 months ago.
Assisted by: Nigel.
Tell us what you are trying to do? I'm trying to create a bootstrap "Navs" on a CPT page(hidden link). I'm trying to create the right HTML structure for is to work.
The logical structure is:
CPT "Tour". It has an Itinerary Day (Repeatable Group). Inside the Itinerary Day, there is Itinerary Item (Repeatable Group) with several fields + a "Day Title" (text field). see screenshot.
I use a content template for "Tour". To construct the HTML structure for Navs I need to first output the Day Title to serve as the nav tabs i.e
<ul class="nav nav-pills">
<li class="nav-item">
DAY 1
<li class="nav-item">
DAY 2
etc...
and for the nave content, I need to output the Itinerary Item SEPARATELY.
Again all should reside in the Tour content template,
What is the link to your site?
hidden link
Languages: English (English ) Spanish (Español )
Timezone: Europe/London (GMT+00:00)
When you look at the required markup for Bootstrap tabs it should become clear that you will need two Views for this.
One to generate the markup for the nav, and another to output the markup for the tabs.
In both cases the Content Selection will be your repeatable field group, you will want to choose a consistent ordering option (likely order by the field toolset-post-sortorder, which will use the same order as on the backend edit screens), and you will want to check the box to disable the wrapper div to keep the output markup simple.
The loop part of the output section of the first View—to output the nav—will look something like this:
<!-- wpv-loop-start --> <ul class="nav nav-tabs"> <wpv-loop> [wpv-item index=1] <li class="nav-item"> <a href="#tab-[wpv-post-id]" class="nav-link active" data-toggle="tab">[wpv-post-title]</a> </li> [wpv-item index=other] <li class="nav-item"> <a href="#tab-[wpv-post-id]" class="nav-link" data-toggle="tab">[wpv-post-title]</a> </li> </wpv-loop> </ul> <!-- wpv-loop-end -->
Note that the ul is outside the wpv-loop tags—it must be inserted only once—and we use the wpv-item shortcodes to output something different for the first iteration than the other iterations, namely the additional class required for the first active tab.
Similary, we use the same techniques for the second View, to display the tab content markup:
<!-- wpv-loop-start --> <div class="tab-content"> <wpv-loop> [wpv-item index=1] <div class="tab-pane fade show active" id="tab-[wpv-post-id]"> <p>Content to appear in tab goes here</p> </div> [wpv-item index=other] <div class="tab-pane fade" id="tab-[wpv-post-id]"> <p>Content to appear in tab goes here</p> </div> </wpv-loop> </div> <!-- wpv-loop-end -->
You would then insert each of these Views, one after the other, inside your template for single Tour posts.
Hey
That was my initial approach - separating into two views. But the issue is something else.
The first view is for "Itinerary Day" (the nav tabs) - it is set to Content Selection: Itinerary Day and the Query Filter section is set to "Select items from the Itinerary Day group that is a related to the current post in the loop." - that works fine - it outputs the relevant "Day title" field. (see "view - Itinerary Days" screenshot for reference)
The second view is for the "Itinerary Item" (Reminder - "Itinerary Item" is a nested Repeatable Group inside the "Itinerary day" Repeatable Group. see field-structure screenshot for reference). see the "Package - itinerary" screenshot for reference.
the last one - does not output anything (you can see a live example here hidden link). I guess this is Because the "Itinerary Item" is a child of " Itinerary Day", and it is, in turn, a child of the CPT tour. Played around with the "Query Filter" section - but could not find the right setting.
Not that in one tour item, the can be several days (i.e day one day two, etc), and inside each of them there can be several Itinerary Items.
The only time I could make it work was to call the view is for "Itinerary Item" inside the first view for Itinerary Day. but then the HTML was all wrong...
Hope it makes sense. let me know if you need anything else
Doron
Languages: English (English ) Spanish (Español )
Timezone: Europe/London (GMT+00:00)
In that case you will need three Views, one to output the navigation, and two to output the tab content.
In my example the nav and the tabs content both came from the same repeatable field group.
In yours it seems that the nav comes from one RFG while the content comes from a nested RFG. Presumably you will display all nested Itinerary Items as the content for each Itinerary Day tab.
So it's really just a question of reproducing the same as in my example, except where I have "Content to appear in tab goes here" you insert a 3rd View which is to display the nested Itinerary Items belonging to the outer Itinerary Day.
Thanks!
The 3 views solution worked great. Now arises another question - in the "Itinerary Days" views (I have two - one to output the navbar, and one for the tab content) I need to set a conditional - if No of day = 1 then output the proper HTML for one day (no need for tabs) if No day >= 2 output tabs. For some reason, this doesn't work, can you tell why?
[wpv-items-found] <!-- wpv-loop-start --> <ul class="nav nav-pills" id="tour-itineraries" role="tablist"> <wpv-loop> [wpv-conditional if="( '[wpv-post-count]' eq '1' )" debug="true"] Only one [wpv-post-count] [/wpv-conditional] [wpv-conditional if="( '[wpv-post-count]' gte '2' )" debug="true"] [wpv-post-count] [wpv-item index=1] <li class="nav-item"> <a href="#tab-[wpv-post-id]" class="nav-link active" data-toggle="tab">[types field='package_itinerary_day_title'][/types]</a> </li> [wpv-item index=other] <li class="nav-item"> <a href="#tab-[wpv-post-id]" class="nav-link" data-toggle="tab">[types field='package_itinerary_day_title'][/types]</a> </li> </wpv-loop> </ul> <!-- wpv-loop-end --> [/wpv-items-found]
Here you can see examples with debugging info
One day
hidden link
Two days
hidden link
Languages: English (English ) Spanish (Español )
Timezone: Europe/London (GMT+00:00)
What's the wpv-post-count shortcode?
Did you mean wpv-found-count?
https://toolset.com/documentation/user-guides/views/views-shortcodes/#wpv-found-count
The 'wpv-post-count' is one of the options when creating a conditional. Tried 'wpv-found-count'. I want that in the case of having only one day - it will not output anything. As you can see here:
hidden link
This doesn't work. The first condition is true - so it outputs <p>Only one output simple HTM</p>, but then it also goes in to the second condition - even the number of days is less than 2. in case of 1 I need it to out put difrrent HTML.
<wpv-loop> <!----> [wpv-conditional if="( '[wpv-found-count]' eq '1' )" debug="true"] <p>Only one output simple HTML</p> [/wpv-conditional] [wpv-conditional if="( '[wpv-found-count]' gte '2' )" debug="true"] <p>Two days or more - build nav tabs</p> [wpv-item index=1] <li class="nav-item"> <a href="#tab-[wpv-post-id]" class="nav-link active" data-toggle="tab">[types field='package_itinerary_day_title'][/types]</a> </li> [wpv-item index=other] <li class="nav-item"> <a href="#tab-[wpv-post-id]" class="nav-link" data-toggle="tab">[types field='package_itinerary_day_title'][/types]</a> </li> </wpv-loop>
Languages: English (English ) Spanish (Español )
Timezone: Europe/London (GMT+00:00)
Sorry for the delay getting back to you, it's been busy.
Looking at the code you shared above, you appear to be missing the closing /wpv-conditional shortcode in the second case.
You may encounter some problems mixing conditional shortcodes and wpv-item shortcodes in the Loop Editor, but in the meantime, fix the closing shortcode.
This is not the issue - as you can see here
hidden link
and here
hidden link
Any other thoughts?
Languages: English (English ) Spanish (Español )
Timezone: Europe/London (GMT+00:00)
Hmmm, I think it's probably because the wpv-item shortcodes are parsed before the wpv-conditional shortcodes, as I said mixing them can cause problems.
Try reformulating this so that you get rid of the wpv-item shortcodes so that each iteration is treated the same.
So you have a conditional to check if there is only one result, which generates your output without tabs, and a conditional which checks if there are multiple results, so that you can output it in tabs.
Then you have the problem that you want to add an additional class to the first result so that it is active.
Well you can do that using the wpv-loop-index shortcode in another conditional, to check whether it is the first loop iteration or not.
See https://toolset.com/documentation/user-guides/views/views-shortcodes/#wpv-loop-index
Yea - the wpv-item was the culprit. Thanks. I think all is good now.
Thanks!