Nested Zones? Or Nested Widgets?

Topics: Customizing Orchard, General, Writing modules
May 1, 2012 at 4:59 PM
Edited May 1, 2012 at 6:29 PM

Guys:

Is it possible to created a zone nested within a zone?  I want an Accordion control functionality where the content from the Accordion Control is derived from multiple widgets.  I can't figure out how to accomplish this or specifically get a wrapper around a group of widgets.  Any suggestions?

Ideally, it would be nice if the super user can add new widgets into an "Accordion" zone and those widgets get integrated into the control.  I want to produce HTML similar to:

<dl id="acc">
    <dt class="active">
        <a href="#">Short reviews</a>
    </dt>
    <dd class="active" style="display: block;">
        <p>Here are text of short review of something ...</p>
        <a class="more" href="#">Continue +</a>
    </dd>
    <dt>
        <a href="#">Short reviews #1</a>
    </dt>
    <dd style="display: none;">
        <p>Here are text of short review of something ...</p>
        <a class="more" href="#">Continue +</a>
    </dd>
    <dt>
        <a href="#">Short reviews #3</a>
    </dt>
    <dd>
        <p>Here are text of short review of something ...</p>
        <a class="more" href="#">Continue +</a>
    </dd>
</dl>
where each <dt><dd> pair represent a custom widget.  Any help would be greatly appreciated
Coordinator
May 1, 2012 at 5:32 PM

Of course: that's how content rendering works. The content zone has local zones which are what placement targets. What you can't do is put widgets into local zones (not without code at least).

In your case, you don't need to do that though. All you need is an alternate template for that zone.

May 1, 2012 at 7:54 PM
Edited May 1, 2012 at 7:59 PM

Do you have any references or examples you can point me to for creating an alternate for a zone?  

I'm not quite sure how to display the contents of the zone in an alternate:

Alternate template for Zone-Accordion.cshtml:

@{
    Script.Require("jQuery");
    Script.Include("accordion.js");
    
}
<dl id="acc">@Display(WorkContext.Layout.Accordion)</dl>

Thanks!

Coordinator
May 1, 2012 at 9:36 PM

I think you'll have to create the alternate first. Then it works like any alternate. Zones are just shapes.

May 1, 2012 at 9:41 PM
Edited May 1, 2012 at 9:42 PM

The code mentioned is the alternate if I understand correctly.  I ran the Shape Tracing and attempted to create an Alternate from my Zone (named "Accordion") under ~/Themes/Design2/Views/Zone-Accordion.cshtml.  I received a 500 Internal Server error because it cannot create an alternate from the original template: Orchard.Core.Shapes.CoreShapes::Zone.  So I'm manually creating the file Zone-Accordion.cshtml and it's picking it up, but I don't understand how to tell it to render the widgets in the Accordion zone (within the Zone-Accordion.cshtml file).

Am I misunderstanding something?

Coordinator
May 1, 2012 at 10:22 PM

Did you try @Display(Model.ChildContent) or @Display(Model.Child)?

May 1, 2012 at 10:57 PM

None of these examples are displaying the three widgets that are currently in my "Accordion" zone:

@{
    Script.Require("jQuery");
    Script.Include("accordion.js");
}
<dl id="acc1">
@foreach (var item in Model)
{
    Display(item.ChildContent);
}
</dl>

<dl id="acc2">
@foreach (var item in Model)
{
    Display(item.Child);
}
</dl>

<dl id="acc3">
@foreach (var item in Model)
{
    Display(item);
}
</dl>

<dl id="acc4">
    @Display(Model.Child)
</dl>

<dl id="acc5">
    @Display(Model.ChildContent)
</dl>

 

Coordinator
May 1, 2012 at 11:33 PM

Then put a breakpoint in there and examine Model.

Dec 11, 2013 at 6:06 PM
Edited Dec 11, 2013 at 6:07 PM
I know this post is old but I was running up against a similar challenge and found that you need to use DisplayChildren.

Something like this:
<dl id="acc">
    @DisplayChildren(Model)
</dl>
Hopefully this helps someone out in the future.