Attention
This manual is no longer being maintained for TYPO3 versions 11.5 and above. The majority of the content has been migrated to the Extbase or Fluid sections in "TYPO3 Explained".
Adding a template¶
In Extbase frontend templates are stored in a subdirectory:
EXT:store_inventory/Resources/Private/Templates
- if not configured otherwise.
The name of the subdirectory in the Templates/
folder is derived
from the corresponding controller name (without the Controller
suffix).
The class name \MyVendor\StoreInventory\Controller\StoreInventoryController
will result in the directory name StoreInventory/
.
In the directory StoreInventory/
we can now create the template file for our list view.
As our list view is rendered by the list action, the template should be List.html
.
The action name, without the action suffix.
EXT:store_inventory/Resources/Private/Templates/StoreInventory/List.html
looks like this:
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
<table border="1" cellspacing="1" cellpadding="5">
<tr>
<td>Product name</td>
<td>Product description</td>
<td>Quantity</td>
</tr>
<f:for each="{products}" as="product">
<tr>
<td align="top">{product.name}</td>
<td align="top">
<f:format.crop maxCharacters="100">{product.description}</f:format.crop>
</td>
<td align="top">{product.quantity}</td>
</tr>
</f:for>
</table>
</html>
The inventory is rendered as a table.
We can access the array of products we assigned to the view
($this->view->assign('products', $products)
) with {products}
.
Tags starting with <f:
are Fluid ViewHelper tags.
The code inside the for
tag is repeated for each product in products
.
The ViewHelper f:crop
shortens the containing text to at max 100 characters length.
Within the brackets we can access the products and their properties.
If there is a dot after the object name, the getters are automatically called.
So {product.description}
uses the getter method getDescription()
from the
domain model in file EXT:store_inventory/Classes/Domain/Model/Product.php
.
Just creating the template is not yet enough to get the list in the frontend. We need to add an element that can be inserted on a page in the TYPO3 backend to tell TYPO3 where exactly we want to render our product list. This element is a so-called "Frontend-Plugin".