Alternate between elements as a selection

depending on the outputted content

Can you give us more details? Do you want to check whether content exists, check a field's value or something else?

Hi Hussein,

I am simply trying to select different elements, i.e. either use a <nav></nav> or an <aside></aside> element.

I know I can use conditionals to output different elements but I would simply like to be able to do this arbitrarily.

I hope this gives you enough information.

Thanks for replying

I would simply like to be able to do this arbitrarily.

Based on what?

Your aim to use <section> or <nav> is clear. What's not clear is how you want to decide which one to use.

For example, you can have a checkbox field in your edit form to toggle between the two with the help of conditional tags. This is based on user (editor) input.

For example, you can have a checkbox field in your edit form to toggle between the two with the help of conditional tags. This is based on user (editor) input.

That sounds to be what I'd need but I'm wondering whether there is another way or if Conditional Tags are the only way.

Regards

Hi Drew,

I did this:

<<perch:if exists="link1 AND link2 AND link3">nav<perch:else/>aside</perch:if> id="bottom" <perch:if exists="contactclass">class="<perch:content id="contactclass" type="select" label="Contact class" options="Contact|contact" help="Leave empty unless contact section is used" allowempty="true"/>"</perch:if>></<perch:if exists="link1 OR link2 OR link3">nav<perch:else/>aside</perch:if>>

but it never seems to evaluate, i.e. I only ever get <aside></aside>

It shows the following (some parts redacted):

<table class="showall">
<tbody>
<tr>
<th>ID</th><th>Value</th>
</tr>
<tr>
<td><b>businessname</b></td>
<td></td>
</tr>
<tr>
<td><b>googleid</b></td>
<td></td>
</tr>
<tr>
<td><b>fbappid</b></td>
<td></td>
</tr>
<tr>
<td><b>sitename</b></td>
<td></td>
</tr>
<tr>
<td><b>url</b></td>
<td>https://localhost/</td>
</tr>
<tr>
<td><b>heading3</b></td>
<td></td>
</tr>
<tr>
<td><b>perch_page_path</b></td>
<td>/index.php</td>
</tr>
<tr>
<td><b>_id</b></td>
<td>236</td>
</tr>
<tr>
<td><b>_blocks</b></td>
<td>
<pre>Array
(
    [0] => Array
        (
            [citation] => 
            [quote] => 
            [caption] => 
            [link1] => weddings
            [text1] => Weddings
            [image1] => 
            [alt1] => 
            [spanned1] => 
            [link2] => occasions
            [text2] => Occasions
            [image2] => 
            [alt2] => 
            [spanned2] => 
            [link3] => commercial
            [text3] => Commercial
            [image3] => 
            [alt3] => 
            [spanned3] => 
            [_block_type] => flex
            [_block_id] => osifuu
            [_block_index] => 0
        )

)
</pre>
</td>
</tr>
<tr>
<td><b>contactclass</b></td>
<td></td>
</tr>
<tr>
<td><b>_page</b></td>
<td>/index.php</td>
</tr>
<tr>
<td><b>_pageID</b></td>
<td>2</td>
</tr>
<tr>
<td><b>_sortvalue</b></td>
<td>1000</td>
</tr>
<tr>
<td><b>perch_item_first</b></td>
<td>true</td>
</tr>
<tr>
<td><b>perch_item_last</b></td>
<td>true</td>
</tr>
<tr>
<td><b>perch_item_zero_index</b></td>
<td>0</td>
</tr>
<tr>
<td><b>perch_item_index</b></td>
<td>1</td>
</tr>
<tr>
<td><b>perch_item_rev_index</b></td>
<td>1</td>
</tr>
<tr>
<td><b>perch_item_rev_zero_index</b></td>
<td>0</td>
</tr>
<tr>
<td><b>perch_item_odd</b></td>
<td></td>
</tr>
<tr>
<td><b>perch_item_count</b></td>
<td>1</td>
</tr>
<tr>
<td><b>perch_namespace</b></td>
<td>perch:content</td>
</tr>
</tbody>
</table>

Yes but I have no idea why the output defaults to <aside></aside> when there are values present for links (either AND or OR should work).

I tried not-exists and that outputs <nav></nav> so it seems that while the values do exist, for some reason Perch says they do not.

I also tried using <perch:before></perch:before> and <perch:after></perch:after> from within a <perch:block></perch:block> but due to my use of a HTML5 <template></template> element, the content only outputs within #document-fragment.

I thought it might be because I am checking for values from outside of a <perch:blocks></perch:blocks> tag or that it may be some kind of Scoping issue but it seems Scoping only applies to content that is outside of a <perch:blocks></perch:blocks> element, whereas I am trying to access content that is within a Perch `<block></block>.

This is the script I use to instance content from within a HTML5 <template></template>:

const bottomarray=["bottomtemplate","bottomclone"];
bottomarray[0]=document.querySelector('#bottom_template');
bottomarray[1]=document.importNode(bottomarray[0].content,true);
document.querySelector('#bottom').appendChild(bottomarray[1]);

Drew McLellan said:

Are you inside a block and trying to reference values outside of that block?

Hi Drew,

I believe I am trying to do the opposite in fact, that I am trying to use values that are inside a <perch:block></perch:block> or <perch:blocks></perch:blocks> tag, to verify whether conditions are true or not, i.e. via perch:if exists while using AND or OR to verify multiple conditions at once.

Of course, only one condition needs to evaluate to true, e.g. in the case of OR but with respect to AND all conditions must evaluate to true, except when using perch:if not-exists but even when verifying a single value, nothing is working for me and I'm suspicious it is due to the fact that I am running a conditional from outside the <perch:blocks></perch:blocks> tag.

What I don't know of course is how this might actually work in practice, since I am not a developer but saying that, as a workaround, I created the following code:

<perch:content id="navigator" type="checkbox" label="Navigation Content" suppress="true"/>

<perch:if id="navigator" value="1">
<nav id="bottom" allowempty="true"/>"</perch:if>></nav>
</perch:if>

<perch:if id="navigator" value="0">
<aside id="bottom" <perch:if exists="contactclass">class="<perch:content id="contactclass" type="select" label="Contact class" options="Contact|contact" help="Leave empty unless contact section is used" allowempty="true"/>"</perch:if>></aside>
</perch:if>

and while not as elegant as I'd like, due to the fact that I must now involve the Editor; it is nonetheless a solution.

Best regards