• User Attivo

    [Risolto] Eventi con countdown

    sapete indicarmi un modulo-componente per segnalare eventi con conto alla rovescia dei giorni che mancano all'evento?


  • Moderatore

    Ciao pippoman.
    Al momento non è ho uno, ma potresti fare così:

    • installa un plugin per eseguire codice in moduli e articoli (ce ne sono anche di gratuiti, ad esempio Sourcerer)
    • procurati il codice per il countdown in internet (ne trovi sicuramente anche di gratuito) e inseriscilo in un modulo, che assegnerai alla posizione che vuoi

    Fatto. Facile, no? 🙂

    Francesco


  • User Attivo

    scarcity per wp funziona molto bene e permette di fare countdown personalizzati (per ip/cliente).


  • Moderatore

    @primomotore: questo è Joomla, non WordPress.
    Che tu sappia il plugin per WP "Scarcity Countdown Timer" c'entra qualcosa con "Scarcity Samurai"?


  • User Attivo

    Si è quello, ma credo ci siano anche dei cloni...Scusa mi era sfuggito che fosse joomla. 😊


  • User Attivo

    Come da tuo consiglio ho cercato un codice per il countdown.

    
    <script type="text/javascript">
    function countdown()
    {
    var_anno=2014;
    var_mese=4;
    var_giorno=25;
    var_ore=21;
    var_minuti=0;
    var_secondi=0;
    data_scandeza= new Date(var_anno,var_mese-1,var_giorno,var_ore,var_minuti,var_secondi);
    data_oggi= new Date();
    differenza=(data_scandeza-data_oggi);
    giorni=parseInt(differenza/86400000);
    differenza=differenza-(giorni*86400000);
    ore=parseInt(differenza/3600000);
    differenza=differenza-(ore*3600000);
    minuti=parseInt(differenza/60000);
    differenza=differenza-(minuti*60000);
    secondi=parseInt(differenza/1000);
    differenza=differenza-(secondi*1000);
    if (giorni <= "0" && ore <= "0" && minuti <= "0" && secondi <= "0")
    {
    document.getElementById("countdown").innerHTML="Tempo scaduto!";
    }
    else
    {
    document.getElementById("countdown").innerHTML=giorni +' giorni '+ore+' ore '+minuti+' min '+secondi+' sec';
    setTimeout("countdown()",1000)
    }
    }
    </script>
    
    <body onload="countdown()"><div id="countdown"></div>
    
    

    Dopo questo codice, ne ho trovato un altro per personalizzare i caratteri la dimensioni il colore

    
    <span style="font-family: Verdana; font-size: 12pt; color: #006600; border: 1pt solid; padding: 2px; background-color: #DDFFDD">
    <script type="text/javascript">
    <!--
    countdown()
    // end -->
    </script>
    </span>
    
    

    Vorrei sapere come posso integrare i 2 codici in modo che con il secondo posso modificare i layout del primo.


  • Moderatore

    Ciao pippoman.
    Puoi inserire le istruzioni di stile direttamente nel body (inline), così:

    
    <body style="font-family: Verdana; font-size: 12pt; color: #006600; border: 1pt solid; padding: 2px; background-color: #DDFFDD;"  onload="countdown()"><div id="countdown"></div>
    
    

    Francesco


  • Moderatore

    @pippoman: mi sono confuso, aspe', fai così:

    
    <script type="text/javascript">
    function countdown()
    {
    var_anno=2014;
    var_mese=4;
    var_giorno=25;
    var_ore=21;
    var_minuti=0;
    var_secondi=0;
    data_scandeza= new Date(var_anno,var_mese-1,var_giorno,var_ore,var_minuti,var_secondi);
    data_oggi= new Date();
    differenza=(data_scandeza-data_oggi);
    giorni=parseInt(differenza/86400000);
    differenza=differenza-(giorni*86400000);
    ore=parseInt(differenza/3600000);
    differenza=differenza-(ore*3600000);
    minuti=parseInt(differenza/60000);
    differenza=differenza-(minuti*60000);
    secondi=parseInt(differenza/1000);
    differenza=differenza-(secondi*1000);
    if (giorni <= "0" && ore <= "0" && minuti <= "0" && secondi <= "0")
    {
    document.getElementById("countdown").innerHTML="Tempo scaduto!";
    }
    else
    {
    document.getElementById("countdown").innerHTML=giorni +' giorni '+ore+' ore '+minuti+' min '+secondi+' sec';
    setTimeout("countdown()",1000)
    }
    }
    </script>
    <div style="font-family: Verdana; font-size: 12pt; color: #006600; border: 1pt solid; padding: 2px; background-color: #DDFFDD;">
    <body onload="countdown()">
    <div id="countdown"></div>
    </div>
    
    

    Se metti lo stile all'altro tag te lo applica ovviamente a tutto il body della pagina.
    Con questo sopra puoi fare copia e incolla, l'unica cosa che devi aggiungere all'inizio e alla fine è il tag per fare funzionare il codice nei moduli, che dipende dal plugin che usi. Io ad esempio con Sourcerer ci metto:

    
    {source}
    //qui va il tuo codice di sopra
    {/source}
    
    

    Fammi sapere com'è andata e se hai risolto. 🙂

    Francesco


  • User Attivo

    Grazie Francesco funziona, però cè un problemino, questo codice l'ho inserisco nell introduzione di tutti gli articoli della homepage (stile blog), però funziona solo il primo della lista. Tutti gli altri non funzionano viene visualizzato solo il bordo e il colore dello sfondo, ma non visualizza il countdown (cioè funzona solo il codice che hai inseirto tè per il layout).


  • Moderatore

    Il codice l'hai messo dove, esattamente, in un singolo articolo, in tutti gli articoli oppure in un modulo?
    E se l'ahi messo in un modulo dove è stato pubblicato il modulo?

    Puoi mostrarmi l'url? Così capisco meglio. 🙂


  • User Attivo

    ti ho mandato URL via MP


  • Moderatore

    Ho visto e credo di avere capito. Levami una curiosità: dove hai inserito lo script? Spiegami come hai fatto (modulo, articoli, ...?)


  • Moderatore

    L'hai inserito direttamente in ciascun articolo, esatto?


  • Moderatore

    Il problema non è di Joomla ma dello JavaScript.
    Posso darti immediatamente una soluzione grezza, poi ti consiglio di farti aiutare a modificare il codice in questa sezione: http://www.giorgiotave.it/forum/scripting-lato-client/

    Se apri un nuovo topic metti il link inattivo a questo e dagli un titolo diverso ed esplicativo. 😉

    Certamente se usi il tag "style" al posto del body e scrivi tanti script diversi risolvi, ma non si può fare sta cosa. Te la scrivo giusto per mostrarti che dipende dal Js.
    Prova a inserire in un articolo questo:

    
    {source}
    <script type="text/javascript">
    function countdown1()
    {
    var_anno=2014;
    var_mese=3;
    var_giorno=21;
    var_ore=21;
    var_minuti=0;
    var_secondi=0;
    data_scandeza= new Date(var_anno,var_mese-1,var_giorno,var_ore,var_minuti,var_secondi);
    data_oggi= new Date();
    differenza=(data_scandeza-data_oggi);
    giorni=parseInt(differenza/86400000);
    differenza=differenza-(giorni*86400000);
    ore=parseInt(differenza/3600000);
    differenza=differenza-(ore*3600000);
    minuti=parseInt(differenza/60000);
    differenza=differenza-(minuti*60000);
    secondi=parseInt(differenza/1000);
    differenza=differenza-(secondi*1000);
    if (giorni <= "0" && ore <= "0" && minuti <= "0" && secondi <= "0")
    {
    document.getElementById("countdown1").innerHTML="Tempo scaduto!";
    }
    else
    {
    document.getElementById("countdown1").innerHTML=giorni +' giorni '+ore+' ore '+minuti+' min '+secondi+' sec';
    setTimeout("countdown1()",1000)
    }
    }
    </script>
    <div style="font-family: Verdana; font-size: 12pt; color: #006600; border: 1pt solid; padding: 2px; background-color: #e4f3f9;">
    <style onload="countdown1()"></style>
    <div id="countdown1"></div>
    </div>
    {/source}
    
    

    In un secondo articolo inserisci invece questo:

    
    {source}
    <script type="text/javascript">
    function countdown2()
    {
    var_anno=2014;
    var_mese=3;
    var_giorno=21;
    var_ore=21;
    var_minuti=0;
    var_secondi=0;
    data_scandeza= new Date(var_anno,var_mese-1,var_giorno,var_ore,var_minuti,var_secondi);
    data_oggi= new Date();
    differenza=(data_scandeza-data_oggi);
    giorni=parseInt(differenza/86400000);
    differenza=differenza-(giorni*86400000);
    ore=parseInt(differenza/3600000);
    differenza=differenza-(ore*3600000);
    minuti=parseInt(differenza/60000);
    differenza=differenza-(minuti*60000);
    secondi=parseInt(differenza/1000);
    differenza=differenza-(secondi*1000);
    if (giorni <= "0" && ore <= "0" && minuti <= "0" && secondi <= "0")
    {
    document.getElementById("countdown2").innerHTML="Tempo scaduto!";
    }
    else
    {
    document.getElementById("countdown2").innerHTML=giorni +' giorni '+ore+' ore '+minuti+' min '+secondi+' sec';
    setTimeout("countdown2()",1000)
    }
    }
    </script>
    <div style="font-family: Verdana; font-size: 12pt; color:; border: 1pt solid; padding: 2px; background-color:;">
    <style onload="countdown2()"></style>
    <div id="countdown2"></div>
    </div>
    {/source}
    
    

    I due codici cambiano solo perché in uno compare *countdown1 *e nell'altro countdown2.
    Prova a visualizzare in "visualizzazione blog" i due articoli e dovresti vedere entrambi i countdown (l'evento adesso chiama due funzioni diverse che agiscono su elementi distinti).

    Ripeto: questa cosa non va bene, dobbiamo modificare un po' lo script, la cosa dovrebbe essere "parametrizzata". Voglio pensarci un po' per vedere se riusciamo a farla facile per Joomla, così la condividiamo con gli altri utenti.

    Francesco


  • User Attivo

    Ho fatto come hai detto, ho aperto un topic in quella sezione.


  • Moderatore

    Ancora ciao pippoman.
    Lo script "parametrizzato" l'ho postato nell'altra discussione che hai aperto, perché riguarda JavaScript indipendentemente da Joomla: http://www.giorgiotave.it/forum/scripting-lato-client/217881-usare-lo-stesso-script-nella-stessa-pagina-piu-volte.html

    Vediamo adesso come puoi usarlo più volte nella stessa pagina di Joomla.
    Devi fare due cose:

    1. Inserire lo script una sola volta nella pagina;
    2. Richiamare lo script ogni volta che ti serve con i giusti parametri.

    Il punto 1 si può fare in tanti modi. Uno di questi è creare un modulo in cui inserirai lo script, poi pubblicherai il modulo nelle pagine laddove ti serve. Questo è un metodo da *Joomlaloide *non molto rigoroso.
    Scartando per adesso la possibilità di usare un plugin, che sarebbe la cosa più semplice lato utente, puoi inserire lo script nei file delle pagine del template via FTP.

    Se ad esempio vuoi eseguire lo script in modalità "visualizzazione blog", inserirai lo script con un semplice copia e incolla in questo file:
    root di Joomla > templates > tuo template > html > com_content > category > blog.php

    Se vuoi usare lo script anche nei singoli articoli, dovrai copiarlo anche in:
    root di Joomla > templates > tuo template > html > com_content > article > default.php

    Se vorrai usarlo nella visualizzazione classica della home page, quella con gli articoli in evidenza, lo inserirai in:
    root di Joomla > templates > tuo template > html > com_content > featured > default.php

    In verità ti dico che esistono altri posti dove andare a piazzare questo script. L'importante è inserirlo una sola volta nella pagina e poi richiamarlo inserendo i 7 valori per i parametri, quello per l'idp e i 6 per la "data di scadenza".

    A proposito di idp, l'ho indicato così come abbreviazione di idpost: per non confonderti, dovendo questo parametro essere unico, ti consiglio di dargli l'id del post in cui lo inserisci. Non si tratta di un numero ma di una stringa, se quindi lo inserirai anche in modulo potrai scrivere ad esempio idp=mod38 per non confonderti con l'articolo 38. Quel che conta è che sia univoco. In un plugin, tanto per capirci, gli farei prendere in automatico l'id dell'elemento che lo contiene preceduto da un prefisso caratteristico del tipo di elemento.

    Il punto 2 è banale, basta inserire poche righe nel singolo articolo.
    Vediamo un esempio di inserimento del countdown in due articoli.
    Primo articolo (id in Joomla 127) con countdown che scade allo scoccare del 1 aprile 2014:

    
    <div style="font-family: Verdana; font-size: 12pt; color: #006600; border: 1pt solid; padding: 2px; background-color: #DDFFDD;">
    	<style onload="countdown(127, 2014, 4, 1, 0, 0, 0)"></style>
    	<div id="countdown_127"></div>
    </div>
    
    

    Countdown nel secondo articolo (id in Joomla 132) che scade alle 15:30 del 18 maggio 2014:

    
    <div style="font-family: Verdana; font-size: 12pt; color:; border: 1pt solid; padding: 2px; background-color:;">
    	<style onload="countdown(132, 2014, 5, 18, 15, 30, 0)"></style>
    	<div id="countdown_132"></div>
    </div>
    
    

    Nota: ho provato tutto su Joomla e funziona. 🙂
    Fammi sapere se hai risolto.

    Francesco


  • User Attivo

    Grazie Francesco ho risolto.


  • Moderatore

    Ciao pippoman,
    bene.

    Vuoi dirci come? 🙂


  • User Attivo

    Ho seguito la tua guida mella altro post di joomla.


  • Moderatore

    Grazie :wink3: