Forum

Thread tagged as: Question

Nesting Regions for Single Page application

Hi,

Is there a way of nesting regions. I am creating a single page application and would like the editors to be able to navigate the hierarchy of the page (even though there is only one) instead of having a flat list of editable regions.

For example my single page is split into sections. Would be nice to have potentially a different template for each section. But inside each section i might want another template and the inner template my need to be repeatable.

An example is a "Who we are" section, inside the who we are section will be a title and a list of 'User groups' each group will have a title and a list of users.

Here i would envisage - a Who we are template with a title and a nested user group template - a user group template with a title and a nested user template - a user template with the markup for a single user

However it appears you cannot have repeatable nested templates? Is there a better way to achieve what i am trying to do or will i have to stick with having a flatter set of regions on my page i.e.

Section Title region Group title region users region Group title region users region

Thanks in advance for your help.
Edward Sparkes

Edward Sparkes 0 points

  • 5 years ago
Simon Clay

Simon Clay 127 points

5 years ago

Hi Edward,

I achieve something very similar on a site of mine using a combination of Multiple Item Regions, Blocks and Repeaters

The editor can add a new section by adding another 'region'. Here they can choose the section heading and the colour/texture of the background. Next they choose the type of content with blocks, some of the blocks have repeating regions within them to allow for multiple items inside blocks.

Here is my template, feel free to pick through it to see if the method helps you :)

