Zur Startseite
Ai generiert, Weihnachten, Laterne.

Adventskalender, eine Bauanleitung für deine Website

Du kannst deiner Fantasie freien Lauf lassen! In Joomla 5.2 gibt es ein neues Modul für Beiträge. Viviana Menzel zeigt uns, wie man das Modul für einen Adventskalender benutzt. Lass dich inspirieren und werde kreativ!

In Deutschland gibt es den Adventskalender schon lange. In den letzten Jahren wurde er auch in anderen Ländern immer beliebter. Der Adventskalender wurde ursprünglich für Kinder gemacht, damit sie die Tage bis Weihnachten zählen können. Heute freuen sich auch Erwachsene über Süßigkeiten oder kleine Geschenke, die sie jeden Tag bis Weihnachten bekommen. Und natürlich gibt es inzwischen auch zahllose Online-Adventskalender mit Gewinnen ohne Ende.

Vor einigen Jahren gab es eine gute Erweiterung für Joomla, mit der man Adventskalender erstellen konnte. Viviana hatte diese für eine Tierschutzorganisation im Einsatz, um auf die Tiere aufmerksam zu machen. Diese Erweiterung wird nicht mehr weiterentwickelt. Als ein Kunde sie dann letztens um einen Adventskalender bat, musste eine neue Lösung her. Vorgabe: Es sollte etwas Einfaches sein, das nicht gewartet werden muss, da es nur einmal im Jahr gebraucht wird.

Mit Joomla 5.2 wurde ein neues Modul eingeführt, das Modul "Beiträge". Es besteht aus fünf Teilen, die früher alle als einzelne Module erhältlich waren. Weitere Informationen dazu gibt es auf der Hilfeseite: https://docs.joomla.org/Help5.x:Site_Modules:_Articles. Viviana nutzt das Modul schon auf neuen Websites und hat auch einige Anpassungen dafür gemacht. Im folgenden Artikel zeigen wir dir, wie auch du einen Adventskalender für dich oder deine Kunden mithilfe des Moduls erstellen kannst.

Vorbereitung

Um den Adventskalender zu erstellen, benötigen wir:

  1. Eine Kategorie (nehmen wir hier „Advent“)
  2. Ein benutzerdefiniertes Feld vom Typ Kalender für die Beiträge namens Adventdatum (zunächst eine Feldgruppe „Advent“ erstellen) und der Feldgruppe sowie der Kategorie Advent zuweisen.
    Wir werden dieses Feld verwenden, um zu definieren, welches „Türchen“ im Adventskalender jeden Tag geöffnet werden kann.
  3. 24 einzelne Beiträge (z. B. Tag 1, Tag 2, …, Tag 24) mit jeweils einem Einleitungsbild und einem zugewiesenen Adventdatum (Tag 1 = 01.12.2024 usw.). Der Inhalt des Artikels kann beliebig sein: ein Rezept, ein Gedicht, ein Bild usw.

Override des Beiträge-Moduls im (Child-)Template 

Das Modul besteht aus drei Dateien:

  • default.php
  • default_items.php
  • default_titles.php

Da hier nur einige wenige Parameter aus dem Modul verwenden werde, haben wir uns für eine einfache Variante entschieden und erstellen nur eine Datei namens advent.php und fügen den folgenden Code ein, um ein Grid (6x4) anzuzeigen, das nur die Einleitungsbilder der beiträge enthält. Die Bilder sind anklickbar, wenn das Datum im Feld Adventdatum mit dem heutigen Tag übereinstimmt oder in der Vergangenheit liegt. Da wir hier nicht das Erstellungs- oder Veröffentlichungsdatum des Beitrags verwenden, hat den Hintergrund, dass wir bereits alle 24 Bilder/Türchen anzeigen wollen. Der Beitrag wird dann bei Klick in einem modalen Fenster geöffnet und zeigt den Inhalt vollständig an.

