TYPO3 Inhaltselement zur Einbindung von FLUID-Templates, 4. Februar 2024

TYPO3 FLUID Template Inhaltselement

Ein Inhaltselement für schnelles Prototyping, um Zeit und Kosten in der Entwicklung zu sparen.
Mit dem FLUID Template Inhaltselement können HTML Dateien als Inhaltselemente eingebunden werden. Der besondere Nutzen liegt darin, dass die gesamte FLUID Funktionalität genutzt werden kann. Dies ermöglicht eine sehr schnelle Prototype-Entwicklung und die so erstellten Templates können direkt in den finalen Inhaltselementen oder Extbase-Extensions verwendet werden.
Ein weiterer Vorteil liegt in der direkten Integration in der aktuellen Seite. Es kann das reale Verhalten und Aussehen neuer Elemente getestet werden, ohne eine Zeile PHP-Code zu schreiben. Die Dummy-Daten können zum Beispiel aus JSON-Quellen als Äquivalent zu PHP Objekten/Arrays geladen werden.
Hier werden beispielhaft die Daten von https://dummyjson.com/recipes?limit=6 dargestellt.

Meal type: Dinner

Classic Margherita Pizza

Prepare time: 20 minutes
Cook time: 15 minutes
Servings: 4 servings
Difficulty: Easy
Cuisine: Italian
Calories per serving: 300 calories

Ingredients

Pizza dough
Tomato sauce
Fresh mozzarella cheese
Fresh basil leaves
Olive oil
Salt and pepper to taste

Instructions

Preheat the oven to 475°F (245°C).
Roll out the pizza dough and spread tomato sauce evenly.
Top with slices of fresh mozzarella and fresh basil leaves.
Drizzle with olive oil and season with salt and pepper.
Bake in the preheated oven for 12-15 minutes or until the crust is golden brown.
Slice and serve hot.

Tags: Pizza, Italian

Meal type: Lunch

Vegetarian Stir-Fry

Prepare time: 15 minutes
Cook time: 20 minutes
Servings: 3 servings
Difficulty: Medium
Cuisine: Asian
Calories per serving: 250 calories

Ingredients

Tofu, cubed
Broccoli florets
Carrots, sliced
Bell peppers, sliced
Soy sauce
Ginger, minced
Garlic, minced
Sesame oil
Cooked rice for serving

Instructions

In a wok, heat sesame oil over medium-high heat.
Add minced ginger and garlic, sauté until fragrant.
Add cubed tofu and stir-fry until golden brown.
Add broccoli, carrots, and bell peppers. Cook until vegetables are tender-crisp.
Pour soy sauce over the stir-fry and toss to combine.
Serve over cooked rice.

Tags: Vegetarian, Stir-fry, Asian

Meal type: Snack, Dessert

Chocolate Chip Cookies

Prepare time: 15 minutes
Cook time: 10 minutes
Servings: 24 servings
Difficulty: Easy
Cuisine: American
Calories per serving: 150 calories

Ingredients

All-purpose flour
Butter, softened
Brown sugar
White sugar
Eggs
Vanilla extract
Baking soda
Salt
Chocolate chips

Instructions

Preheat the oven to 350°F (175°C).
In a bowl, cream together softened butter, brown sugar, and white sugar.
Beat in eggs one at a time, then stir in vanilla extract.
Combine flour, baking soda, and salt. Gradually add to the wet ingredients.
Fold in chocolate chips.
Drop rounded tablespoons of dough onto ungreased baking sheets.
Bake for 10-12 minutes or until edges are golden brown.
Allow cookies to cool on the baking sheet for a few minutes before transferring to a wire rack.

Tags: Cookies, Dessert, Baking

Meal type: Lunch, Dinner

Chicken Alfredo Pasta

Prepare time: 15 minutes
Cook time: 20 minutes
Servings: 4 servings
Difficulty: Medium
Cuisine: Italian
Calories per serving: 500 calories

Ingredients

Fettuccine pasta
Chicken breast, sliced
Heavy cream
Parmesan cheese, grated
Garlic, minced
Butter
Salt and pepper to taste
Fresh parsley for garnish

