Loops

Simple loop constructs enables iteration through various items such as news items, products, variants, countries, etc.

To create a loop, you use GetLoop and pass in the name of the loop:

GetLoop("Images") 

The GetLoop method will return a Generic.List(Of LoopItem) of the loop name specified (Images) that can be iterated.

The entire syntax could look like this: 

@foreach (var i in GetLoop("Images")) { //Loop items }

Inside the foreach statement, the items of the loop are available in the current LoopItem (i) in the above example.

To get a value of a property of a loopitem, use the GetValue method of the LoopItem object: 

@foreach (var i in GetLoop("Images")) { @i.GetValue("Gallery.Image.Thumb.Medium") }

The full loop example would look like this:

<div> @foreach (LoopItem i in GetLoop("Images")) { <div class="LBImg"> <a href="@i.GetValue("Gallery.Image.DetailLink")" title="@imagename"> @i.GetValue("Gallery.Image.Thumb.Medium") </div> } </div>

A loop construct in HTML begins with LoopStart(items) and ends with LoopEnd(items). The name in the parentheses defines what is being iterated. HTML code and other template tags can be put in between the two loop tags.

The following two tags can be used to display some text when there are items to loop:

  • LoopStart(loop name)
  • LoopEnd(loop name)

The following tags can be used at the beginning and end of a loop. The tags will result in the loop only being displayed if the loop contains items:

  • HeaderStart
  • HeaderEnd
  • FooterStart
  • FooterEnd

The following tag can be used to display a message when there are no items in a loop:

  • EmptyLoopStart
  • EmptyLoopEnd

The following tags are available for all loops:

<!--[LoopName].LoopCounter--> <!--[LoopName].LoopMod2--> <!--[LoopName].LoopMod3--> <!--[LoopName].LoopMod4--> <!--[LoopName].LoopMod5-->

The following example illustrates how to use a loop construct to list products in a table:

<table> <!--@LoopStart(Products)--> <tr> <td><!--@Ecom:Product.Name--></td> <td><!--@Ecom:Product.Price--></td> </tr> <!--@LoopEnd(Products)--> </table>

The following example illustrates how to use the EmptyLoop, Header and Footer loops in a simple loop construct:

<!--@LoopStart(Name)--> <!--@EmptyLoopStart-->No items in this loop <!--@EmptyLoopEnd--> <!--@HeaderStart--><ul><!--@HeaderEnd--> <li><!--@SomeLoopValue--></li> <!--@FooterStart--></ul><!--@FooterEnd--> <!--@LoopEnd(Name)-->

Loops are only available in templates where this is explicitly stated.

The DwTemplateTags list only outputs the first 5 loop items if it is in a loop - to avoid huge amounts of markup.

Notice the use of @item.GetValue to get data from the loop variable. If you just write @GetValue, the data will be taken from outside the loop. Similarly, you have to use @item.GetLoop to use loops inside a loop.

It is possible to output all available template tags and loops in the current template by inserting @TemplateTags() in the Razor code or <!--@DwTemplateTags--> in the HTML code.
Read more about TemplateTags.