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".