RSCE - Twig - Öffnungszeiten
von Bernhard Renner
In diesem Beitrag zeigen wir, wie mit Rocksolid Custom Elements ein einfaches Inhaltselement für Öffnungszeiten erstellt wird.
Ziel ist es,
• im Backend Öffnungszeiten für vormittags und nachmittags einzugeben
• auch Freitext mit zu vergeben
• der heutige Tag soll mit einer eigenen Klasse versehen werden
• im Frontend wird das Twig-Template dargestellt
Hinweis
Der Beitrag beinhaltet kein CSS. Je nach eigenen Anwendungsfall kann das Template - durch dich selbst - mit Framework-Klassen angepasst werden, oder dein eigenes CSS mit erstellt werden.
Erstelle dir zwei neue Dateien, die du unter /templates/myLayout/
ablegst:
rsce_openhours_config.php
rsce_openhours.html.twig
Zuerst erstellen wir das Inhaltselement, das im Backend ausgewählt und befüllt werden kann.
'standardFields' => ['cssID', 'headline'],
... damit kann eine Überschrift eingegeben werden und dem Inhaltselement für das Frontend auch eine Klasse und eine ID mitgegeben werden.'contentCategory' => 'miscellaneous',
... damit taucht unser RSCE in den Inhaltselementen unter 'Verschiedenes' auf'moduleCategory' => 'miscellaneous',
... damit taucht unser RSCE in den Frontendmodulen unter 'Verschiedenes' auf und kann damit an mehreren Stellen - durch einmalige Pflege im Backend - eingefügt werden
<?php
## rsce_openhours_config.php
return array(
'label' => [
'de'=> ['Öffnungszeiten','Erstellt ein Inhaltselement, in dem Öffnungszeiten dargestellt werden.'],
],
'types' => ['content','module'],
'standardFields' => ['cssID', 'headline'],
'contentCategory' => 'miscellaneous',
'moduleCategory' => 'miscellaneous',
'fields' => [
'monday' => [
'label' => [
'de' => ['Montag','Geben Sie die Öffnungszeit ein (z.B. 9:00 - 12:00)'],
],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w50',
],
],
'mondayexp' => [
'label' => [
'de' => ['Montag','Geben Sie die Öffnungszeit ein (z.B. 14:00 - 18:00)'],
],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w50',
],
],
'tuesday' => [
'label' => [
'de' => ['Dienstag','Geben Sie die Öffnungszeit ein (z.B. 9:00 - 12:00)'],
],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w50',
],
],
'tuesdayexp' => [
'label' => [
'de' => ['Dienstag','Geben Sie die Öffnungszeit ein (z.B. 14:00 - 18:00)'],
],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w50',
],
],
'wednesday' => [
'label' => [
'de' => ['Mittwoch','Geben Sie die Öffnungszeit ein (z.B. 9:00 - 12:00)'],
],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w50',
],
],
'wednesdayexp' => [
'label' => [
'de' => ['Mittwoch','Geben Sie die Öffnungszeit ein (z.B. 14:00 - 18:00)'],
],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w50',
],
],
'thursday' => [
'label' => [
'de' => ['Donnerstag','Geben Sie die Öffnungszeit ein (z.B. 9:00 - 12:00)'],
],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w50',
],
],
'thursdayexp' => [
'label' => [
'de' => ['Donnerstag','Geben Sie die Öffnungszeit ein (z.B. 14:00 - 18:00)'],
],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w50',
],
],
'friday' => [
'label' => [
'de' => ['Freitag','Geben Sie die Öffnungszeit ein (z.B. 9:00 - 12:00)'],
],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w50',
],
],
'fridayexp' => [
'label' => [
'de' => ['Freitag','Geben Sie die Öffnungszeit ein (z.B. 14:00 - 18:00)'],
],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w50',
],
],
'saturday' => [
'label' => [
'de' => ['Samstag','Geben Sie die Öffnungszeit ein (z.B. 9:00 - 12:00)'],
],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w50',
],
],
'saturdayexp' => [
'label' => [
'de' => ['Samstag','Geben Sie die Öffnungszeit ein (z.B. 14:00 - 18:00)'],
],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w50',
],
],
'sunday' => [
'label' => [
'de' => ['Sonntag','Geben Sie die Öffnungszeit ein (z.B. 9:00 - 12:00)'],
],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w50',
],
],
'sundayexp' => [
'label' => [
'de' => ['Sonntag','Geben Sie die Öffnungszeit ein (z.B. 14:00 - 18:00)'],
],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w50',
],
],
],
);
Im Backend erhältst du damit schon mal eine Eingabemaske, die dann auch individuell befüllt werden kann.

