Blocks in list detail mode
I am having some strange issues using blocks in list and detail mode. I am trying to reuse some data from one of the blocks sections in my list item: dates for an event. It seems that this will only work if I wrap the whole list template in <perch:blocks></perch:blocks> which is fine, except that as it is a multiple item region when another event is added it is creating another <perch:blocks> tag and breaking things. <perch:before> and <perch:after> stop any output whatsoever onto the page as they are removing the <perch:blocks> tag. Without them it obviously outputs the whole template multiple times rather than just the section I want repeating. On top of this if I dont use the block section (which is optional as not all list items will have dates associated to them) then no other information is output.
What is the correct way to reuse the data from the perch blocks section in a listing template?
List page:
perch_content_custom('Courses', array(
'template' => 'listing.html',
));
List Template:
<perch:before>
<perch:blocks scope-parent="true">
<div class="listing">
<div class="row row--pad-none-bottom">
<div class="page-width page-width--content">
<h2 class="listing__title">Upcoming training courses</h2>
<ul class="listing__list listing__list--booking">
</perch:before>
<li class="listing__list__item">
<div class="listing__list__item__image">
<a href="training-detail/<perch:content id="parent.slug" type="slug" />">
<img src="<perch:content type="image" id="parent.heroImage" width="800" height="600" crop="true" bucket="banners" />" alt="<perch:content id="heroTitle" />" />
</a>
</div><!--/listing__list__item__image-->
<div class="listing__list__item__info">
<a href="training-detail/<perch:content id="parent.slug" type="slug" />">
<h3 class="listing__list__item__info__title"><perch:content id="parent.heroTitle" /></h3>
</a>
<p class="listing__list__item__info__text"><perch:content id="parent.excerpt" chars="200" append="..." /></p>
<div class="listing__list__item__info__buttons">
<div class="listing__list__item__info__buttons__button">
<a class="btn btn--green" href="/" ><strong>Book</strong></a>
</div><!--/listing__list__item__info__buttons__button-->
<div class="listing__list__item__info__buttons__button">
<a class="btn btn--green" href="training-detail/<perch:content id="parent.slug" type="slug" />" ><strong>Info</strong></a>
</div><!--/listing__list__item__info__buttons__button-->
</div><!--/list__item__info__buttons-->
</div><!--/list__item__info-->
<perch:block type="location" label="Location Block">
<div class="listing__list__item__dates">
<div class="wrapper">
<perch:template path="content/date.html" />
</div><!--/wrapper-->
<div class="listing__list__item__dates__extra">
<p><strong><perch:content id="time" /></strong></p>
<p><strong>£<perch:content id="price" /></strong></p>
</div><!--/listing__list__item__dates__time-->
</div><!--/list__item__dates-->
</perch:block>
</li>
<perch:after>
</ul>
</div><!--/page-width-->
</div><!--/row-->
</div><!--/listing-->
</perch:blocks>
</perch:after>
Detail Template:
<perch:content id="slug" for="heroTitle" type="slug" suppress="true" />
<perch:template path="content/hero.html" />
<perch:content id="excerpt" type="textarea" label="Excerpt For Listing Page" size="s" suppress="true" help="Maximum 200 charachters." count="chars" />
<perch:blocks divider-before="Choose content blocks to suit, you can use as many or as few as you want, you can even re-order them.">
<perch:block type="location" label="Location Block">
<perch:template path="content/location.html" />
</perch:block>
<perch:block type="text" label="Text Block">
<perch:template path="content/defaults/text_block.html" />
</perch:block>
<perch:block type="testimonial" label="Testimonials Block">
<perch:template path="content/testimonials.html" />
</perch:block>
<perch:block type="carousel" label="Carousel Block">
<perch:template path="content/carousel.html" />
</perch:block>
<perch:block type="driver" label="Driver Block">
<perch:template path="content/driver.html" />
</perch:block>
<perch:block type="driverMedia" label="Media Driver Block">
<perch:template path="content/driver-media.html" />
</perch:block>
<perch:block type="people" label="People Block">
<perch:template path="content/people.html" />
</perch:block>
</perch:blocks>
Location Template (where the dates are residing)
<div class="page-width page-width--content">
<div class="row row--pad-none-bottom">
<div class="location">
<div class="location__info">
<div class="location__info__meta">
<perch:if exists="dates">
<div class="location__info__meta__date location__info__meta--col"><perch:template path="content/date.html" /></div>
</perch:if>
<perch:if exists time OR price>
<div class="location__info__meta--col">
<perch:if exists="time">
<p class="location__info__meta__time"><strong><perch:content id="time" type="text" label="Time Of Event" /></strong></p>
</perch:if>
<perch:if exists="price">
<p class="location__info__meta__price"><strong>£<perch:content id="price" type="text" label="Price Of Event" /></strong></p>
</perch:if>
</div><!--/location__info__meta-col-->
<perch:if exists="btnLink OR btnText">
<div class="location__info__meta__button location__info__meta--col">
<a class="btn btn--green" href="<perch:content id="btnLink" type="text" label="Button Link" />" ><strong><perch:content id="btnText" type="text" label="Button Text" /></strong></a>
</div>
</perch:if>
</div><!--/location__info__meta-->
<perch:if exists="address">
<div class="location__info__text rte">
<perch:content id="address" type="textarea" label="Text" html="true" editor="redactor" imagewidth="1920" bucket="content" />
</div><!--/location__address-->
</perch:if>
</div><!--/location__info-->
<div class="location__map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d79471.13870993175!2d-2.7428230394735698!3d51.50453617963468!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487192bfc2ec2cdf%3A0xfe619fe4433e4174!2sKings+Weston+Ln%2C+Bristol+BS11!5e0!3m2!1sen!2suk!4v1518606021621" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div><!--/location__map-->
</div><!--/location-->
</div><!--/page-width-->
</div><!--row-->
And finally the dates template:
<perch:repeater id="dates" label="Dates" max="2">
<div class="date">
<img class="date__icon" src="/a/img/icon-calendar.png" alt="calendar icon" />
<div class="date__month"><perch:content id="event_date" type="date" label="Date Of Event" format="F" /></div>
<div class="date__day"><strong><perch:content id="event_date" type="date" format="d" /></strong></div>
</div><!--/date-->
</perch:repeater>
Bit more info...
Moving the location template outside of blocks allows me to access the content in the listing as normal...as expected. Have also had to change the template include as it doesn't seem to work with a template include inside another template include...this is now one module only.
However, it now doesn't output in the detail page, in fact it wont output any of my non perch blocks content including the hero.html template...unless I delete all of the perch blocks...more confused.
Your
perch:beforeandperch:aftertags are overlapping theperch:blockstags. You can't do that.Ok thats a step closer. So I've moved the <perch:blocks> tags outside of the <perch:before> and <perch:after> tags. The first item displays correctly! The rest of the items are outputting without the html that is between the <perch:before> and <perch:after> tags though so they are loosing all the markup. Any ideas why?
Updated listing template:
You can move the
perch:beforeandperch:aftertags insideperch:blocksOk thank you...we are inching our way there...
So that outputs the first item correctly: just whats contained in the <li></li>
However the next items are all outputting the whole template including whats in <perch:before> so everything from <div class="listing">
I'm assuming this is because I have <perch:before> for the blocks now but we also need <perch:before> for the repeated item. Content is correct, markup isn't. Any suggestions?
Updated template:
Ok sooooo! For anyone else. This is how it has to be laid out for reusing content in a list item:
<perch:before> doesn't seem to work as described above. So I removed all the before content and included it on the page instead. Then The listing template can be wrapped in <perch:blocks> which finally seems to output the correct markup:
listing.php (page):
listing.html (template):
beforeandafterare for wrapping the entire repeating group. So if you have 10 items,beforewill output before item 1 only.afterwill output after item 10 only.That wasn't what was happening. Before output before every item, within the <li>. after output only after the last item.
That sounds like an error in your template.
It seems I misunderstood you. I thought you wanted to output the markup before/after the blocks section of each item.
Generally you'd do this:
Thanks Hussain, yes thats the normal procedure but that doesn't seem to work if you are also trying to reuse content from within blocks...as above.
Drew all of my templates are above, it would be great to know which bit is incorrect.
Although I now have it working the listing template will only output content if the editor adds a block content. I also have content which isn't within the blocks section that I would like to output to the listing page. The blocks are optional so may not be populated. If no content is added to blocks but the main content is populated I would like the listing page to output that. At the moment nothing is output to the page. I'm assuming this is because my whole listing template is wrapped in <perch:blocks>. What is the best way to achieve this?
What I would do is strip the template down to nothing and build it back up with just the elements you need to see it working. Once you've got it working, drop your markup back in.
Thats the thing. I've been doing this and still cant get it to work. Can output the right data but it inserts a bunch of extra code in the listing whenever I use perch:blocks
This outputs the data from the region outside perch:blocks alongside the data from inside it. However after the first <li> it then inserts 4 completely blank elements before looping through the last two correctly. No idea where these are coming from.
What are the blank elements?
Just blank <li class="listing__list__item"> </li>
Looks like this:
So it turns out that if I delete a block from the detail page it removes one of the empty <li>, if I delete all of them its all good. So it looks like the <perch:blocks> section is for some reason looping through all of the blocks I've added and creating random <li> on the listing page. Any idea why or how to stop this?
Just to clarify this is what I am after:
I have a 2 page list and detail. The detail page consists of some normal content which is required and some blocks which are optional. I would like to output the list item on the list page regardless of wether any blocks are used consisting of the required normal content. If a 'location' block is added I would like to output parts of that on the listing page, namely the dates, the time, the cost, and a booking button. These appear in different sections of the listing template.
I currently can't wrap the whole listing template in perch blocks because it outputs nothing if there is no block section added. I can't wrap individual sections in perch blocks because it is randomly inserting additional markup for however many blocks are selected for the detail page. I'm also not sure how to use blocks content in different sections of my listing template because you can only use one <perch:blocks> tag per template.
So the markup is just for each of the missing blocks you've removed from the template?
No the markup is dependant on the number of blocks that have been added in the content editor for the detail page. So if I select another block in the detail page in the content editor an additional <li> appears. If I delete a block an <li> disappears. So for the image above, each of those empty boxes relates to an item added as a block in the CMS.
My detail page has multiple blocks available but I only want the content from one of them (location.html) for outputting on the listing page.
Any thoughts? Would love to get this solved ASAP.
How many items are in the region?