advent.php

Die advent.php muss im Template abgelegt werden im Ordner: dein-theme/html/mod_articles

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_articles
 *
 * @copyright   (C) 2024 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

use Joomla\CMS\Factory;
use Joomla\CMS\Layout\LayoutHelper;
use Joomla\Component\Fields\Administrator\Helper\FieldsHelper;
use Joomla\CMS\Router\Route;

/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
$wa = $app->getDocument()->getWebAssetManager();
$wa->useScript('joomla.dialog-autocreate');

if (!$list) {
	return;
}

$items = $list;
$today = Factory::getDate()->format('Y-m-d');

// Set up the modal options that will be used for module editor
$popupOptions = [
	'popupType'  => 'iframe',
	'className'  => 'adventskalender',
];
?>

<div class="advent-grid">
	<?php foreach ($items as $item) : ?>
		<?php
		$images  = json_decode($item->images);

		$layoutAttr = [
			'src' => $images->image_intro,
			'alt' => empty($images->image_intro_alt) ? '' : $images->image_intro_alt,
		];

		// Get the custom fields for this article
		$jcfields = FieldsHelper::getFields('com_content.article', $item, true);

		// Create an associative array for easier access by field name
		foreach ($jcfields as $jcfield) {
			$jcfields[$jcfield->name] = $jcfield;
		}

		// Ensure the adventdate field exists and is a valid date
		$adventDate = isset($jcfields['adventdatum']) ? date('Y-m-d', strtotime($jcfields['adventdatum']->value)) : null;

		// Set up popup options
		$popupOptions['src'] = Route::_('index.php?option=com_content&view=article&id=' . $item->id . '&catid=' . $item->catid . '&layout=modal&tmpl=component', false);
		$popupOptions['textHeader'] = $item->title;
		?>

        <div class="mod-articles-advent-item-content">
			<?php if ($adventDate && $adventDate <= $today) : ?>
                <button type="button"
                        data-joomla-dialog="<?php echo htmlspecialchars(json_encode($popupOptions, JSON_UNESCAPED_SLASHES)) ?>"
                        class="btn btn-link advent-link"
                        aria-label="<?php echo $item->title; ?>"
                        id="title-<?php echo $item->id; ?>"
                        data-module-id="<?php echo $item->id; ?>">
                    <figure class="advent-item-image">
						<?php echo LayoutHelper::render('joomla.html.image', $layoutAttr); ?>
                    </figure>
                </button>
			<?php else : ?>
                <figure class="advent-item-image">
					<?php echo LayoutHelper::render('joomla.html.image', $layoutAttr); ?>
                </figure>
			<?php endif; ?>
        </div>
	<?php endforeach; ?>
</div>

Einige Zeilen erklärt:

Mit Zeile 19 erhalten wir das Skript zum Erstellen modaler Fenster. Diese Funktion ist Teil des Joomla-Kerns:

$wa->useScript('joomla.dialog-autocreate');

Mit diesen Zeilen erhalten wir die Bilder aus den Artikeln und legen einige Attribute fest:

$images  = json_decode($item->images);
            $layoutAttr = [
                'src' => $images->image_intro,
                'alt' => empty($images->image_intro_alt) ? '' : $images->image_intro_alt,
            ];

Wir benötigen auch das benutzerdefinierte Feld aus jedem Türchen-Beitrag. Dies holen wir uns in einer foreach-Schleife:

$jcfields = FieldsHelper::getFields('com_content.article', $item, true);
            foreach($jcfields as $jcfield) {
                $jcfields[$jcfield->name] = $jcfield;
            }

In Zeile 54 wird sichergestellt, dass das Feld 'adventdatum' gefüllt ist und auch im entsprechenden Datumsformat vorliegt. Das Ergebnis landet in der neuen Variable $adventDate.

$adventDate = isset($jcfields['adventdatum']) ? date('Y-m-d', strtotime($jcfields['adventdatum']->value)) : null;