Instructions

Cook fettuccine pasta according to package instructions.
In a pan, sauté sliced chicken in butter until fully cooked.
Add minced garlic and cook until fragrant.
Pour in heavy cream and grated Parmesan cheese. Stir until the cheese is melted.
Season with salt and pepper to taste.
Combine the Alfredo sauce with cooked pasta.
Garnish with fresh parsley before serving.

Tags: Pasta, Chicken

Meal type: Dinner

Mango Salsa Chicken

Prepare time: 15 minutes
Cook time: 25 minutes
Servings: 3 servings
Difficulty: Easy
Cuisine: Mexican
Calories per serving: 380 calories

Ingredients

Chicken thighs
Mango, diced
Red onion, finely chopped
Cilantro, chopped
Lime juice
Jalapeño, minced
Salt and pepper to taste
Cooked rice for serving

Instructions

Season chicken thighs with salt and pepper.
Grill or bake chicken until fully cooked.
In a bowl, combine diced mango, chopped red onion, cilantro, minced jalapeño, and lime juice.
Dice the cooked chicken and mix it with the mango salsa.
Serve over cooked rice.

Tags: Chicken, Salsa

Meal type: Lunch, Side Dish

Quinoa Salad with Avocado

Prepare time: 20 minutes
Cook time: 15 minutes
Servings: 4 servings
Difficulty: Easy
Cuisine: Mediterranean
Calories per serving: 280 calories

Ingredients

Quinoa, cooked
Avocado, diced
Cherry tomatoes, halved
Cucumber, diced
Red bell pepper, diced
Feta cheese, crumbled
Lemon vinaigrette dressing
Salt and pepper to taste

Instructions

In a large bowl, combine cooked quinoa, diced avocado, halved cherry tomatoes, diced cucumber, diced red bell pepper, and crumbled feta cheese.
Drizzle with lemon vinaigrette dressing and toss to combine.
Season with salt and pepper to taste.
Chill in the refrigerator before serving.

Tags: Salad, Quinoa

Erforderliche FrontEnd-Tests können ebenfalls geschehen, bevor der finale PHP Code geschrieben wird.
Beispiele für Online Test-Tools (die aktuelle URL sollte ggf. mit “/” oder “.html” am Ende getestet werden):

Mikrodaten Angaben (google Testtool)
Geschwindigkeit (webpagetest, google PageSpeed, GT-Metrix, …)
Zugänglichkeit (webaim)
Energieverbrauch (websitecarbon)
Sicherheit (securityheaders)

Das FLUID Template mit TYPO3 sowie in diesem Sitepackage enthaltenen Viewhelpern. Nach der Abnahme müssen lediglich die beiden @todo (JSON Datenquelle, Objekt/Array Variable) sowie das img-Tag ersetzt werden. Es könnte auch der FLUID f:alias Viewhelper genutzt werden, um Daten zu simulieren.

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      xmlns:d="http://typo3.org/ns/DIMENSION/Sitedefault/ViewHelpers"
      data-namespace-typo3-fluid="true">
<f:comment><!-- @todo remove in real template / replace data fron JSON with your data --></f:comment>
<d:data.jsonVariables source="https://dummyjson.com/recipes?limit=6" as="_json"/>

