Forum

Thread tagged as: Question, Problem

Multiple conditionals in a template

I have a template where it needs more than one perch:before and perch:after

<perch:before>
<div class="l-submain">
<div class="l-submain-h i-cf">

<div class="w-portfolio columns_3 type_sortable">
<div class="w-portfolio-h">
<div class="w-filters animate_afb">
<div class="w-filters-h">
<div class="w-filters-list">
<div class="w-filters-item">
<perch:categories id="Portfolio" label="Category" set="portfolio">

<perch:before>
<ul>
</perch:before>

<li class="w-filters-item active"><a class="w-filters-item-link" href="javascript:void(0);" data-filter="*">All</a></li>
<li class="w-filters-item"><a class="w-filters-item-link" href="javascript:void(0);" data-filter=".<perch:category id="catClass" />"><perch:category id="catTitle" /></a></li>

<perch:after>
</ul>
</perch:after>

</perch:categories>
</div>
</div>
</div>
</div>

<div class="w-portfolio-list">
<div class="w-portfolio-list-h">
</perch:before>

How can I code this as currently its skipping some of the data.I cannot put some in another template as they all need to sit inside a master div and two items are multiple regions created dynamically.

Nigel Coath

Nigel Coath 1 points

  • 7 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

That will only show the categories for the first item.

Yes thats the problem, the second set of before/after statements is inside the other and so its not working right. Is there a way to separate them with some kind of id?

I have racked my brains and they all have to be in the same template otherwise the filter links do not work.

I have edited the code to comment what does what:

/* This is the overall wrapper containing portfolio listings*/
<perch:before>
<div class="l-submain">
<div class="l-submain-h i-cf">

<div class="w-portfolio columns_3 type_sortable">
<div class="w-portfolio-h">
<div class="w-filters animate_afb">
<div class="w-filters-h">
<div class="w-filters-list">
<div class="w-filters-item">
<perch:categories id="Portfolio" label="Category" set="portfolio">

/* This is the category filter */
<perch:before>
<ul>
</perch:before>

<li class="w-filters-item active"><a class="w-filters-item-link" href="javascript:void(0);" data-filter="*">All</a></li>
<li class="w-filters-item"><a class="w-filters-item-link" href="javascript:void(0);" data-filter=".<perch:category id="catClass" />"><perch:category id="catTitle" /></a></li>

<perch:after>
</ul>
</perch:after>

</perch:categories>
</div>
</div>
</div>
</div>
/* This is the end of the category filter */

<div class="w-portfolio-list">
<div class="w-portfolio-list-h">
</perch:before>

/* This is where code for the portfolio item goes */

The problem is both the portfolio filter links and the portfolio entries are multiple regions but both must sit in the same template to work.

Drew McLellan

Drew McLellan 2638 points
Perch Support

What result are you getting?

The categories tags are parsed and gone long before the before and after tags are parsed.

The result is only one category link is displayed and it seems to be the last one.

Drew McLellan

Drew McLellan 2638 points
Perch Support

It will be the categories from the first item.

As I said earlier its the use of more than one perch:before inside this template that is preventing the other links showing I think.

Is there a way to identify what perch:before applies to which code?

If you look above you will see the category link <ul> is wrapped in a perch:before/after but so is the overall wrapper to the portfolio items, however the ones around the <ul> appear within the wrapper ones, causing the break.

I need to find a way to differentiate these perch:before calls or find another way to get the category links to display?

Drew McLellan

Drew McLellan 2638 points
Perch Support

Yes, I know what you're saying, but what you're saying doesn't make any sense in relation to how the template parser works.

Okay lets try this from another angle. Due to the way the html is created I need everything in one template.

I am wondering if the code I used to display the category links is right?

<li class="w-filters-item"><a class="w-filters-item-link" href="javascript:void(0);" data-filter=".<perch:category id="catClass" />"><perch:category id="catTitle" /></a></li>

What I want is to display all existing categories whether there are items in them or not. Currently I think the extra conditionals are cancelling each other out which is why only the first used category is showing?

I could hard code them, but then if I add more categories I will have to change this?

I just need a way to display every category in that set.

For now this is how I have done it:

<div class="w-filters-item">
<ul>
<li class="w-filters-item active"><a class="w-filters-item-link" href="javascript:void(0);" data-filter="*">All</a></li>
<li class="w-filters-item"><a class="w-filters-item-link" href="javascript:void(0);" data-filter=".corporate-identity">Corporate Identity</a></li>
<li class="w-filters-item"><a class="w-filters-item-link" href="javascript:void(0);" data-filter=".mini-brochures">Mini Brochures</a></li>
<li class="w-filters-item"><a class="w-filters-item-link" href="javascript:void(0);" data-filter=".brochures">Brochures</a></li>
<li class="w-filters-item"><a class="w-filters-item-link" href="javascript:void(0);" data-filter=".catalogues">Catalogues</a></li>
<li class="w-filters-item"><a class="w-filters-item-link" href="javascript:void(0);" data-filter=".folders">Folders</a></li>
<li class="w-filters-item"><a class="w-filters-item-link" href="javascript:void(0);" data-filter=".packaging">Packaging</a></li>
<li class="w-filters-item"><a class="w-filters-item-link" href="javascript:void(0);" data-filter=".websites">Websites</a></li>
</ul>
</div>

It does the job but its not using the Categories app so if I add Categories I will have to edit this code. I played around and eventually found a way to insert Category links correctly by have one template for links and another for portfolio listings and jigging around with perch:before/after.

However the category links display for each item listed so if there are two or more from the same category the link shows multiple times and in the order the items are listed e.g.: Brochures Catalogues Brochures.

In an ideal world the Category links to filter the results would all display just once and the whole set would display.