Saisonschalter mit CSS

Eine einfache Möglichkeit, um mehrere Content-Elemente saisonabhängig in verschiedenen Artikeln anzuzeigen.
Dazu reichen CSS und Contao Insert-Tags.

Im Seitenlayout als Body-Klasse diesen Insert-Tag eintragen:

month{{date::m}}

Das gibt aktuell <body class="month10"> aus.

Man kann die Body-Klasse auch im Twig-Template eintragen:

{# templates/fe_page.html.twig #}
{% extends '@Contao/fe_page' %}

{# Ergänzt die Body-Klasse mit month+aktueller Monat(z.B. month01 #}
{% set class = class ~ ' ' ~ 'month' ~ time|date("m") %}

Die Inhaltselemente erhalten, je nachdem wann sie angezeigt werden sollen, die CSS-Klassen: spring, summer, autumn oder winter.

Ich nutze terminal42/contao-node, um die saisonabhängigen Inhalte zu pflegen und platziere sie in der Seite mit:

{{insert_node::15}}

 

Frühling

Dieser Inhalt wird im Frühling angezeigt und danach versteckt.

Body-Klasse: month10
Element-Klasse: spring

Sommer

Dieser Inhalt wird im Sommer angezeigt und danach versteckt.

Body-Klasse: month10
Element-Klasse: summer

Herbst

Dieser Inhalt wird im Herbst angezeigt und danach versteckt.

Body-Klasse: month10
Element-Klasse: autumn

Winter

Dieser Inhalt wird im Winter angezeigt und danach versteckt.

Body-Klasse: month10
Element-Klasse: winter

CSS 

/* Season switch */
.spring,
.summer,
.autumn,
.winter {
    display: none;
}
.month03 .spring,
.month04 .spring,
.month05 .spring {
    display: block;
}
.month06 .summer,
.month07 .summer,
.month08 .summer {
    display: block;
}
.month09 .autumn,
.month10 .autumn,
.month11 .autumn {
    display: block;
}
.month12 .winter,
.month01 .winter,
.month02 .winter {
    display: block;
}

Zeitsteuerung nach Öffnungszeiten

Zeigt während der Öffnungszeiten ein Inhaltselement an und ein anderes, wenn geschlossen ist.

Benötigt wird templates/theme/js_openclosed.html5 und ein bisschen CSS.
Per Javascript werden je nach Öffnungszeiten die Body-Klassen: 'open' oder 'closed' gesetzt.
Die anzuzeigenden Inhaltselemente, alternativ auch einzelne <HTML-Tags>, erhalten die Klassen: 'offen' bzw. 'geschlossen'.

Öffnungszeiten:

MO - FR 09:30-13:00 Uhr 14:00-16:00 Uhr
SA 10:00-12:30 Uhr  
SO geschlossen  

Freitag,

Wir haben geöffnet

Wird nur während der Öffnungszeiten angezeigt.

Wir haben geschlossen

Wird nur außerhalb der Öffnungszeiten angezeigt.

templates/theme/js_openclosed.html5 

<script>
  (function () {
    var d       = new Date();
    var day     = d.getDay();
    var hours   = d.getHours();
    var minutes = d.getMinutes();
    
    if (day >= 1 && day <= 5) {               // MO(1) - FR(5)
      if ((hours == 9 && minutes >= 30 || hours > 9 && hours < 13) || (hours >= 14 && hours < 16))  {
         document.body.classList.add('open');
      } else {
         document.body.classList.add('closed');
      }
    } else if (day == 6) {                     // SA(6) 
      if (hours >= 10 && (hours == 12 && minutes < 30 || hours < 12)) {
         document.body.classList.add('open');
      } else {
         document.body.classList.add('closed');
      }
    } else {                                  // SO(0)
      document.body.classList.add('closed');
    }
  })();
</script>

CSS 

.offen,
.geschlossen {
    display: none;
}
.open .offen,
.closed .geschlossen {
    display: block;
}