<f:comment><!-- example FLUID variable: CSS base class--></f:comment>
<f:variable name="cssBaseClass" value="recipe"/>
<f:comment><!-- render all data --></f:comment>
<div class="flex-lg-3 flex-sm-2 flex-xs-1 recipes">
    <f:comment><!-- @todo replace _json.recipes with real object parent  --></f:comment>
    <f:for each="{_json.recipes}" as="recipe" iteration="i">
        <f:comment><!-- render an item --></f:comment>
        <div class="{cssBaseClass} rte_text">
            <div class="{cssBaseClass}_content" itemscope itemtype="https://schema.org/Recipe">
                <f:variable name="imageSrc" value="{d:getExternalFile(url:recipe.image, localCopy:1)}"/>
                <f:if condition="{imageSrc}">
                    <figure class="{cssBaseClass}_figure">
                        <f:image src="{imageSrc}" class="img-autoscaled"
                                 maxWidth="458"
                                 alt="The dish {recipe.name}"
                                 additionalAttributes="{itemprop:'image'}"
                                 loading="lazy"/>
                        <figcaption class="{cssBaseClass}_figure_caption">
                            <f:comment><!-- example calc in FLUID --></f:comment>
                            <f:variable name="starRatingPercent" value="{190 * recipe.rating / 5}"/>
                            <div class="{cssBaseClass}_stars">
                                <svg class="{cssBaseClass}_stars_svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 32"
                                     aria-label="{recipe.rating} Stars">
                                    <g clip-path="url(#recipe_stars_mask)"><rect width="190" height="32" x="0" y="0" fill="#bbb" /></g>
                                    <g clip-path="url(#recipe_stars_mask)"><rect width="{starRatingPercent}" height="32" x="0" y="0" fill="orange" /></g>
                                </svg>
                                <p class="{cssBaseClass}_stars_text">{recipe.rating} stars, {recipe.reviewCount} reviews</p>
                            </div>
                        </figcaption>
                    </figure>
                </f:if>
                <div class="{cssBaseClass}_text">
                    <header>
                        <f:comment><!-- example FLUID inline for each loop --></f:comment>
                        <p class="txt-column-pointer {cssBaseClass}_meal-types"><span class="sr-only">Meal type:</span>
                            {f:if(condition:i.isLast,
                            then:'<span>{text}</span>',
                            else:'<span>{text}</span>, ') -> f:for(each:recipe.mealType, as:'text', iteration:'i')}
                        </p>
                        <h2 class="h3" itemprop="name">{recipe.name}</h2>
                    </header>
                    <p class="{cssBaseClass}_description">Prepare time: <meta itemprop="prepTime" content="PT{recipe.prepTimeMinutes}M">{recipe.prepTimeMinutes} minutes<br>
                        Cook time: <meta itemprop="cookTime" content="PT{recipe.cookTimeMinutes}M">{recipe.cookTimeMinutes} minutes<br>
                        Servings: <span itemprop="recipeYield">{recipe.servings} servings</span><br>
                        Difficulty: {recipe.difficulty}<br>
                        Cuisine: {recipe.cuisine}<br>
                        <span itemprop="nutrition"
                              itemscope itemtype="https://schema.org/NutritionInformation">
                        Calories per serving: <span itemprop="calories">{recipe.caloriesPerServing} calories</span>
                        </span>
                    </p>
                    <f:comment><!-- example render section --></f:comment>
                    <f:render partial="Atoms/Summary" section="Expandable" arguments="{
                        cssBaseClass: cssBaseClass,
                        elementClass:'ingredients',
                        summary: 'Ingredients',
                        listType: 'ListUnordered',
                        listItems:recipe.ingredients
                        }"/>
                    <f:render partial="Atoms/Summary" section="Expandable" arguments="{
                        cssBaseClass: cssBaseClass,
                        elementClass:'instructions',
                        summary: 'Instructions',
                        listType: 'ListOrdered',
                        listItems:recipe.instructions
                        }"/>
                    <p class="{cssBaseClass}_tags">Tags:
                        {f:if(condition:i.isLast,
                        then:'<span>{text}</span>',
                        else:'<span>{text}</span>, ') -> f:for(each:recipe.tags, as:'text', iteration:'i')}
                    </p>
                </div>
            </div>
        </div>
    </f:for>
</div>
<f:comment><!-- add your styles --></f:comment>
<f:asset.css identifier="identifier-{data.uid}"
             href="fileadmin/Fluid/Examples/Recipes.css"
             priority="1" useNonce="1"/>
<f:comment><!-- add SVG mask to SVG Map in page footer --></f:comment>
<d:asset.svg file="fileadmin/Fluid/Examples/RecipesStarsMask.svg" renderMode="onlyIncludeInMap"/>
</html>

Der asset.svg Viewhelper ist inspiriert von: https://github.com/b13/assetcollector, jedoch in diesem Sitepackage “leicht” abgeändert. Vielen Dank an das b13.com Team.