Die Zeilen 29 - 32 und 57 - 58 sind für das Pop-up bzw. Modale-Fenster relevant.

In Zeile 62 wird abgefragt, ob $adventDate gesetzt ist und vergleichen dann den Inhalt auf kleiner-gleich mit $today, welches wir in Zeile 26 mit dem heutigen Datum setzen.

<?php if ($adventDate && $adventDate <= $today) : ?>

Beiträge, die „heute“ oder früheren Tagen zugeordnet sind, werden mithilfe eines Buttons um das Einleitungsbild herum anklickbar. Türchen in der Zukunft, zeigen nur das Bild an. Zeilen 61 - 78:

<div class="mod-articles-advent-item-content">
	<?php if ($adventDate && $adventDate <= $today) : ?>
        <button type="button"
                data-joomla-dialog="<?php echo htmlspecialchars(json_encode($popupOptions, JSON_UNESCAPED_SLASHES)) ?>"
                class="btn btn-link advent-link"
                aria-label="<?php echo $item->title; ?>"
                id="title-<?php echo $item->id; ?>"
                data-module-id="<?php echo $item->id; ?>">
            <figure class="advent-item-image">
				<?php echo LayoutHelper::render('joomla.html.image', $layoutAttr); ?>
            </figure>
        </button>
	<?php else : ?>
        <figure class="advent-item-image">
			<?php echo LayoutHelper::render('joomla.html.image', $layoutAttr); ?>
        </figure>
	<?php endif; ?>
</div>

CSS Anpassungen

Das folgende CSS in der user.css von Cassiopeia hinzugefügt werden:

.advent-grid {
    display: grid;
    grid-template-columns: repeat(6,minmax(100px,1fr));
    gap: .5rem;
    figure {
      margin: 0;
    }
    .advent-link {
      padding: 0;
      text-decoration: none;
      color: currentColor;
      width: 100%;
      height: 100%;
    }
    .mod-articles-advent-item-content {
      aspect-ratio: 1;
      transition: all .2s ease-in-out;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.16);
      &:hover {
        transform: scale(1.025);
      }
    }
    span {
      font-size: 4rem;
      color: #fff;
    }
  }
@media (max-width: 768px) {
  .advent-grid {
    grid-template-columns: repeat(3,minmax(80px,1fr));
  }
}

Einstellungen im Beiträge-Modul

Wie oben erwähnt, werden wir nur einige wenige Parameter aus dem Modul verwenden:

  • Modus: Normal
  • Anzahl: 24
  • Kategorie: Advent
  • Im Reiter „Reihenfolge“ die Option „Zufällig“
  • Unter „Erweitert“ das Layout „advent“ auswählen
Moduleinstellungen
Moduleinstellungen 1
Moduleinstellungen 2
Moduleinstellungen 2
Moduleinstellungen 3
Moduleinstellungen 3

Das Ergebnis kann dann wie folgt aussehen

Beispiel Adventskalender
Beispiel Adventskalender

There is one more thing!

Wir haben da noch eine zweite Möglichkeit, einen Adventskalender auf Basis von 24 Beiträgen, des Beiträge Moduls und eines angepassten Override zu erstellen.
Dazu nutzen wir ein schickes Hintergrundbild und lassen uns aus dem benutzerdefinierten Feld 'adventdatum' den Wochentag als Türchen-Zahl anzeigen.

Der zweite Override-Code für mod_articles sieht wie folgt aus:

advent2.php

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_articles
 *
 * @copyright   (C) 2024 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

use Joomla\CMS\Factory;
use Joomla\CMS\Layout\LayoutHelper;
use Joomla\Component\Fields\Administrator\Helper\FieldsHelper;
use Joomla\CMS\Router\Route;

/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
$wa = $app->getDocument()->getWebAssetManager();
$wa->useScript('joomla.dialog-autocreate');

