La tambouille des râleuses
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le deal à ne pas rater :
Smartphone Xiaomi 14 – 512 Go- 6,36″ 5G Double SIM à 599€
599 €
Voir le deal

Aller en bas
Pêpêche
Pêpêche
Mascotte
Messages : 4428

Afficher un texte en fonction de la date du jour Empty Afficher un texte en fonction de la date du jour

Mar 28 Mai 2019 - 15:48

Toutes versions

Afficher un texte en fonction de la date du jour

Bonjour bonjour,

Dans ce tutoriel, nous allons voir comment afficher un message particulier en fonction de la date du jour. Cette astuce peut être idéale pour mettre en place des "promotions" ou "offres spéciales" sur des forums de pub, ou encore pour préciser la période en cours sur un forum rpg.

Voici un exemple de rendu : clic.

Ici le texte se met à jour avec la date du jour et j'ai mis en place ce qu'on appelle un datepicker (calendrier) pour que tu puisses changer la date et voir le rendu par toi-même.

Voici les dates/périodes pour lesquelles une information est renseignée
• tous les 1er du mois et de chaque année ;
• le 20 octobre de chaque année ;
• du 05 au 15 de chaque mois et de chaque année ;
• du 01 au 30 juin 2019 ;
• les 28 et 29 mai 2019.

Préparation

Cette astuce fonctionne pour toutes les versions de forum et peut être utilisée partout, même dans les messages.
Spoiler:

HTML

Il te suffit juste de placer la div suivante là où tu veux que l'information s'affiche
Code:
<div id="date-infos"></div>

La CSS

Le JS remplira la div de cette façon :
Code:
<div id="date-infos">
 <div id="titre-date">Où es-tu ?</div>
 <div id="content-date">Soleil où es-tu ? Mon coeur et mon corps se meurent sans toi... Reviens-moi vite que la motivation t'accompagne !</div>
</div>
C'est-à-dire avec un titre ayant un id, et un bloc ayant un id.

A toi de faire la CSS qui te convient et de la placer dans la feuille de style de ton forum (Panneau d'administration > Affichage > Images et Couleurs > Couleurs >Feuille de style CSS).

Par exemple, voici celui du tutoriel :
Code:
#date-infos{
 background: #f2eacb;
 border: #dbc8a4 2px solid;
 border-radius: 30px 8px;
 margin: auto;
 padding: 10px;
 position: relative;
 width: 80%;
}

#date-infos #titre-date{
 color: #e0704e;
 font: bold 24px/1 'Pacifico', cursive;
 position: absolute;
 text-align: center;
 text-shadow: #dbc8a4 1px 1px 2px, #dbc8a4 -1px -1px 2px, #dbc8a4 1px -1px 2px, #dbc8a4 -1px 1px 2px;
 top: -18px;
 width: 100%;
}

#date-infos #content-date{
 color: #444 !important;
 box-shadow: 0 0 7px rgba(219, 200, 164, 0.6);
 border-radius: 30px 8px;
 padding: 10px;
}

#date-infos #content-date a{
 color: #e0704e !important;
 text-decoration: none !important;
}

#date-infos #content-date a:hover{
 color: #dbc8a4 !important;
 text-decoration: underline !important;
}

Le javascript

On va ensuite créer un javascript qu'on va appeler sur toutes les pages. Pour cela, on va aller dans Panneau d'administration > Modules > HTML & JAVASCRIPT > Gestion des codes Javascript.

Le js contiendra ceci :
Code:
$( function() {

 /* On cherche la date d'aujourd'hui => A ne pas modifier */
 var dateNow = new Date(),
 todayMonth = dateNow.getMonth() + 1,
 todayYear = dateNow.getFullYear();
 /* C'est bon on a récupéré la date du jour */

 /*** Les périodes / Date ***/
 var listePeriode = [
 {
 debut: '1/'+ todayMonth +'/'+ todayYear +'',
 fin: '1/'+ todayMonth +'/'+ todayYear +'',
 titre: 'Un peu de lecture',
 texte: 'Le <strong>bilan du mois</strong> est en ligne. Viens le <a href="#">lire</a>'
 },{
 debut: '20/10/'+ todayYear +'',
 fin: '20/10/'+ todayYear +'',
 titre: 'Bon anniversaire !',
 texte: 'Eh eh eh ! Aujourd\'hui, c\'est l\'anniversaire de <strong>Miettes</strong>. Viens vite le lui <a href="#">souhaiter</a> !'
 },{
 debut: '5/'+ todayMonth +'/'+ todayYear +'',
 fin: '15/'+ todayMonth +'/'+ todayYear +'',
 titre: 'Inscris-toi à la publicité',
 texte: 'Comme tous les mois, nous te proposons d\'ajouter ta <strong>publicité au format réduit</strong> dans la pub du forum. Pour cela, il te suffit de venir t\'inscrire <a href="#">ici</a>'
 },{
 debut: '1/6/2019',
 fin: '30/6/2019',
 titre: 'Waouhhhh',
 texte: 'Eh bien ! Voilà <strong>7 ans</strong> que ce forum de test est créé :o'
 },{
 debut: '28/5/2019',
 fin: '29/5/2019',
 titre: 'Où es-tu ?',
 texte: 'Soleil où es-tu ? Mon coeur et mon corps se meurent sans toi... Reviens-moi vite que la motivation te suit !'
 }
 /*{
 debut: '',
 fin: '',
 titre: '',
 texte: ''
 }*/];

 // On définit le html qu'on veut afficher
 function texteAAfficher(contenu){
 var txt;

 if(contenu){
 // si une date ou période a été trouvée
 txt = '<div id="titre-date">'+ contenu.titre +'</div><div id="content-date">'+ contenu.texte +'</div>';
 }else{
 // si aucune date n'a été trouvée
 txt = '<div id="titre-date">Oups...</div><div id="content-date">Il n\'y a rien de prévu aujourd\'hui.</div>';
 }

 return txt;
 };

 // On cherche le texte à afficher
 function showText(date, listePeriode){
 var isPeriode = false,
 dateInfo = date.getTime(),
 infosDate;

   // On parcourt le tableau pour savoir quoi afficher
 for( var i = 0 ; i < listePeriode.length ; i ++){
 debut = listePeriode[i].debut ;
 debut = debut.split('/');
 d_periode = Date.parse(""+ debut[2] +", "+ debut[1] +","+ debut[0] +"");

 fin = listePeriode[i].fin ;
 fin = fin.split('/');
 f_periode = Date.parse(""+ fin[2] +", "+ fin[1] +","+ fin[0] +"");
 
 // la date du jour est comprise dans une période
 // ou
 // la date du jour est le premier jour d'une période
 // ou
 // la date du jour est le dernier jour d'une période
 if((dateInfo > d_periode && dateInfo < f_periode) || dateInfo == d_periode || dateInfo == f_periode ){
 // Dans ce cas, on va afficher du texte
 infosDate = texteAAfficher(listePeriode[i]);
 isPeriode = true;
 break;
 }
 };

 // On n'a pas trouvé de date correspondante
 if(!isPeriode){
 infosDate = texteAAfficher();
 }

 document.getElementById('date-infos').innerHTML = infosDate;

 }

 // On déclenche la fonction qui va chercher s'il y a du texte à afficher
 if($("#date-infos").length > 0){
 showText(dateNow, listePeriode );
 }

 });
Revenir en haut
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
Les coups de ♥ des Râleuses

Post-It des Râleuses