Passing a shared region into a template. Possible?

granttransition · Feb 13th 2019

I'm not sure this is possible and there might be a better way to implement. This is a Perch project (not Runway).

My client has a number of locations, let's call them 1 to 7.

When someone is viewing location 1, there needs to be a bar displaying locations 2 to 7. When on location 2, the bar needs to display 1, 3, 4, 5, 6 and 7 etc.

In the absence of collections. I was thinking I could have a template which lists all the locations (other_locations.html) and have that as a shared region. Hence the client only has to input the data once.

In a separate template (display_locations.html), I was thinking I could use checkboxes for each location. Hence when on location 1, the client could click the locations 2 - 7 to display them. These would refer to perch:if exists which surround the Locations.

I made a test template just to show both templates in a single working template. And that looks like this:

Code: Test Template

<perch:content type="checkbox" id="location1" value="1" label="Location One" surpress>
<perch:content type="checkbox" id="location2" value="1" label="Location Two" surpress>
<perch:content type="checkbox" id="location3" value="1" label="Location Three" surpress>
<perch:content type="checkbox" id="location4" value="1" label="Location Four" surpress>
<perch:content type="checkbox" id="location5" value="1" label="Location Five" surpress>
<perch:content type="checkbox" id="location6" value="1" label="Location Six" surpress>
<perch:content type="checkbox" id="location7" value="1" label="Location Severn" surpress>
<section class="section section-lg text-center bg-image bg-image-7">
<div class="shell-wide">
<div class="range range-xs-center range-50">
<perch:if exists="location1">
<div class="cell-sm-9 cell-md-6 cell-lg-3">
<div class="thumbnail-classic unit unit-sm-horizontal unit-md-vertical">
<div class="thumbnail-classic-caption unit-body">
<h6 class="thumbnail-classic-title"><perch:content id="title1" type="text" label="Title" required title></h6>
<hr class="divider divider-default divider-sm">
<p class="thumbnail-classic-text"><perch:content id="intro1" type="text" label="Introduction" required></p>
</div>
</div>
</div>
</perch:if>
<perch:if exists="location2">
<div class="cell-sm-9 cell-md-6 cell-lg-3">
<div class="thumbnail-classic unit unit-sm-horizontal unit-md-vertical">
<div class="thumbnail-classic-caption unit-body">
<h6 class="thumbnail-classic-title"><perch:content id="title2" type="text" label="Title" required title></h6>
<hr class="divider divider-default divider-sm">
<p class="thumbnail-classic-text"><perch:content id="intro2" type="text" label="Introduction" required></p>
</div>
</div>
</div>
</perch:if>
<perch:if exists="location3">
<div class="cell-sm-9 cell-md-6 cell-lg-3">
<div class="thumbnail-classic unit unit-sm-horizontal unit-md-vertical">
<div class="thumbnail-classic-caption unit-body">
<h6 class="thumbnail-classic-title"><perch:content id="title3" type="text" label="Title" required title></h6>
<hr class="divider divider-default divider-sm">
<p class="thumbnail-classic-text"><perch:content id="intro3" type="text" label="Introduction" required></p>
</div>
</div>
</div>
</perch:if>
<perch:if exists="location4">
<div class="cell-sm-9 cell-md-6 cell-lg-3">
<div class="thumbnail-classic unit unit-sm-horizontal unit-md-vertical">
<div class="thumbnail-classic-caption unit-body">
<h6 class="thumbnail-classic-title"><perch:content id="title4" type="text" label="Title" required title></h6>
<hr class="divider divider-default divider-sm">
<p class="thumbnail-classic-text"><perch:content id="intro4" type="text" label="Introduction" required></p>
</div>
</div>
</div>
</perch:if>
<perch:if exists="location5">
<div class="cell-sm-9 cell-md-6 cell-lg-3">
<div class="thumbnail-classic unit unit-sm-horizontal unit-md-vertical">
<div class="thumbnail-classic-caption unit-body">
<h6 class="thumbnail-classic-title"><perch:content id="title5" type="text" label="Title" required title></h6>
<hr class="divider divider-default divider-sm">
<p class="thumbnail-classic-text"><perch:content id="intro5" type="text" label="Introduction" required></p>
</div>
</div>
</div>
</perch:if>
<perch:if exists="location6">
<div class="cell-sm-9 cell-md-6 cell-lg-3">
<div class="thumbnail-classic unit unit-sm-horizontal unit-md-vertical">
<div class="thumbnail-classic-caption unit-body">
<h6 class="thumbnail-classic-title"><perch:content id="title6" type="text" label="Title" required title></h6>
<hr class="divider divider-default divider-sm">
<p class="thumbnail-classic-text"><perch:content id="intro6" type="text" label="Introduction" required></p>
</div>
</div>
</div>
</perch:if>
<perch:if exists="location7">
<div class="cell-sm-9 cell-md-6 cell-lg-3">
<div class="thumbnail-classic unit unit-sm-horizontal unit-md-vertical">
<div class="thumbnail-classic-caption unit-body">
<h6 class="thumbnail-classic-title"><perch:content id="title7" type="text" label="Title" required title></h6>
<hr class="divider divider-default divider-sm">
<p class="thumbnail-classic-text"><perch:content id="intro7" type="text" label="Introduction" required></p>
</div>
</div>
</div>
</perch:if>
</div>
</div>
</section>

