Forum

Thread tagged as: Question

Creating Repeating Regions for Tabulated Content

Hi Everyone,

I know there is a way to do this through Perch but at this point I'm stuck and confused, it would be great if someone could help me out here.

Sample Code:

<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li><a href="#<perch:content type="text" id="TabHeadingURL" label="Test" title="true" />" data-toggle="tab">  <perch:content type="text" id="TabHeading" label="Tab Heading" title="true" /></a></li>                   
 </ul>            

<div class="tab-pane fade" id="<perch:content id="TabHeadingURL" type="hidden" />">
<perch:content id="body" type="textarea" label="Tab Body" textile="true" editor="redactor" />
</div>

Everything inside <ul></ul> is the name of the tab and everything inside the <div class=tab-pane fade></div> is the content of each tab. The problem I am facing here is every additional tab must exist within <ul></ul> as <li></li>. In addition, to add content to each tab a new <div class="tab-pane fade"></div> must be created for the new tab's content area.

In order to ensure that the ID for each <li></li> is different to match the URL within the div I've added: <perch:content id="TabHeadingURL" type="hidden" />.

I used perch:repeaters to add tabs <li></li> but I'm lost in how I can create duplicate <div class="tab-pade fade"></div> for the content of each tab.

Could anyone point me in the right direction?

<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<perch:repeater id="TabContent" label="Tab Content">
<li><a href="#<perch:content type="text" id="TabHeadingURL" label="Test" title="true" />" data-toggle="tab"> 
<perch:content type="text" id="TabHeading" label="Tab Heading" title="true" /></a></li>
</perch:repeater>                   
</ul>            

<div class="tab-pane fade" id="<perch:content id="TabHeadingURL" type="hidden" />">
<perch:content id="body" type="textarea" label="Tab Body" textile="true" editor="redactor" />
</div>

Essentially, I'm trying to create a CONTENT template for using repeating regions in which I can add as many tabs with contents as possible.

Here is an example of the tabulated page not yet managed by perch: https://kbisksa.com/violet/admissions.html

Sincerely, Hellroaster!

Junaid Kapadia 0 points

7 years ago

Robert Ketter 103 points

7 years ago

Junaid... I tested this and it works, but I am not sure if there is a better way. It takes (2) templates and perch_content_custom()

template (sample1.html)

<perch:content id="group" type="text" label="Group ID" title="true" suppress="true" /><!-- for grouping, filter on this field -->
<perch:repeater id="tabs" label="Tabs">
<perch:content id="tab" type="text" label="Tab Title" />
<perch:content id="tabSlug" type="slug" for="tab" />
<perch:content id="div" type="textarea" label="Description" html="true" editor="redactor" />
</perch:repeater>

template (sample2.html)

<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<perch:repeater id="tabs" />
<li><a href="#<perch:content id="tabSlug" />" data-toggle="tab"><perch:content id="tab" /></a></li>    
</perch:repeater>
</ul>            
<perch:repeater id="tabs" />
<div class="tab-pane fade" id="<perch:content id="tabSlug" />">
<perch:content id="div" />
</div>
</perch:repeater>

region (sample.php)

<?php

perch_content_create('divs', array(
    'template'=>'sample1.html',
    'multiple'=>true,
    'sort'=>'group',
    'sort-order'=>'ASC'
));

$opts = array(
    'template'=>'sample2.html',
    'filter'=>'group',
    'match'=>'eq',
    'value'=>perch_get('g')
);

perch_content_custom('divs', $opts);

?>

I hope this helps, let me know.

Junaid Kapadia 0 points

7 years ago

Hi Robert,

This really helps! Thank you! But I was hoping you could clarify a few things for me here (bear with me fairly novice in PHP):

 <perch:content id="group" type="text" label="Group ID" title="true" suppress="true" /><!-- for grouping, filter on this field -->

I was a bit confused as to what was actually going on here, could you enlighten me?

perch_content_custom() - I'm new to using perch_content_custom and was just looking over the documentation. Just to clarify, I don't necessarily have to place the content of sample.php above into sample.php and then call upon correct? I mean I can just go ahead and drop that into my desired region on my Master Page and that should work fine?

Here is what my Master Page Looks like:


