TYPO3 Inhaltselement zur Einbindung von FLUID-Templates,

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.

The dish Classic Margherita Pizza

4.6 stars, 98 reviews

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

Tags: Pizza, Italian

The dish Vegetarian Stir-Fry

4.7 stars, 26 reviews

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
  1. In a wok, heat sesame oil over medium-high heat.
  2. Add minced ginger and garlic, sauté until fragrant.
  3. Add cubed tofu and stir-fry until golden brown.
  4. Add broccoli, carrots, and bell peppers. Cook until vegetables are tender-crisp.
  5. Pour soy sauce over the stir-fry and toss to combine.
  6. Serve over cooked rice.

Tags: Vegetarian, Stir-fry, Asian

The dish Chocolate Chip Cookies

4.9 stars, 13 reviews

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

Tags: Cookies, Dessert, Baking

The dish Chicken Alfredo Pasta

4.9 stars, 82 reviews

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
  1. Cook fettuccine pasta according to package instructions.
  2. In a pan, sauté sliced chicken in butter until fully cooked.
  3. Add minced garlic and cook until fragrant.
  4. Pour in heavy cream and grated Parmesan cheese. Stir until the cheese is melted.
  5. Season with salt and pepper to taste.
  6. Combine the Alfredo sauce with cooked pasta.
  7. Garnish with fresh parsley before serving.

Tags: Pasta, Chicken

The dish Mango Salsa Chicken

4.9 stars, 63 reviews

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
  1. Season chicken thighs with salt and pepper.
  2. Grill or bake chicken until fully cooked.
  3. In a bowl, combine diced mango, chopped red onion, cilantro, minced jalapeño, and lime juice.
  4. Dice the cooked chicken and mix it with the mango salsa.
  5. Serve over cooked rice.

Tags: Chicken, Salsa

The dish Quinoa Salad with Avocado

4.4 stars, 59 reviews

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
  1. In a large bowl, combine cooked quinoa, diced avocado, halved cherry tomatoes, diced cucumber, diced red bell pepper, and crumbled feta cheese.
  2. Drizzle with lemon vinaigrette dressing and toss to combine.
  3. Season with salt and pepper to taste.
  4. 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):

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.