Synopsis
This brief tutorial was written to bring together the disparate information on lists and such, in Actinic. After a lot of trawling and struggling, as a programmer, I find the concepts and possibilities given to us by the 'block' concepts in Actinic a little bewildering. This article attempts to help people better understand the mysterious block so they can better use them in Actinic.
First, the anatomy of the block.
For those that don't really understand them in V9/10, 'blocks' are the code in Actinic, highlighted in green.
There are two types. The first one I'll rattle on about is the standard 'block'. Try typing 'block' in the code editor, in any template. You'll find Actinic tries to complete the block in a little popup. Click it, and it'll create a corresponding '/block'. You just made a structure.
Actinic can now perform special functions within this block we just made. Typically, Actinic can loop through items, and use their 'variables' in the code inside.
consider this code:
What would happen if our block was set to loop the best sellers? You guessed it. It'd print a variable for each one, with a 'break' after each one, because it's possible to use html inside our blocks. You can make your block loop all sorts of data available to your catalog. For example, the new products, sections, related items, to name but a few.
Lets try something more adventurous. I want to make a list, of all the sections in my catalog. How do I go about it?
What did we do? Well, as you can see, my block type is set to 'EntireSectionList'. This means ALL my sections in all the shop catalog. For those of you with a lot of sections, this can be a big list, as this list is depth agnostic. By that, I mean it'll go through your subsections. regardless of their depth.
We need to use another type of block to limit the sections to only the top level sections. this is called, well...
The mysterious BlockIf
Take a look at this code:
Inside our looping block, and wrapped around our 'list' item, is another block. Actually, its our mysterious 'blockif'.
Let me decode the messy code in there:
'If SectionLevel == 1'
this literally means: 'If the sectionLevel is equal to 1, then do whatever is inside this block'.
In our case, this means to print our list item. In your catalog structure, this means the depth of your list. '1' Means only show me the first depth of items. eg: only the root sections.
This code produces a list of only root sections, linked. get it? You can change the 'context' (or what is inside the loop of items) by double clicking on the first 'block' and choosing another type of list in the 'type' dropdown.
Looping and your products...
In many cases, you'll want to make clever use of the 'best sellers' or 'new in' data. I'll show you how.
Basically, the concept is the same. you need to make a 'block' and tell actinic to associate its contents, with the products we want in there. We'll start with a 'new product' type list, with some pictures.
At the product level (when you are editing your product templates) there are variables you can use in your designs, to display certain data, about your products. In a list, with products inside it, you can use some of the same variables. Lets create a list of new products first.
Take a little look at that code, and try it out, paste it into a template. As you can see, its type is 'NewProductsList'. Available from the 'type' dropdown in the 'block' menu we used before. We use only a single variable, to make sure everything is working right. In this case, I'm using the product name. Aptly called 'ProductName'. I also use some html, a break to make it look like a list of some sort.
Now, how about a picture of this product?
This will make a picture, using the appropriate variable:
Lets look at this. Its basic HTML. I have used the IMG tag, with its src (source) set to the filename of our product image. In this example, I have also limited the width to 75 pixels, and set the border to 0 pixels. In Actinic, if you limit the width or the height of an image, then it automatically resizes the ratio of the image, to ensure you don't get ugly wide or tall stretched images. I also use the 'ProductName' variable we just used again. I put it in the alt attribute of the image, for SEO. This means that when you hover your mouse over our image, you'll most likely get the product name popping up. We can use variables as many times as we want in a block. Here we'll be using product name twice. Once in the alt attribute and also to display it for the user.
So how can we use this in our loop?
Try that out. Notice the additional breaks I added. This ensures that your items are separated.
There are a lot of variables that can be used in this loop. In fact, a lot of the variables that can be used in your products can be used here, and you can even nest the loops, within one another. For example, each product has related items. You can put another block inside this one to loop those as well. We'll not get into that now. I'll talk about that in another tutorial.
So, how about a link to our catalog page, so people can buy this product?
In Actinic, links go through the CGI-BIN. This is so we can do things link search term highlighting and other such trickery. We'll not worry about that.
Lifted straight from our product template, here is a link, that can be used in the context of a 'product':
There are some variables in there, as well as a little block. We don't need to worry about this at the moment. What we're going to do is use this link in our example. Lets go ahead and link the 'ProductName'.
<
Phew! It's starting to get complex! No wonder people don't use these blockifs enough!
The story so far
Ok, so far we have:
- Made a list of top level sections, and linked them.
- Made a list of our new products.
- Used pictures and resized them.
- Used some simple html.
- Linked to a product using the cgi-bin.
Where to next?
With only a very simple change, you can make your list become a best sellers list. Give it a go. There are infinite possibilities of what we can do with our little template. I used only very simple html, but I'm sure with some css and some time fiddling, you can make something much nicer for your store. The inside of your product 'loop' can be as simple (like my example) or as complex as you like.
See if you can add things like the price, or the description from your products.
With thanks to Gabriel Crowe of Interact Studio
This brief tutorial was written to bring together the disparate information on lists and such, in Actinic. After a lot of trawling and struggling, as a programmer, I find the concepts and possibilities given to us by the 'block' concepts in Actinic a little bewildering. This article attempts to help people better understand the mysterious block so they can better use them in Actinic.
First, the anatomy of the block.
For those that don't really understand them in V9/10, 'blocks' are the code in Actinic, highlighted in green.
There are two types. The first one I'll rattle on about is the standard 'block'. Try typing 'block' in the code editor, in any template. You'll find Actinic tries to complete the block in a little popup. Click it, and it'll create a corresponding '/block'. You just made a structure.
Actinic can now perform special functions within this block we just made. Typically, Actinic can loop through items, and use their 'variables' in the code inside.
consider this code:
HTML Code:
<actinic:block> SomeVariable<br> </actinic:block>
Lets try something more adventurous. I want to make a list, of all the sections in my catalog. How do I go about it?
HTML Code:
<ul> <actinic:block type="EntireSectionList"> <li><a href="<actinic:variable name="SectionPageName"/>"><actinic:variable name='SectionName'/></a> </actinic:block> </ul>
We need to use another type of block to limit the sections to only the top level sections. this is called, well...
The mysterious BlockIf
Take a look at this code:
HTML Code:
<ul> <actinic:block type="EntireSectionList"> <actinic:block if="%3cactinic%3avariable%20name%3d%22SectionLevel%22%20%2f%3e%20%3d%3d%20%201" > <li><a href="<actinic:variable name="SectionPageName"/>"><actinic:variable name='SectionName'/></a> </actinic:block> </actinic:block> </ul>
Let me decode the messy code in there:
'If SectionLevel == 1'
this literally means: 'If the sectionLevel is equal to 1, then do whatever is inside this block'.
In our case, this means to print our list item. In your catalog structure, this means the depth of your list. '1' Means only show me the first depth of items. eg: only the root sections.
This code produces a list of only root sections, linked. get it? You can change the 'context' (or what is inside the loop of items) by double clicking on the first 'block' and choosing another type of list in the 'type' dropdown.
Looping and your products...
In many cases, you'll want to make clever use of the 'best sellers' or 'new in' data. I'll show you how.
Basically, the concept is the same. you need to make a 'block' and tell actinic to associate its contents, with the products we want in there. We'll start with a 'new product' type list, with some pictures.
At the product level (when you are editing your product templates) there are variables you can use in your designs, to display certain data, about your products. In a list, with products inside it, you can use some of the same variables. Lets create a list of new products first.
HTML Code:
<actinic:block type="NewProductsList" > <Actinic:Variable Name="ProductName"/><br> </actinic:block>
Now, how about a picture of this product?
This will make a picture, using the appropriate variable:
HTML Code:
<img src="<actinic:variable name="ProductImageFileName" />" width="75" alt="<actinic:variable name="ProductName" />" border="0" />
So how can we use this in our loop?
HTML Code:
<actinic:block type="NewProductsList" > <img src="<actinic:variable name="ProductImageFileName" />" width="75" alt="<actinic:variable name="ProductName" />" border="0" /><br> <Actinic:Variable Name="ProductName"/><br> <br> </actinic:block>
There are a lot of variables that can be used in this loop. In fact, a lot of the variables that can be used in your products can be used here, and you can even nest the loops, within one another. For example, each product has related items. You can put another block inside this one to loop those as well. We'll not get into that now. I'll talk about that in another tutorial.
So, how about a link to our catalog page, so people can buy this product?
In Actinic, links go through the CGI-BIN. This is so we can do things link search term highlighting and other such trickery. We'll not worry about that.
Lifted straight from our product template, here is a link, that can be used in the context of a 'product':
HTML Code:
<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>"></a>
<
HTML Code:
actinic:block type="NewProductsList" >
<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>
The story so far
Ok, so far we have:
- Made a list of top level sections, and linked them.
- Made a list of our new products.
- Used pictures and resized them.
- Used some simple html.
- Linked to a product using the cgi-bin.
Where to next?
With only a very simple change, you can make your list become a best sellers list. Give it a go. There are infinite possibilities of what we can do with our little template. I used only very simple html, but I'm sure with some css and some time fiddling, you can make something much nicer for your store. The inside of your product 'loop' can be as simple (like my example) or as complex as you like.
See if you can add things like the price, or the description from your products.
With thanks to Gabriel Crowe of Interact Studio