RSCE - Buttonbox

von Bernhard Renner

Am 12.12.2024 fand Die Contao (Morning) Show #20 – Twig in der Praxis statt.

Hier wurde anhand von Codebeispielen Einblick in die Praxis mit Twig-Templates geplaudert. Meine Beispiele möchte ich hier nochmals bereit stellen und beginne mit der Buttonbox.

Es werden dazu 2 Dateien benötigt:
rsce_button-box_config.php
rsec_button-box.html.twig

// templates/theme/rsce_button-box_config.php  

<?php

return [
    'label' => ['Button-Box','Erstellen Sie eine Button-Box.'],
    'types' => ['content'],
    'contentCategory' => 'texts',
    'standardFields' => ['cssID'],
    'fields' => [
        'buttons' => [
            'label' => ['Buttons',''],
            'elementLabel' => '%s. Button',
            'inputType' => 'list',
            'minItems' => 1,
            'fields' => [
                'url' => [
                    'label' => &$GLOBALS['TL_LANG']['MSC']['url'],
                    'inputType' => 'text',
                    'eval' => [
                        'mandatory' => false, 
                        'rgxp' => 'url',
                        'decodeEntities' => true,
                        'maxlength' => 2048,
                        'dcaPicker' => true,
                        'tl_class' => 'w33'
                    ]
                ],
                'linkTitle' => [
                    'label' => ['Link-Text','Der Link-Text wird anstelle der Link-Adresse angezeigt.'],
                    'inputType' => 'text',
                    'eval' => [
                        'tl_class' => 'w33'
                    ]
                ],
                'titleText' => [
                    'label' => ['Link-Titel','Der Link-Titel wird als title-Attribut im HTML-Markup eingefügt.'],
                    'inputType' => 'text',
                    'eval' => [
                        'tl_class' => 'w33'
                    ]
                ],
                'target' => [
                    'label' => &$GLOBALS['TL_LANG']['MSC']['target'],
                    'inputType' => 'checkbox',
                    'eval' => [
                        'tl_class' => 'w33 m12'
                    ]
                ],
                'linkClass' => [
                    'label' => ['CSS-Klasse','Hier können Sie beliebig viele Klassen für den Button eingeben.'],
                    'inputType' => 'text',
                    'eval' => [
                        'tl_class' => 'w33'
                    ]
                ],
            ],
        ],
    ]
];  
{# templates/theme/rsce_button-box.html.twig #}

<div class="{{ class }} button-wrapper" {{ cssID|raw }}>
    {% for button in buttons %}
    {%- set btn_attributes = attrs()
        .addClass('btn-item')
        .addClass(button.linkClass|default)
        .set('role', 'button')
        .setIfExists('target', button.target|default ? '_blank' : null)
        .setIfExists('href', button.url|insert_tag)
        .setIfExists('title', button.titleText|default)
    -%}
    <a {{ btn_attributes }}>
        {{ button.linkTitle|default }}
    </a>
    {% endfor %}
</div>  

{# vielen Dank an dieser Stelle an Sebastian @zoglo für die Verbesserung des Codes! #}

Hinweis

Sebastian hat mich nach der Show kontaktiert, und mir einen doch viel saubereren Code zukommen lassen - siehe oben.
Die Ausgabe wird mit Attributen durchgeführt.
.setIfExists('href', button.url|insert_tag) » der Filter insert_tag ist notwendig, damit der Link an dieser Stelle auch korrekt erstellt wird.

Die Buttonbox ist so aufgebaut, dass im Backend 1 oder mehrere Buttons/Links angelegt werden können.
Im Template ist role="button" angeführt, sodass dieser Link als Button erkannt und gewertet wird.

Das Backend sieht dann so aus:

Die Contao (Morning) Show #20 – Twig in der Praxis

zum Nachschauen könnt ihr über diesen Link auf Youtube erreichen.

https://www.youtube.com/watch?v=QcH4rdpU4oA

Kommentare

Einen Kommentar schreiben

Was ist die Summe aus 9 und 7?