Is there a way to divide an entry's data into multiple subviews with unique URLs?

Question

I have a one-level structure where I am storing a client's projects, with the ability to reorder them by dragging the entries in the structure.

Each project has been designed to have multiple subpages of information available, accessible by clicking on tabs, where each tabbed view shows a subset of the project data.

Ideally, each tab would have its own URL so I can deep-link to the subpages, each served by a different template, but load in the views via ajax when a tab is clicked on. Is it possible to derive multiple child views with distinct templates from a single entry, without having to manually add child tab entries for every project, which I definitely don't want to make the client do?

The alternative would be to load in all the tabs on initial page load, and show and hide them as they're clicked on, and use pushstate to deep link to those tabs, but I'd rather have them as proper server side URLs, I think.

Does anyone know if this is possible?

Answer 1

Disclaimer: I haven't ever used structure, but hopefully the method described below also works for that section type.

You can do this quite easily with URL-segments

Consider a URL like so:

http://www.domain.com/section/entry/

http://www.domain.com/section/entry/subview-1

And so on.

The section/entry route will hit your entry template, but you can create a new route

section/{slug}/*

And point it to your subview template.

There, you ask craft for whatever is in URL segment 3 like so:

craft.request.getSegment(3)

And display content based on that.

To get the entry you are on currently, just filter on segment 2 like so:

{% for entry in craft.entries.section('section').slug(craft.request.getSegment(2)) %}
    {{ entry }}

{% endfor %}

Answer 2

In addition to using the url segments as megatrond suggested. You can also define 'Entry Types', and use if..then conditionals or switch statements in your template to modify the layout or include different sub-templates, as required.

{% if entry.type == 'project' %}
    {% include '/projects/_tabbed-entry' %}
{% endif %}

Furthermore you can use levels and other heirarchy tools (descendants, ancestors, parent, etc) to dynamically construct navigation and/or tabs, such that, for example, the top 2 or 3 levels can be used for your primary navigation, and subsequent levels can be used to construct tabs or sub-nav on the page.

{# build primary nav #}
{% set navEntries = craft.entries.section('pages').level('<= 2') %}
<ul class="nav__level1">
    {% nav entry in navEntries %}
        <li>
            <a href="{{ entry.url }}"><span>{{ entry.title }}</span></a>
            {% ifchildren %}
                <ul class="nav__level{{ entry.level + 1 }}">
                    {% children %}
                </ul>
            {% endifchildren %}
        </li>
    {% endnav %}
</ul>

And for tabs (which works equally well for subnav):

{# build tabs #}
{% set tabEntries = entry.parent.descendants(1) %}
<ul class="tabs">
    {% for tabEntry in tabEntries %}
        <li class="tab" >
            <a href="{{ tabEntry.url }}" {% if tabEntry.id == entry.id %}class="selected"{% endif %} >{{ tabEntry.title }}</a>
        </li>
    {% endfor %}
</ul>

<div class="page-content">
    {{ entry.body }}
</div>

The examples above will link to each sub-page/tab as a unique url. However, if you want to load the tab content via ajax then you can specify which part of the template is returned in the ajax request, using craft.request.isAjax. This would allow you to essentially load the template into itself if you wanted:

{% if craft.request.isAjax %}
    {# return only the content #}
{% else %}
    {# return the full page with header, nav, content, etc. #}
{% endif %}