0
# Iteration Control
1

2
Iteration and context helpers that control rendering flow within loops and provide access to iteration metadata for advanced template logic.
3

4
## Capabilities
5

6
### Loop Position Helpers
7

8
Helpers that detect position within iteration loops and render content conditionally based on the current position.
9

10
```javascript { .api }
11
/**
12
 * First helper - renders content only for the first item in a loop
13
 * Checks if context.stack.index === 0
14
 */
15
{@first}
16
  Content for first item only
17
{/first}
18

19
/**
20
 * Last helper - renders content only for the last item in a loop
21
 * Checks if context.stack.index === context.stack.of - 1
22
 */
23
{@last}
24
  Content for last item only
25
{/last}
26

27
/**
28
 * Separator helper - renders content between items, except after the last item
29
 * Renders for all items except when context.stack.index === context.stack.of - 1
30
 */
31
{@sep}
32
  Separator content
33
{/sep}
34
```
35

36
**Usage Examples:**
37

38
```javascript
39
// Basic list with separators
40
{#items}
41
  <span>{name}</span>{@sep}, {/sep}
42
{/items}
43
<!-- Output: "Item1, Item2, Item3" -->
44

45
// List with special first/last formatting
46
<ul>
47
{#menuItems}
48
  {@first}<li class="first">{/first}
49
  {@last}<li class="last">{/last}
50
  {^first}{^last}<li>{/last}{/first}
51
    <a href="{url}">{title}</a>
52
  </li>
53
{/menuItems}
54
</ul>
55

56
// Complex navigation with separators
57
{#breadcrumbs}
58
  <a href="{url}">{title}</a>
59
  {@sep} &gt; {/sep}
60
  {@last}<strong>{title}</strong>{/last}
61
{/breadcrumbs}
62

63
// Table rows with alternating classes
64
{#users}
65
  <tr{@first} class="first"{/first}{@last} class="last"{/last}>
66
    <td>{name}</td>
67
    <td>{email}</td>
68
  </tr>
69
{/users}
70
```
71

72
### Size Calculation Helper
73

74
Helper that calculates and outputs the size/length of various data types for template logic and display.
75

76
```javascript { .api }
77
/**
78
 * Size helper - calculates size/length of the target value
79
 * @param key - Value to calculate size of (required)
80
 */
81
{@size key="target_value"/}
82
```
83

84
**Size Calculation Rules:**
85

86
- **Falsy values and `true`**: Returns 0
87
- **Numbers**: Returns the number as-is
88
- **Arrays**: Returns array.length
89
- **Strings**: Returns string.length
90
- **Objects**: Returns count of enumerable properties
91
- **Functions**: Calls function and returns length of result
92

93
**Usage Examples:**
94

95
```javascript
96
// Display array length
97
<p>You have {@size key="{items}"/} items in your cart</p>
98

99
// Display string length
100
<p>Your message is {@size key="{message}"/} characters long</p>
101

102
// Conditional rendering based on size
103
{@size key="{notifications}"}
104
  {@gt value="0"}
105
    You have {@size key="{notifications}"/} new notifications
106
  {/gt}
107
{/@size}
108

109
// Object property count
110
<p>User profile has {@size key="{user}"/} fields completed</p>
111

112
// Complex size-based logic
113
{@select}
114
  {@eq key="{@size key=items/}" value="0"}
115
    <p>No items found</p>
116
  {/eq}
117
  {@eq key="{@size key=items/}" value="1"}
118
    <p>One item found</p>
119
  {/eq}
120
  {@gt key="{@size key=items/}" value="1"}
121
    <p>Multiple items found ({@size key="{items}"/} total)</p>
122
  {/gt}
123
{/select}
124

125
// Using size with iteration variables
126
{#products}
127
  Product {$idx} of {@size key="{$smarty.section.products.total}"/}
128
{/products}
129
```
130

131
**Type-Specific Examples:**
132

133
```javascript
134
// Array size
135
{@size key="{['a','b','c']}"/}
136
<!-- Output: 3 -->
137

138
// String size
139
{@size key="hello"/}
140
<!-- Output: 5 -->
141

142
// Object size (counts enumerable properties)
143
{@size key="{user}"/}
144
<!-- Output: number of properties in user object -->
145

146
// Number passthrough
147
{@size key="42"/}
148
<!-- Output: 42 -->
149

150
// Falsy values
151
{@size key=""/}        <!-- Output: 0 -->
152
{@size key="false"/}   <!-- Output: 0 -->
153
{@size key="null"/}    <!-- Output: 0 -->
154
{@size key="true"/}    <!-- Output: 0 -->
155
```
156

157
### Advanced Iteration Patterns
158

159
Combining iteration helpers with conditional logic for sophisticated loop control:
160

161
```javascript
162
// Numbered list with special formatting
163
{#items}
164
  {@first}<ol>{/first}
165
  <li>
166
    {name}
167
    {@size key="{subitems}"}
168
      {@gt value="0"} ({@size key="{subitems}"/} subitems){/gt}
169
    {/@size}
170
  </li>
171
  {@last}</ol>{/last}
172
{/items}
173

174
// Grid layout with row detection
175
{#products}
176
  {@math key="{$idx}" method="mod" operand="3"}
177
    {@eq value="0"}<div class="row">{/eq}
178
  {/math}
179

180
  <div class="col">{name}</div>
181

182
  {@math key="{$idx}" method="mod" operand="3"}
183
    {@eq value="2"}</div>{/eq}
184
    {@last}
185
      {@ne value="2"}</div>{/ne}
186
    {/last}
187
  {/math}
188
{/products}
189

190
// Smart comma separation with "and"
191
{#tags}
192
  {name}
193
  {@sep}
194
    {@math key="{$idx}" method="add" operand="2"}
195
      {@eq key="{@size key=tags/}" value="{.}"}and {/eq}
196
      {@ne key="{@size key=tags/}" value="{.}"}, {/ne}
197
    {/math}
198
  {/sep}
199
{/tags}
200
```