<section class="<perch:content id="background" type="select" label="Section Background" 
options="White|whitebg, Gray|gray, Section Colour|flat-colour, Texture|texture, Brushed Steel|steel" allowempty="false" required="true" /> <perch:content id="hide_section" type="radio" label="Section Visibility" options="Visible|visible,Hidden|hidden" default="visible" order="3" help="Use this to hide this whole section from view, for example: until you are happy with the content." />">

    <div class="container ptb40">

        <perch:if exists="heading AND !hide_heading"><h2><perch:content id="heading" type="text" label="Section Title" title="true" order="1" /></h2></perch:if>
        <perch:content id="hide_heading" type="checkbox" label="Hide Heading" value="1" order="2" suppress="true" divider-before="Section options" />

        <perch:blocks divider-before="Section Content">

            <!--*TEXT OR IMAGE*-->
            <perch:block type="text" label="Text or Image Row">
                <div class="row">
                    <perch:repeater id="text_img" label="Text or Image" max="4">

                        <perch:if exists="text">
                            <div class="<perch:content id="width" type="select" label="Width" options="Full|col-sm-12, Half|col-sm-6, Third|col-sm-4, Quarter|col-md-3" allowempty="false" required="true" />">
                                <perch:content id="text" type="textarea" label="Text" html="true" editor="redactor" imagewidth="750" />
                            </div>
                        </perch:if>

                        <perch:if exists="image">
                            <div class="<perch:content id="width" type="select" label="Width" options="Full|col-sm-12, Half|col-sm-6, Third|col-sm-4, Quarter|col-md-3" allowempty="false" required="true" />">
                                <img class="img-responsive" src="<perch:if id="width" value="col-sm-12"><perch:content type="image" id="image" label="or Image" width="1140" help="Image should be at least 1140px and max 2500px before uploading" /><perch:else /><perch:content type="image" id="image" label="Image" width="750" /></perch:if>" alt="<perch:content type="text" id="alt" label="Description" />" />
                            </div>
                        </perch:if>

                    </perch:repeater>
                </div>
            </perch:block>

            <!--*FEATURE BOX*-->
            <perch:block type="feature_box" label="Feature Box Row">
                <div class="row row-eq-height">
                    <perch:repeater id="feat_boxes" label="Feature Box" max="4">
                        <div class="<perch:content id="width" type="select" label="Width" options="Half|col-sm-6, One Third|col-sm-4, Two Thirds|col-sm-8, Quarter|col-md-3" allowempty="false" required="true" />">
                            <div class="feature-box <perch:if exists="link_text">has-link</perch:if>">
                                <perch:if exists="feature_image"><img class="img-responsive"  src="<perch:content type="image" id="feature_image" label="Image" width="740" height="450" crop="true" help="Optimal image size 740px x 450px" />" alt="<perch:content id="heading" type="text" label="Heading" title="true" size="xl" order="1" />" /></perch:if>

                                <perch:if exists="heading">
                                    <h3><perch:content id="heading" type="text" label="Main Heading" title="true" /></h3>
                                </perch:if>

                                <perch:content id="text" type="textarea" label="Text" html="true" editor="redactor" imagewidth="750" divider-after="OPTIONS:" />


                                <perch:if exists="price">
                                    <div class="price">
                                        Price: <perch:content id="price" type="text" label="Price" title="true" divider-before="Single Price" />
                                    </div>  
                                </perch:if>


                                <!--*Dropdown Content Option*-->
                                <perch:if exists="sub_heading">
                                    <div class="panel-group" role="tablist" aria-multiselectable="true">
                                      <div class="panel panel-default">
                                        <div class="panel-heading" role="tab" id="heading<perch:content id="perch_item_index" type="hidden" />">
                                          <h4 class="panel-title">
                                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse<perch:content id="heading" type="text" label="Main Heading" title="true" urlify="true" /><perch:content id="perch_item_index" type="hidden" />" aria-expanded="true" aria-controls="collapseOne">
                                              <perch:content id="sub_heading" type="text" label="Dropdown Heading" title="true" help="This will be the link to the dropdown content" divider-before="Multiple prices in dropdown list" />
                                            </a>
                                          </h4>
                                        </div>
                                        <div id="collapse<perch:content id="heading" type="text" label="Main Heading" title="true" urlify="true" /><perch:content id="perch_item_index" type="hidden" />" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                                          <div class="panel-body">
                                            <perch:content id="dropdown_text" type="textarea" label="Dropdown Content" html="true" editor="redactor" imagewidth="750" />
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                </perch:if>


                                <perch:if exists="link_text"><a class="btn btn-primary pull-right" href="<perch:content id="page" type="pagelist" label="Link to Page" divider-before="Link to another page" />"><perch:content id="link_text" type="text" label="Link Text" />  <span class="fa fa-angle-right"></span></a></perch:if>
                            </div>
                        </div>
                    </perch:repeater>
                </div>
            </perch:block>

            <!--*FULL WIDTH FEATURE BOX*-->
            <perch:block type="feature_box_full_width" label="Full Width Feature Box">
                <div class="row">
                    <perch:repeater id="feat_boxes" label="Feature Box">

                        <perch:if exists="timeline">
                        <div class="col-sm-1 calendar">
                            <perch:content id="perch_item_rev_index" type="hidden" />
                        </div>
                        <div class="col-sm-11">
                        <perch:else />
                        <div class="col-sm-12">
                        </perch:if>
                            <div class="feature-box full-width <perch:if exists="link_text">has-link</perch:if>">
                                <perch:if exists="feature_image"><img class="img-responsive"  src="<perch:content type="image" id="feature_image" label="Image" width="740" height="450" crop="true" help="Optimal image size 740px x 450px" />" alt="<perch:content id="heading" type="text" label="Heading" title="true" size="xl" />" /></perch:if>
                                <perch:if exists="heading">
                                    <h3><perch:content id="heading" type="text" label="Heading" title="true" /></h3>
                                </perch:if>
                                <perch:content id="text" type="textarea" label="Text" html="true" editor="redactor" imagewidth="750" />

                                <perch:content id="timeline" type="checkbox" label="Show as timeline?" value="yes" suppress="true" divider-before="OPTIONS:" />

                                <perch:if exists="price">
                                    <div class="price">
                                        Price: <perch:content id="price" type="text" label="Price" title="true" divider-before="Price (optional)" />
                                    </div>  
                                </perch:if>

                                <perch:content id="timeline1" type="checkbox" label="Show?" value="yes" suppress="true"  />

                                <perch:if exists="link_text"><a class="btn btn-primary" href="<perch:content id="page" type="pagelist" label="Link to Page" divider-before="Link to another page (optional)" />"><perch:content id="link_text" type="text" label="Link Text" />  <span class="fa fa-angle-right"></span></a></perch:if>
                            </div>
                        </div>
                    </perch:repeater>
                </div>
            </perch:block>

            <!--*FAQS*-->
            <perch:block type="faqs" label="FAQs">
                <perch:repeater id="faq" label="FAQ">

                    <perch:if exists="perch_item_first">
                        <div class="row">
                    </perch:if>

                    <div class="faq col-sm-6">
                          <h3>
                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse_<perch:content id="perch_item_index" type="hidden" />" aria-expanded="false" aria-controls="collapse_<perch:content id="perch_item_index" type="hidden" />">
                              <perch:content id="heading" type="text" label="Question" title="true" size="xl" /></a>
                          </h3>
                        <div id="collapse_<perch:content id="perch_item_index" type="hidden" />" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading_<perch:content id="perch_item_index" type="hidden" />">
                          <div>
                            <perch:content id="text" type="textarea" label="Answer" html="true" editor="redactor" imagewidth="750" />
                          </div>
                        </div>
                    </div>


                    <perch:if not-exists="perch_item_last">
                        <perch:every count="2">
                            </div>
                            <div class="row">
                        </perch:every>
                    <perch:else />
                        </div>
                    </perch:if>

                </perch:repeater>
            </perch:block>

            <!--*LINK BUTTONS*-->
            <perch:block type="link_buttons" label="Link Buttons">
                    <div class="ptb40">
                        <perch:repeater id="links" label="Links">
                            <a class="btn btn-default btn-lg" href="<perch:content id="link_to_page" type="pagelist" label="Link to Page" order="2" /><perch:content id="url" type="text" label="or external page" help="Please include https:// if linking to an external site." /><perch:content id="file" type="file" label="or File" />"><perch:content id="link_text" type="text" label="Link Text" order="2" /></a>
                        </perch:repeater>
                    </div>
            </perch:block>

            <!--*GALLERY*-->
            <perch:block type="gallery" label="Gallery">
                <div class="row gallery">
                    <perch:repeater id="gallery_item" label="Gallery item" >

                        <div class="gallery-item col-sm-6">
                            <img class="img-responsive" src="<perch:if exists="image"><perch:content type="image" id="image" label="Image" width="750" height="450" crop="true" /><perch:else />https://placehold.it/750x450</perch:if>" alt="<perch:content type="text" id="alt" label="Description" size="xxl" />" />

                            <perch:if exists="alt">
                            <div class="caption">
                                <perch:content type="text" id="alt" label="Description" />
                            </div>
                            </perch:if>
                        </div>

                    </perch:repeater>
                </div>
            </perch:block>

            <!--*TEAM INTRO*-->
            <perch:block type="team_intro" label="Team Intro">
                <div class="row team-intro">

                    <div class="col-sm-3 col-xs-6">
                        <img class="img-responsive" src="<perch:content type="image" bucket="team" id="image1" label="Team Member Image" width="355" height="486" crop="true" else="https://placehold.it/355x486?text=No photo yet." />" alt="<perch:content type="text" id="alt1" label="Description" />">
                        <div class="caption">
                            <perch:content type="text" id="alt1" label="Description" />
                        </div>
                    </div>

                    <perch:if exists="image2">
                    <div class="col-sm-3 col-xs-6">
                        <img class="img-responsive" src="<perch:content type="image" bucket="team" id="image2" label="Team Member Image" width="355" height="486" crop="true" else="https://placehold.it/355x486?text=No photo yet." />" alt="<perch:content type="text" id="alt2" label="Description" />">
                        <div class="caption">
                            <perch:content type="text" id="alt2" label="Description" />
                        </div>
                    </div>
                    </perch:if>

                    <div class="<perch:if exists="image2">col-sm-6<perch:else />col-sm-9</perch:if> lead">
                        <perch:content id="text" type="textarea" label="Team Introduction Text" html="true" editor="redactor" imagewidth="750" />

                        <perch:if exists="page">
                            <a class="btn btn-primary btn-lg" href="<perch:content id="page" type="pagelist" label="Link to Team Page?" allow-empty="true" help="This will create a button below the intro text." />"><perch:content type="text" id="link_text" label="Link Text" /> <i class="fa fa-angle-right"></i></a>
                        </perch:if>
                    </div>

                </div>
            </perch:block>

        </perch:blocks>

    </div> <!--close container-->

</section> <!--close section-->
Edward Sparkes

Edward Sparkes 0 points

5 years ago

Thanks, sounds promising , i will have a good look through.

Ed