<?php include($_SERVER['DOCUMENT_ROOT'].'/perch/runtime.php'); ?>
<!DOCTYPE html>
    <?php perch_layout('iexplorer.header'); ?>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title><?php perch_pages_title(); ?></title>
    <?php perch_layout('global.header'); ?>
</head>
<body>

  <?php perch_content('Header & Navigation'); ?>
        <!-- Begin Tabulated Container --> 
 <div class="container">
        <div class="row">
            <div class="col-md-12">

                <div class="widget-main">
                    <div class="widget-inner shortcode-typo">
                        <div class="row">
                            <div class="col-md-12">
                                <h4><perch:content type="text" id="MainPageHeading" label="Main Page Heading" title="true" /></h4>
                                <!-- Nav tabs -->


    <?php

perch_content_create('divs', array(
    'template'=>'sample1.html',
    'multiple'=>true,
    'sort'=>'group',
    'sort-order'=>'ASC'
));

$opts = array(
    'template'=>'sample2.html',
    'filter'=>'group',
    'match'=>'eq',
    'value'=>perch_get('g')
);

perch_content_custom('divs', $opts);

?>




                                </div>
                            </div>

                    </div> <!-- /.widget-inner -->
                </div> <!-- /.widget-main -->

            </div> <!-- /.col-md-12 -->
        </div> <!-- /.row -->
    </div> <!-- /.container -->
<!-- End Tabulated Contain -->

    <?php perch_layout('global.footer'); ?>
</body>
</html>

Again, please do excuse my limited knowledge on this but your help is most appreciated!

Junaid Kapadia 0 points

7 years ago

Hi Robert,

I've been thinking, there should be way to do this within a single template:



<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">


<perch:repeater id="tabs" />
<li><a href="#<perch:content id="tabSlug" type="slug" for="title" /> " data-toggle="tab"> <perch:content id="title" type="text" label="Title" /></a></li> 

<perch:after>
</ul> 
<div id="my-tab-content" class="tab-content">
</perch:after>
</perch:repeater>



<div class="tab-pane fade" id="<perch:content id="tabSlug" type="slug" for="title" />">
<perch:content id="div" type="textarea" label="Description" html="true" editor="redactor" />
</div> 
</div>

The problem here is that I need the div class to repeat separately yet in the editor it should be shown as one...I could put repeaters around the div class within the same file but a 2nd repeater cannot access the TabSlug from repeater id = "tabs."

Essentially I'm looking to have it display in Perch like this:



<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">


<perch:repeater id="tabs" />
<li><a href="#<perch:content id="tabSlug" type="slug" for="title" /> " data-toggle="tab"> <perch:content id="title" type="text" label="Title" /></a></li> 

<perch:after>
</ul> 
<div id="my-tab-content" class="tab-content">
</perch:after>


<div class="tab-pane fade" id="<perch:content id="tabSlug" type="slug" for="title" />">
<perch:content id="div" type="textarea" label="Description" html="true" editor="redactor" />
</div> 



</perch:repeater>
</div>

But by wrapping the div class within the same repeater Perch will be outputting the entire length of code each time.

Any ideas?

Robert Ketter 103 points

7 years ago

Junaid, My reason for (2) templates is simply so you can use perch_content_custom() to put all the divs together.

The id="group" allows you to display a filtered (or select) set of tabs/divs using ?g=groupname otherwise if you have made several tab/div's perch will output all of them in a list.

Lets say you create a tab/div group "Pants" and another "Shirts". Now on the page you want to output shirts you would add ?g=Shirts and only the tab/div group of Shirts will be output. If you bade (2) tab/div groups with "Shirt" then both would be output in a list (or one after the other)

Since I do not know exactly how you plan to use the code, I just make enough of a sample to inspire and teach. Hopefully this makes sense.

Dave Beazer 0 points

7 years ago

Hey Junaid,

Did you ever get this sorted. I'm currently trying to do a pretty similar thing where I have list items and linked to them (outside the list) I have modal divs. I'm pretty new to Perch and not entirely sure how it all slots together but after searching through the forums this looked like the closest thing to what i'm trying to do.

Any pointers you can give on how you got this working would be great. Even just a high level overview.

Cheers, Dave