Display More

It is possible in the location.php master page template to somehow, allow other_locations.html to be a shared region, and then pass it into display_locations.html

Hope this make sense

hus_hmd · Feb 14th 2019

Quote from granttransition

In the absence of collections. I was thinking I could have a template which lists all the locations (other_locations.html) and have that as a shared region. Hence the client only has to input the data once.

The closest thing to a collection in regular Perch is a multiple-item region. You can display the region on any page using the page option:

PHP

perch_content_custom('Locations', [
'page'=>'/locations/index.php',
'template'=>'locations_list.html',
]);

Collections are more powerful, but you get a lot of the same features like filtering. So if you are viewing the detail page of location 2, you can list the other locations and exclude location 2 with a filter. Assuming each location has a slug:

PHP

// details of location that has the same slug as the slug in the URL
perch_content_custom('Locations', [
'page'=>'/locations/index.php',
'template'=>'locations_detail.html',
'filter' => 'slug',
'match' => 'eq',
'value' => perch_get('s'),
'count' => 1
]);
// list of all locations excluding the location displayed above
perch_content_custom('Locations', [
'page'=>'/locations/index.php',
'template'=>'locations_list.html',
'filter' => 'slug',
'match' => 'neq',
'value' => perch_get('s'),
]);

Display More

granttransition · Feb 14th 2019

Thanks Hussein,

I've been playing with this and I'm little stuck!

Here is what I have.

PHP: /pages/location/index.php

<?php
include($_SERVER['DOCUMENT_ROOT'].'/control/runtime.php');
perch_layout('global/page-head');
perch_layout('global/header');
perch_content('Page Head');
perch_content('Page Introduction');
perch_content_custom('Location', [
'page'=> 'location/index.php',
'template'=> 'location/location_detail.html',
'filter' => 'slug',
'match' => 'eq',
'value' => perch_get('s'),
'count' => 1
]);
?>
<section class="section section-lg text-center bg-image bg-image-7">
<div class="shell-wide">
<div class="range range-xs-center range-50">
<?php
perch_content_custom('Location', [
'page'=> 'location/index.php',
'template'=> 'location/location_list.html',
'filter' => 'slug',
'match' => 'neq',
'value' => perch_get('s'),
]);
?>
</div>
</div>
</section>
<?php
perch_layout('global/footer');
PerchUtil::output_debug();
?>

Display More

HTML: /content/location/location_detail.html

<section class="section section-lg section-2-columns bg-gray-lighter">
<div class="shell shell-bigger">
<div class="range range-ten range-50 range-sm-center range-md-middle range-lg-justify">
<div class="cell-sm-9 cell-md-5 cell-xl-4">
<h3><perch:content id="title" type="text" label="Location title" required title><perch:content id="slug" type="slug" for="title"></h3>
<div class="divider divider-default"></div>
<p class="heading-5"><perch:content id="sectionLeader" type="text" label="Section leader text" required size="large"></p>
<p class="text-spacing-sm"><perch:content id="sectionText" type="textarea" label="Section text" required size="large"></p>
</div>
<div class="cell-sm-9 cell-md-5"><img src="<perch:content type="image" id="sectionIntroImage" label="Introduction Image" help="Image size 720x459">" alt="<perch:content type="text" id="alt" label="Image description" required help="Please describe the image" title>" width="720" height="459"/>
</div>
</div>
</div>
</section>

Display More

HTML: /content/location/location_list.html

<div class="cell-sm-9 cell-md-6 cell-lg-3">
<div class="thumbnail-classic unit unit-sm-horizontal unit-md-vertical">
<div class="thumbnail-classic-caption unit-body">
<h6 class="thumbnail-classic-title"><perch:content id="title" type="text" label="Location title" required></h6>
<hr class="divider divider-default divider-sm">
<p class="thumbnail-classic-text"><perch:content id="sectionLeader" type="text" label="Section leader text"></p>
</div>
</div>
</div>

This results in neither template displaying on the location page?

hus_hmd · Feb 14th 2019

Have you created the multiple-item region Location on /location/index.php? Is the region key Location or is it missing s at the end?

Enabling debug mode should be helpful here.

granttransition · Feb 14th 2019

I never got this working Hussein. But wanted to thank you never-the-less. I did get the client to upgrade to Runway though! Happy days.