In questo articolo, Viviana ci mostra come è possibile utilizzare questo modulo per creare un Calendario dell'Avvento. Lasciati ispirare e scatena la tua creatività!
Il Calendario dell'Avvento ha una lunga tradizione in Germania e negli ultimi anni è diventato popolare anche in altri paesi. Originariamente sviluppato per aiutare i bambini a contare i giorni prima di Natale, si è evoluto per trattare anche gli adulti con dolci o piccoli regali, uno ogni giorno fino a Natale. E naturalmente ci sono anche calendari dell'avvento online.
Alcuni anni fa c'era un'estensione per Joomla per creare calendari dell'avvento e l'ho usata per diversi anni per un cliente. Un'organizzazione per la protezione degli animali ha utilizzato il calendario dell'avvento per presentare belle storie, chiedere aiuto o introdurre animali domestici speciali. Questa estensione non viene più sviluppata attivamente e come un altro cliente mi ha chiesto un calendario dell'avvento per il loro sito web ho dovuto cercare una nuova soluzione. Volevo qualcosa di leggero che non necessitasse di manutenzione in quanto è un requisito "una volta all'anno".
Joomla 5.2 ha introdotto un nuovo modulo, il modulo articoli (internamente noto come "modulo contenuto per governarli tutti" - liberamente adattato da "Il Signore degli Anelli"). Cinque (dei sette) moduli dell'articolo precedente sono stati combinati per fornire maggiore flessibilità (per maggiori informazioni consultare la pagina di aiuto: https://docs.joomla.org/Help5.x:Site_Modules:_Articles). Uso già il modulo su nuovi siti web e ho anche creato alcuni override per questo. In questo articolo voglio mostrarvi come ho intenzione di implementare un calendario dell'avvento per il mio cliente utilizzando il modulo Articoli.
Preparazione
Per creare il Calendario dell'Avvento, abbiamo bisogno di:
- Una categoria (l'ho chiamata "Avvento")
- Un campo personalizzato dal tipo Calendario per gli articoli (Ho creato per la prima volta un gruppo di campi "Avvento" e assegnato il campo denominato "Giorno" al gruppo e alla categoria). Useremo questo campo per definire quale "porta" nel calendario dell'avvento può essere aperta ogni giorno
- 24 articoli (ad esempio Giorno 1, Giorno 2, ..., Giorno 24) ciascuno con un'immagine introduttiva e un giorno assegnato (Giorno 1 = 1 ° dicembre e così via). Il contenuto dell'articolo può essere quello che vuoi: una ricetta, una poesia, un'immagine...
Override
Il modulo Articoli è composto da tre file:
- default.php
- default_items.php
- default_titles.php
Dal momento che userò solo alcuni parametri dal modulo ho creato un solo file denominato advent.php e riscrivi il codice per visualizzare una griglia (6x4) contenente solo le immagini introduttive degli articoli. Gli articoli saranno cliccabili quando il giorno assegnato corrisponde oggi: Il giorno 2 è assegnato al 2 dicembre, l'articolo può essere visto prima, ma diventerà cliccabile il 2 dicembre. L'articolo si aprirà su una finestra modale.
advent.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">
<?php foreach ($items as $item) : ?>
<?php
// Get the images for this article
$images = json_decode($item->images);
// 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 field exists and is a valid date
$openDay = isset($jcfields['day']) ? date('Y-m-d', strtotime($jcfields['day']->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;
$layoutAttr = [
'src' => $images->image_intro,
'alt' => empty($images->image_intro_alt) ? '' : $images->image_intro_alt,
];
?>
<div class="mod-articles-advent-item-content">
<?php if ($openDay <= $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>
Spiegazione delle righe
Con questa riga otteniamo lo script per creare finestre modali, questa funzione fa parte del core di Joomla:
$wa->useScript('joomla.dialog-autocreate');Il modulo contiene il codice per visualizzare l'immagine introduttiva dell'articolo, ma per evitare conflitti con altri parametri impostati per il sito web, ho deciso di riscrivere anche questa parte. Con queste righe otteniamo le immagini dagli articoli e impostiamo alcuni attributi:
$images = json_decode($item->images);
$layoutAttr = [
'src' => $images->image_intro,
'alt' => empty($images->image_intro_alt) ? '' : $images->image_intro_alt,
];Abbiamo anche bisogno del campo personalizzato:
$jcfields = FieldsHelper::getFields('com_content.article', $item, true);
foreach($jcfields as $jcfield) {
$jcfields[$jcfield->name] = $jcfield;
}Questi
// Set up the modal options that will be used for module editor
$popupOptions = [
'popupType' => 'iframe',
'className' => 'adventskalender',
];e questi
$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;sono opzioni per la finestra modale. Utilizziamo il titolo dell'articolo come titolo della finestra modale.
Otteniamo la data corrente:
$today = Factory::getDate()->format('Y-m-d');Controlliamo se il campo esiste e convertiamo il valore nello stesso formato di data:
$openDay = isset($jcfields['day']) ? date('Y-m-d', strtotime($jcfields['day']->value)) : null;e confrontiamo i due valori:
<?php if ($openDay <= $today) : ?>Gli articoli assegnati a "oggi" o a giorni precedenti diventano cliccabili tramite un pulsante attorno all'immagine. Gli articoli assegnati a giorni futuri mostrano solo l'immagine:
<?php if ($openDay <= $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; ?>
CSS
Ho aggiunto il seguente CSS al file user.css di Cassiopeia:
.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));
}
}
Modulo
Come accennato in precedenza, utilizzeremo solo alcuni parametri del modulo:
- Modalità: Normale
- Articoli da visualizzare: 24
- Seleziona la categoria (ad esempio, Avvento)
- In Ordinamento seleziona "Casuale"
- In Avanzate seleziona il layout "Avvento"
Puoi posizionare il modulo (ad esempio top-a in Cassiopea) oppure inserirlo in un articolo collegato a una voce di menu.
Il risultato è il seguente:
Cliccando su una "porta" si ottiene il contenuto dell'articolo corrispondente in una casella modale:
Se il collegamento all'articolo non funziona, puoi modificare popupOptions in:
$popupOptions['src'] = 'index.php?option=com_content&view=article&id=' . $item->id . '&catid=' . $item->catid . '&layout=modal&tmpl=component';In alternativa, puoi creare una voce di menu per la categoria. Per mantenere segreti gli articoli, puoi impostare la voce di menu in modo che non venga visualizzata nel menu.
Layout alternativo
Un'altra opzione per creare un calendario dell'avvento è quella di usare un'immagine di sfondo e visualizzare gli articoli come riquadri con il numero del giorno. Il codice di override è il seguente:
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\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
// Get the images for this article
$images = json_decode($item->images);
// 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 field exists and is a valid date
$openDay = isset($jcfields['day']) ? date('Y-m-d', strtotime($jcfields['day']->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;
$layoutAttr = [
'src' => $images->image_intro,
'alt' => empty($images->image_intro_alt) ? '' : $images->image_intro_alt,
];
?>
<div class="mod-articles-advent-item-content">
<?php if ($openDay <= $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; ?>">
<span><?php echo date('j', strtotime($openDay)); ?></span>
</button>
<?php else : ?>
<span><?php echo date('j', strtotime($openDay)); ?></span>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>Invece dell'immagine introduttiva dell'articolo ho estratto il giorno dal valore del campo:
<?php echo date('j', strtotime($openDay)); ?>Sono necessarie alcune righe CSS aggiuntive:
.advent-bg {
padding: .5rem;
background-image: url(../../../../../images/advent/christmas-background-4621177_1920.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;
}
}E il risultato è molto bello:
Naturalmente l'idea non si limita ai calendari dell'avvento. Puoi utilizzarla anche per un evento promozionale, ad esempio per offrire sconti su prodotti o servizi durante la Black Week. Puoi modificare il codice per far aprire le "porte" solo nel giorno assegnato:
<?php if ($openDay == $today) : ?>
Con questo spirito: prova il nuovo modulo Articoli, gioca con i parametri e trova nuove idee per il tuo sito web!
Un grande ringraziamento a Stefan Wendhausen per aver verificato e migliorato il codice.
Le immagini provengono da Pixabay.
Alcuni articoli pubblicati sulla rivista Joomla Community Magazine rappresentano l'opinione personale o l'esperienza dell'autore su un argomento specifico e potrebbero non essere in linea con la posizione ufficiale del progetto Joomla.
