Blocks tutorial 2: Use the blocks, Luke.

[KB]

Synopsis
Under the assumption you read the first tutorial, we did some rather simple things with blocks. But we didn't talk at any length about blockifs. Lets get some more info on those.

The problem with blockifs is...
There are plenty of situations where you'll want to use them, and you won't even realise it.

Lets start with an example.
Let's say that I only want the first 3 items from my new products list. We know that each product has things such as its name and its description available to you, but did you know that there are other items, that are not normally displayed, such as its number in the list, and how many items are in the list? Using these variables, we can selectively display certain elements in the list.

OK, lets write it out in English first:
'Show this list item, where its List Index is less than or equal to 3'.

You can use the expression builder in the blockif popup to write this, but I'm going to show it here:

<actinic:variable name="ListIndex" /> <= 3

So, we need a blockif to wrap around our code, so that whenever this condition is met, we allow what's inside to be printed. Here is the example from Tutorial 1, but with this new condition.

<actinic:block type="NewProductsList" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3c%3d%203" >
    <img src="<actinic:variable name="ProductImageFileName" />" width="75" alt="<actinic:variable name="ProductName" />" border="0" /><br>
    <a href="<actinic:variable name="SearchCGIURL" />?PRODREF=<actinic:variable name="ProductReference" />&NOLOGIN=1<actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e">&SHOP=<actinic:variable name="ShopID" /></actinic:block>">
    <Actinic:Variable Name="ProductName"/>
    </a><br>
    <br>
</actinic:block>
</actinic:block>

Try this in your Actinic. As you can see, it happily only shows the first three items. You can change the number to 1, to show only the newest product. This can then be used for some kind of product highlight, or otherwise.

So, we can limit the number displayed, but it gets more fun than that. We can show parts of the list, by using more conditions. We can for example, show only items between 4 and 6. Pull out three items and show them.

Lets look at the English first:
'Show this list item, where its List Index is more than than or equal to 4 and less than or equal to 6'.

So, let's put that into a working example in Actinic:

<actinic:block type="NewProductsList" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3e%3d%204%20AND%20%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3c%3d%206" >
    <img src="<actinic:variable name="ProductImageFileName" />" width="75" alt="<actinic:variable name="ProductName" />" border="0" /><br>
    <a href="<actinic:variable name="SearchCGIURL" />?PRODREF=<actinic:variable name="ProductReference" />&NOLOGIN=1<actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e">&SHOP=<actinic:variable name="ShopID" /></actinic:block>">
    <Actinic:Variable Name="ProductName"/>
    </a><br>
    <br>
</actinic:block>
</actinic:block>

So, this code displays items 4, 5 and 6. Is that all? No, of course not!

What if i wanted the last item in a list?
OK, so we have another variable thats useful for lists, and that's the amount of items in the list, or 'List Count'.

Lets put that into English:
'Show this list item, its its List Index is equal to the List Count'

...and here is it in Actinic with our example:

<actinic:block type="NewProductsList" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3d%3d%20%3cactinic%3avariable%20name%3d%22ListCount%22%20%2f%3e" >
    <img src="<actinic:variable name="ProductImageFileName" />" width="75" alt="<actinic:variable name="ProductName" />" border="0" /><br>
    <a href="<actinic:variable name="SearchCGIURL" />?PRODREF=<actinic:variable name="ProductReference" />&NOLOGIN=1<actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e">&SHOP=<actinic:variable name="ShopID" /></actinic:block>">
    <Actinic:Variable Name="ProductName"/>
    </a><br>
    <br>
</actinic:block>
</actinic:block>

So, lets see what we did...
- Used List Index to find the number of an item in the list.
- Used List Count to find the number of items in that list.
- Limited the number of items in the list by comparing List Index to a number.
- Used two comparisons to pull out part of a list using List Index.
- Used List Count to display only the last item.

In the next thrilling installment:
We'll investigate how to better your navigation, by using the block and list concepts

With thanks to Gabriel Crowe of Interact Studio