Multi-page Template Design

(Rob) #1

Hi folks,

I’m trying to get my head around creating a multi-page style design that was deprecated a while ago.

To give you an idea of what I’d like to emulate, i’ve included a link to a UK governments page template.

Key components

  • Each list item in the menu creates a new url
  • The content is displayed on the same page (although technically it isn’t the same page)
  • There is a prev / next link

So far, i’ve tried creating a dynamic asset listing which looks at the root node of the asset and i’m embedding it in the standard page. This all works fine, but i’m having trouble working out how I can change the url and display the content whilst maintaing the illusion that the user is on the same page (similar to the multi-page asset).

I could use content container divs and link to the ID of the div by setting the description but that requires people creating the asset to go in and add underscores to the description to get the link to work.

I feel like I’m going in the right direction but as always, i’m relatively new to the matrix so hoping for some pointers!

Thank you as always!

Rob

(Tbaatar) #2

Have you looked into Design Customization and Sub Menu breadcrumb?
or Related Page Asset Listing or SSJS?

The Gov UK site you have shared as an example is just a simple list of links and all the pages has the same Template. Since the GovUK site is meant to be super simple to use there isn’t really a great deal of design therefore it feels as if the linked pages is loading in via Ajax but infact the page does refresh.

The only trickery used is it retains the parent page title. This is super easy to achieve with Matrix via asset lineage, as long as the sub pages is underneath the parent.

#3

You can achieve the basic structure with 2 similar paint layouts. A simple implementation follows.
As per GovUK this refers to the parent page as ‘Overview’.

For the child pages (apply as paint layout at parent):

<h1>%asset_parent^as_asset:asset_name%</h1>
<nav>
    <h2>Contents</h2>
    <ul>
        <li><a href="%asset_parent^as_asset:asset_url%">Overview</a></li>
        %globals_asset_contents_raw:999999^with_get:root={asset_parent}%
    </ul>
</nav>
<h1>%asset_name%</h1>
%asset_contents%
%begin_asset_sibling_prev_type_1%
    <div class="prev"><a href="%asset_sibling_prev_type_1^as_asset:asset_url%">Prev<br>%asset_sibling_prev_type_1^as_asset:asset_name%</a></div>
%else_asset%
    <div class="prev"><a href="%asset_parent^as_asset:asset_url%">Prev<br>Overview</a></div>
%end_asset%
%begin_asset_sibling_next_type_1%
    <div class="next"><a href="%asset_sibling_next_type_1^as_asset:asset_url%">Next<br>%asset_sibling_next_type_1^as_asset:asset_name%</a></div>
%end_asset%

For the parent (apply as override paint layout at parent):

<h1>%asset_name%</h1>
<nav>
    <h2>Contents</h2>
    <ul>
        <li>Overview</li>
        %globals_asset_contents_raw:999999^with_get:root={asset_assetid}%
    </ul>
</nav>
<h1>Overview</h1>
%asset_contents%

In both, 999999 is an asset listing page with get parameter ‘root’ as replacement root node.
In the default format, check for current page and don’t hyperlink it:

%begin_asset_assetid^eq:{frontend_asset_assetid}%
    <li>%asset_name%</li>
%else_asset%
    <li>%asset_name_linked%</li>
%end_asset%

This example is missing a ‘Next’ link to the first child page at the bottom of the parent. You can either nest an asset listing that is limited to the first child, or you can look at using %asset_children% (not supported on my version currently) and SSJS.

This thread demonstrates that aspect:

(Rob) #4

Thank you folks! You’re both legends :slight_smile: I’ll see how I get on with the above and report back! Really appreciate the help as ever. Sometimes it’s knowing what are the right tools for the job as I get the feeling there are more ways to skin a banana in Squiz…