if (!$list) {
	return;
}

$items = $list;
$today = Factory::getDate()->format('Y-m-d');

// Set up the modal options that will be used for module editor
$popupOptions = [
	'popupType'  => 'iframe',
	'className'  => 'adventskalender',
];
?>

<div class="advent-grid advent-bg">
	<?php foreach ($items as $item) : ?>
		<?php
		$images  = json_decode($item->images);
		$layoutAttr = [
			'src' => $images->image_intro,
			'alt' => empty($images->image_intro_alt) ? '' : $images->image_intro_alt,
		];

		// Get the custom fields for this article
		$jcfields = FieldsHelper::getFields('com_content.article', $item, true);

		// Create an associative array for easier access by field name
		foreach($jcfields as $jcfield) {
			$jcfields[$jcfield->name] = $jcfield;
		}

		// Ensure the adventdate field exists and is a valid date
		$adventDate = isset($jcfields['adventdatum']) ? date('Y-m-d', strtotime($jcfields['adventdatum']->value)) : null;

		// Set up popup options
		$popupOptions['src'] = Route::_('index.php?option=com_content&view=article&id=' . $item->id . '&catid=' . $item->catid . '&layout=modal&tmpl=component', false);
		$popupOptions['textHeader'] = $item->title;
		?>

        <div class="mod-articles-advent-item-content">
			<?php if ($adventDate && $adventDate <= $today) : ?>
                <button type="button"
                        data-joomla-dialog="<?php echo htmlspecialchars(json_encode($popupOptions, JSON_UNESCAPED_SLASHES)) ?>"
                        class="btn btn-link advent-link"
                        aria-label="Öffnet <?php echo $item->title; ?>"
                        id="title-<?php echo $item->id; ?>"
                        data-module-id="<?php echo $item->id; ?>">
                    <span><?php echo date('j', strtotime($adventDate)); ?></span>
                </button>
			<?php else : ?>
                <span><?php echo date('j', strtotime($adventDate)); ?></span>
			<?php endif; ?>
        </div>
	<?php endforeach; ?>
</div>

Das folgende CSS einfach noch in der user.css ergänzen

.advent-bg {
  padding: .5rem;
  background-image: url(../../../../../images/adventskalender/dein-bildname.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  .mod-articles-advent-item-content {
    box-shadow: 3px 3px 3px rgba(255, 255, 255, 0.5);
    border: 1px solid #d5d5d5;
  }
}

Und hier das Ergebnis

Alternativer Override advent2.php
Alternativer Override advent2.php

And there is one more thing

Natürlich ist die Idee nicht auf Adventskalender beschränkt. Sie können sie auch für eine Werbeveranstaltung verwenden, z. B. um während der Black Week Rabatte auf Produkte oder Dienstleistungen zu gewähren. Sie können den Code so ändern, dass sich die „Türchen“ nur am zugewiesenen Tag öffnen:

<?php if ($adventDate && $adventDate == $today) : ?>

"If I have a thousand ideas and only one turns out to be good, I am satisfied." - Alfred Nobel

In diesem Sinne wünschen wir allen viel Spaß beim Lesen und Nachbauen.
Eine besinnliche Vorweihnachtszeit.

Euer joomla.de Team

Ressourcen

Gist mit komplettem Code zum Kopieren: https://gist.github.com/tecpromotion/1e172499e3ab08a3d63ff560b8e9adf1 

Quelle: Headerbild von beasternchen auf Pixabay, weitere Bilder von Pixabay bzw. aus dem Original-Artikel von Viviana Menzel im Joomla-Magazin.

Anmerkung der Redaktion: Die Inhalte wurden zum Original-Artikel teils frei übersetzt und angepasst.

 

 

Adventskalender - 24 Tipps & Tricks

22
24
17
13
14
8
18
3
15
20
6
9
10
23
7
12
4
19
21
11
16
5
2
1
Mastodon