Ebenfalls benötigst du auch das Twig-Template für die Frontendausgabe.
Füge dir dazu in der zweiten Datei rsce_openhours.twig.html
untigen Inhalt ein.
In diesem Beispiel besteht die Ausgabe aus 3 Teilen:
- die Abfrage ob die Ausgabe im Backend oder Frontend stattfindet
- die Ausgabe selbst, inkl. den Standardblock für die Überschrift
- das Javascript für die Abfrage des aktuellen Wochentages
{% if as_editor_view %}
<span class="tl_gray limit_height">
{{ headline }}
</span>
{% else %}
{% block headline_component %}
{% set headline = headline|default(_context) %}
{% set tag_name = headline.tag_name|default('h1') %}
<{{ tag_name }}{% block headline_attributes %}{{ headline.attributes|default }}{% endblock %}>
{%- block headline_inner -%}
{{ headline.text|insert_tag_raw }}
{%- endblock -%}
</{{ tag_name }}>
{% endblock %}
<div class="{{ class }} open-hours" {{ cssID|raw }}>
<ul>
{% if monday or mondayexp %}
<li><span>Montag </span><span>{{ monday }}</span>{% if mondayexp %} und <span>{{ mondayexp }}</span>{% endif %}</li>
{% endif %}
{% if tuesday or tuesdayexp %}
<li><span>Dienstag </span><span>{{ tuesday }}</span>{% if tuesdayexp %} und <span>{{ tuesdayexp }}</span>{% endif %}</li>
{% endif %}
{% if wednesday or wednesdayexp %}
<li><span>Mittwoch </span><span>{{ wednesday }}</span>{% if wednesdayexp %} und <span>{{ wednesdayexp }}</span>{% endif %}</li>
{% endif %}
{% if thursday or thursdayexp %}
<li><span>Donnerstag </span><span>{{ thursday }}</span>{% if thursdayexp %} und <span>{{ thursdayexp }}</span>{% endif %}</li>
{% endif %}
{% if friday or fridayexp %}
<li><span>Freitag </span><span>{{ friday }}</span>{% if fridayexp %} und <span>{{ fridayexp }}</span>{% endif %}</li>
{% endif %}
{% if saturday or saturdayexp %}
<li><span>Samstag </span><span>{{ saturday }}</span>{% if saturdayexp %} und <span>{{ saturdayexp }}</span>{% endif %}</li>
{% endif %}
{% if sunday or sundayexp %}
<li><span>Sonntag </span><span>{{ sunday }}</span>{% if sundayexp %} und <span>{{ sundayexp }}</span>{% endif %}</li>
{% endif %}
</ul>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const todayIndex = (new Date().getDay() + 6) % 7 + 1;
const todayElement = document.querySelector(`.open-hours ul li:nth-child(${todayIndex})`);
if (todayElement) {
todayElement.classList.add('today');
}
});
</script>
{% endif %}
Hinweise
- lege die beiden notwendigen RSCE-Dateien immer bereits an. Ist keine
rsce_mytemplate.html.twig
vorhanden, wird dir im Backend auch dein Inhaltselement nicht bereit gestellt. - hast du im Template z.B. Javascript mit eingefügt, kann es sein, dass im Backend - in diesem Artikel - Funktionen nicht mehr korrekt funktionieren. Zum Beispiel das Kopieren von Inhaltselementen wird nicht mehr ausgeführt.
Abhilfe verschafft dann die Anpassung der Ausgabe im Frontend. In diesem Beispiel durch die Abfrage überas_editor_view
.
Wie du dabei erkennst, erhält der heutige Tag - sofern im Backend befüllt - die Klasse 'today
' mitgeliefert. Damit kannst du den heutigen Tag zum Beispiel gesondert farblich markieren.
Wenn du ein *.html5 Template hierzu suchst, dann einfach hier lang » Contao Community Forum.
Kommentare
Einen Kommentar schreiben