Checkbox con memorizzazione scelta o localstorage o cookie in wordpress gestito

[preghierafacile]

Ciao!
Volevo sapere se posso fare in modo che il valore della scelta dell'utente(NON REGISTRATO) di una checkbox rimanga memorizzato(a lunga scadenza tipo 1 o 2 anni) anche se l'utente esegue il refresh della pagina/articolo o esce dalla pagina/articolo e poi vi rientra. Sia con cookie o se non serve anche in localstore (anche se non so bene cosa si intenda con localstore).

Nonè proprio una checkbox con valori corti uno sotto l'altro.
Ogni riga checkbox con valore "Letto" (che sta per testo letto) ha sotto del testo lungo e sopra ad ogni testo andremme la singola checkbox "Letto".

Oppure devo scegliere se creare un articolo/pagina per ogni songolo testo ed inserire una sola checkbox per articolo.

Se si potesse eviterei di installare plugins. Se si potesse.

Qui ho trovato questo per il localstorage ma non so come inserirlo:
https://codepen.io/kylastoneberg/pen/qweppq

Il codice a sx funziona, manon so come vada inserito quello a dx.
Va in fondo all'articolo o attaccato al codice html?
Una volta soltanto o attaccato ad ogni songola checkbox?
Ho provato a inserirlo tra <script> e </script> ma o non l'ho fatto bene o non funziona.
Ogni volta che faccio il refresh la spunta scompare.

Ho visto anche qui ma non ho capito bene:
https://forum.it.altervista.org/word...wordpress.html

Spero possiate aiutarmi!
Grazie!

[alemoppo]

I plugin non fanno altro che inserire codice, con un plugin avresti circa la stessa cosa ma saresti abbastanza più sicuro circa il funzionamento.

Il codice che hai indicato sì, va tra <script> e </script>. Però quel codice così non fa quel che vorresti. Ho scritto questo codice (ovviamente molto migliorabile ma può essere una base di partenza):

<script>
let PAGINA = "1"; //cambia questo valore per ogni pagina

function save()
{
  localStorage.setItem("pagina_" + PAGINA, document.getElementById('pagina_' + PAGINA).checked);
}
let checked = false;
if(localStorage.length > 0)
  checked = JSON.parse(localStorage.getItem("pagina_" + PAGINA));
document.write('<input type="checkbox" id="pagina_'+PAGINA+'" class="box" '+ (checked?'checked':'') +'>Letto</input>');
window.addEventListener("load", (event) => {
document.getElementById('pagina_' + PAGINA).addEventListener('change', save); 
});
</script>

Nota che per ogni pagina devi modificare PAGINA = "1" con un valore (o nome) differente.

È sufficiente inserirlo nel blocco HTML. Detto questo però dovresti conoscere un po' di HTML anche solo per impostare la posizione o la grafica. Se non conosci HTML/CSS, ti consiglierei appunto l'uso di un plugin.

Ciao!

[frasidipace]

I plugin non fanno altro che inserire codice, con un plugin avresti circa la stessa cosa ma saresti abbastanza più sicuro circa il funzionamento.

Il codice che hai indicato sì, va tra <script> e </script>. Però quel codice così non fa quel che vorresti. Ho scritto questo codice (ovviamente molto migliorabile ma può essere una base di partenza):

<script>
let PAGINA = "1"; //cambia questo valore per ogni pagina

function save()
{
  localStorage.setItem("pagina_" + PAGINA, document.getElementById('pagina_' + PAGINA).checked);
}
let checked = false;
if(localStorage.length > 0)
  checked = JSON.parse(localStorage.getItem("pagina_" + PAGINA));
document.write('<input type="checkbox" id="pagina_'+PAGINA+'" class="box" '+ (checked?'checked':'') +'>Letto</input>');
window.addEventListener("load", (event) => {
document.getElementById('pagina_' + PAGINA).addEventListener('change', save); 
});
</script>

Nota che per ogni pagina devi modificare PAGINA = "1" con un valore (o nome) differente.

È sufficiente inserirlo nel blocco HTML. Detto questo però dovresti conoscere un po' di HTML anche solo per impostare la posizione o la grafica. Se non conosci HTML/CSS, ti consiglierei appunto l'uso di un plugin.

Ciao!

Ciao,
Wordpress però non ha singole pagine html, per cui va modificato il file relativo al post singolo del tema (es. single.php).
Per fare ciò occorre creare un tema child, cosa non possibile con temi Altervista, e copiare il file all'interno della cartella del tema child rinominandolo.
Dopo bisogna individuare nel file il punto in cui viene letto il post ed inserire il tuo codice a cui aggiugnere la lettura dell'id post:

$post_id=get_the_id();  // Cattura l'id post
?>
<script>
  var PAGINA = <?php echo json_encode($post_id);?>;
			   
			   

  function save()
  {
     localStorage.setItem("pagina_" + PAGINA, document.getElementById('pagina_' + PAGINA).checked);
  }
  let checked = false;
  if(localStorage.length > 0)
    checked = JSON.parse(localStorage.getItem("pagina_" + PAGINA));
    document.write('<input type="checkbox" id="pagina_'+PAGINA+'" class="box" '+ (checked?'checked':'') +'>Letto</input>');
    window.addEventListener("load", (event) => {
    document.getElementById('pagina_' + PAGINA).addEventListener('change', save); 
  });
</script>

Controlla se ti torna tutto.

Ciao

[preghierafacile]

Grazie a tutti. Quindi non posso farlo dato che utilizzerò il tema Reneè di Altervista whosting gestito? Ma un plugin che fa questo cè già?
Dato che i moderatori di Blog Starter (gruppo facebook hosting per gestito) consigniano di installare yoast e monsterinsight e al max contact form 7 perché molti plugin e soprattutto quelli non aggiornati "rompono" a lungo andare il sito, come potri fare?
A me interessa solo che appaia una checkbos appena sotto il titolo dell'ARTICOLO in modo che si veda anche nel testo introduttivo nella pagina elenco articoli di una categoria. Per il css mi importa che ci sia solo il quadrtatino della checkbox e a destra, la scritta "Letto". Poi quando vistato, invece che il classico blu checkbox, appaia questo colore HEX #ac9052
Non è un problema inserire il codice in ogni articolo con id progressivo.
Non ho capito dove devo sostituire il numero con pagina.
anche nella proima riga? no vero? let PAGINA = 1 ?
Poi in tutti i testi con pagina in MAISCOLO? e pagina mnuscolo no?
Poi, funziona solo in wordpress hosting con file maanger?
Poi, se serve un plugin da adattare con gli aggiornamenti di wordpress e del php, potrei oppure chiedere a chi lo conosce cosa modificare, prima di aggiornare wordpress oppure il php.

Oppure se c'è già un plugin di qualità che viene aggiornato spesso, che fa già questo, ok. Se propro non si può fare o creare un plugin ex novo.

Questo plugin?
https://www.advancedcustomfields.com...rces/checkbox/

Plugin tipo lista to do? mettendo solo una riga nella lista in modo che faccia la stessa funzione?

A pensarci bene avere più righe per articolo. 3 o 4 checkbox.

Sarebbe indispensabile avere un tasto che azzeri tutte le checkbox del sito.

Che ne pensate ragazzi?

Intanto vi ringrazio per le preziose informazioni!!!

[preghierafacile]

A me funziona il primo codice postato qui, quello di alemoppo.
guardate preghierafacile.altervista.org e fate la prova sulle pagine prova e prova2

Come mai frasidipace funziona anche senza fare come hai detto?
Oppure mi sfugge qualcosa?

PS: non riesco a trovare il codice cdd per cambiare colore alla checkbox vistata.

Posso avere l'esempio di codice se inserissi 2 checkbox ad esempio LEtto e Studiato? ppoi da 2 a 4 chechbox è la stessa cosa. Non so come inserire nello stesso script 2 checkbox. oppure perché funzionino separatamente devo scrivere 2 script separati?

Altra domanda. Come far funzionare questo codice anche negli articoli o solo negli articoli?
Oppure vale per tutti?

Ultima cosa.
Sarebbe utile che ci fossi un bottone che azzeri tutte le propre checkbox vistate "Letto" e un altro che cancelli tutte le checkbox vistate "Studiato".

Così sarebbe perfetto.

Se proprio non si può, lascerò solo 1 checkbox e dirò agli utenti di eliminare i dati senza il bisogno del bottone. I bottoni servivano solo se inserire più checkbox.

Grazie infinite!!!!!!!!!

[preghierafacile]

Ho visto che il codice funziona anche per gli articoli.

[preghierafacile]

Ho notato che in vista elenco articoli di na categoria appare solo il testo e non lo script.
Non c'è niente da fare?

Se non si può fare nulla mi tocca evitare il tutto.

Oppure se si può fare solo con plugin, e che si veda la checkbox anche in vista elenco articoli categoria, mi tocca valutare in futuro di far creare un plugin ad hoc se ne varrà la pena. Che ne dite?

Grazie mille del vostro prezioso aiuto intanto!!!

[frasidipace]

Salve,
se ha inserito il codice di alemoppo in un blocco html per ciascun articolo può funzionare, però ogni volta che scriverà un articolo dovrà ricordarsi di inserire questo blocco rilevando manualmente l'id post. Il mio codice, invece, gestiva in automatico la checkbox su tutti gli articoli. Con il tema Altervista ciò non è possiible.
I plugins che Le hanno suggerito sul gruppo Fb non fanno ciò che Le serve. Ad es. CF7 è un plugin per creare un form di contatto, mentre ACF aggiunge campi personalizzati a pagine/articoli, ma poi occorre scrivere codice per farli visualizzare sul frontend.
Per far visualizzare la checkbox sulla pagina articoli occorrerebbe intervenire sul file archive.php del tema, ma anche in questo caso occorrerebbe il tema child.
Non conosco plugins che svolgano questa funzione.

Saluti

[preghierafacile]

Grazie mille!
A questo punto meglio pensare di creare un file pdf da far stampare agli utenti con i vari possibili diari di lettura e far vistare a mano con un segno di matita e poi cancellare tutto con la gomma.
Più semplice.
Comunque grazie per le importanti info che potranno servire o in futuro o ad altre persone.
Grazie!

[frasidipace]

Grazie mille!
A questo punto meglio pensare di creare un file pdf da far stampare agli utenti con i vari possibili diari di lettura e far vistare a mano con un segno di matita e poi cancellare tutto con la gomma.
Più semplice.

Adesso però mi spiazza. Avevo inteso che il Suo desiderata era di segnalare all'utente di aver già letto un determinato articolo.
Se invece serve a Lei come "ricevuta" di lettura, la cosa è completamente diversa. Non può gestire il tutto con un cookie, ma deve memorizzare a DB l'avvenuta lettura del singolo utente.
Cosa deve fare esattamente?

Saluti

[preghierafacile]

Scusi il ritardo.

In poche parole dovrei avere qualche pagina del sito con, in ogni pagina, una chechbox nei presso di ogni link.
Avrei una pagina con ad esempio 10 link uno sotto l'altro e appena sopra il link metterei la checkbox con scritto "Letto".
Quindi mei servono più checkbox per pagina, non uno per pagina.
Non importa se devo inserire manualmente il numero progressivo.
Se ho 5 pagine e in ogni pagina 10 link, vorrei che le 50 checkbox fossero indipendenti l'una dall'altra.

Tutto nel local storage.

Spero sia possibile.

[preghierafacile]

In pratica:
Ho 14 pagine esempio una per ogni giorno della settimana una per le Lodi mattutine e una per Vespri, in ogni pagina ad esempio 20 link diversi che rimandano alla pagina di un salmo diverso. A volte i salmi sono situati in giorni diversi quindi la checkbox non deve essere legata a pagine, ma a se stessa e a dove la inserisco. Ogni checkbox deve essere indipendente dall'altra.
Pensavo che con il local storage non servissero i cookie.
Ma se dovessero servire come si può fare senza che per forza gli utenti si debbano registrare?
Nel caso, che tipo di cookie sarebbero a livello di GDPR? Nel caso faccio un modulo iubenda manuale appropriato.

[preghierafacile]

Questo potrebbe funzionare?

https://codepen.io/kylastoneberg/pen/qweppq

Solo che il js a destra va modificato in modo da comprendere achein tutto il sito deve essere inserito il js di destra modificato in modo da contenere anche l'html (ed eventuale css)?

[preghierafacile]

Provando a inserire questo codice:
<script>
let boxes = document.getElementsByClassName('box').length;

function save() {
for(let i = 1; i <= boxes; i++){
var checkbox = document.getElementById(String(i));
localStorage.setItem("checkbox" + String(i), checkbox.checked);
}
}

//for loading
for(let i = 1; i <= boxes; i++){
if(localStorage.length > 0){
var checked = JSON.parse(localStorage.getItem("checkbox" + String(i)));
document.getElementById(String(i)).checked = checked;
}
}
window.addEventListener('change', save);
</script>

E poi sotto questo:
<input type="checkbox" id="1" class="box">checkbox1</input><br>
<input type="checkbox" id="2" class="box">checkbox2</input><br>
<input type="checkbox" id="3" class="box">checkbox3</input><br>
<input type="checkbox" id="4" class="box">checkbox4</input><br>
<input type="checkbox" id="5" class="box">checkbox5</input><br>
<input type="checkbox" id="6" class="box">checkbox6</input><br>

Le checkbox appaiono, solo che se le seleziono, cambio pagina e torno, le checkbox selezionate le trovo deselezionate.

Una volta modificato in qualche modo tutto questpo codice basta che inserisco lo script da qualche parte in ogni pagina e poi questo html <input type="checkbox" id="1" class="box">checkbox1</input><br>
ogni volta che serve una checkbox?

Poi con gli id o andare sempre in progressione con un id unico in ogni checkbox del sito?

Grazie!

[preghierafacile]

https://stackoverflow.com/questions/...d-localstorage

Da questa pagina ho tratto il codice per il local storage. è presente anche la versione con cookie.

LOCAL STORAGE

<div>
        <input type="checkbox" id="whatever-1" />This task
        <input type="checkbox" id="whatever-2" />This task
        <input type="checkbox" id="whatever-3" />This task
        <input type="checkbox" id="whatever-4" />This task
        <input type="checkbox" id="whatever-5" />This task
        <input type="button" value="Save" onclick="save();" />
    </div>
        <script>
            window.onload= function(){
                    var list = document.querySelectorAll(`[type*="checkbox"]`);
                    list.forEach( el => {
                        var checked = JSON.parse(localStorage.getItem(el.id));
                        document.getElementById(el.id).checked = checked;
                    });
            }
            save = function(){
            var list = document.querySelectorAll(`[type*="checkbox"]`);
            list.forEach( el => {
                localStorage.setItem(el.id, el.checked);
                console.log(el.id,el.checked);
            })

        }
    </script>

È diventato questo:

Procedura corretta:
1) Si selezionano o deselezionano le caselle scelte
2) Si clicca sul tasto "Salva"
3) Si clicca sul link del salmo selezionato
Se non si procede in questo modo, si perdono le scelte effettuate

<div>
        <input type="checkbox" id="salmiecantici-1" style="margin-right: 10px;" /><a href="/salmo-1-le-due-vie-delluomo" ><strong>Salmo 1</strong></a><hr />
        <input type="checkbox" id="salmiecantici-2" style="margin-right: 10px;" /><a href="/salmo-2-il-messia-re-vittorioso"><strong>Salmo 2</strong></a><hr />
        <input type="checkbox" id="salmiecantici-3" style="margin-right: 10px;" /><a href="/salmo-3-il-signore-mi-sostiene"><strong>Salmo 3</strong></a><hr />
        <input type="checkbox" id="salmiecantici-4" style="margin-right: 10px;" /><a href="/salmo-4-rendimento-di-grazie"><strong>Salmo 4</strong></a><hr />
        <input type="checkbox" id="salmiecantici-5" style="margin-right: 10px;" /><a href="/salmo-5-preghiera-del-mattino-per-aver-laiuto-del-signore"><strong>Salmo 5</strong></a><hr />
        <input type="button" value="Salva" onclick="save();" />
    </div>
        <script>
            window.onload= function(){
                    var list = document.querySelectorAll(`[type*="checkbox"]`);
                    list.forEach( el => {
                        var checked = JSON.parse(localStorage.getItem(el.id));
                        document.getElementById(el.id).checked = checked;
                    });
            }
            save = function(){
            var list = document.querySelectorAll(`[type*="checkbox"]`);
            list.forEach( el => {
                localStorage.setItem(el.id, el.checked);
                console.log(el.id,el.checked);
            })

        }
    </script>

_______________________________________
VERSIONE COOKIE

<div>
        <input type="checkbox" id="whatever-1" />This task
        <input type="checkbox" id="whatever-2" />This task
        <input type="checkbox" id="whatever-3" />This task
        <input type="checkbox" id="whatever-4" />This task
        <input type="checkbox" id="whatever-5" />This task
        <input type="button" value="Save" onclick="save();" />
    </div>
        <script>
            window.onload= function(){
                    var list = document.querySelectorAll(`[type*="checkbox"]`);
                    list.forEach( el => {
                        var checked = JSON.parse(accessCookie(el.id));
                        document.getElementById(el.id).checked = checked;
                    });
            }
            save = function(){
                var list = document.querySelectorAll(`[type*="checkbox"]`);
                list.forEach( el => {
                    createCookie(el.id, el.checked,1);//1 is the day to expire
                    console.log(el.id,el.checked);
                })
            }
            function createCookie(cookieName, cookieValue, daysToExpire) {
                var date = new Date();
                date.setTime(date.getTime() + (daysToExpire * 24 * 60 * 60 * 1000));
                document.cookie = cookieName + "=" + cookieValue + "; expires=" + date.toGMTString();
            }

            function accessCookie(cookieName) {
                var name = cookieName + "=";
                var allCookieArray = document.cookie.split(';');
                for (var i = 0; i < allCookieArray.length; i++) {
                    var temp = allCookieArray[i].trim();
                    if (temp.indexOf(name) == 0)
                        return temp.substring(name.length, temp.length);
                }
                return "";
            }
    </script>

------------------------------------------------

Vorrei capire la differenza e cos'è meglio.
È più facile non perdere i local storage o i cookie?
Quanto tempo è questo: 24 * 60 * 60 * 1000
Meglio lasciar stare ed usarew il local storage così non devo nemmeno pensare alla cookie/privacy policy?

È buono questo codice? Dite che può andare?

Grazie mille!

Cliccare qui per vedere screenshot del risultato

[alemoppo]

È più facile non perdere i local storage o i cookie?

si tratta comunque di una informazione sul browser, credo sia indifferente.

Quanto tempo è questo: 24 * 60 * 60 * 1000

1000ms = 1 secondo
* 60 = 1 minuto
*60 = 1 ora
* 24 = 1 giorno
* daysToExpire = numero di giorni

quindi gli passi 1, c'è anche scritto nel commento che la durata è 1 giorno.

Ciao!

[preghierafacile]

Grazie mille!

Scusa, che stordito...
Tanto se qualcuno cancella i dati di navigazione cancella cookie e local storage quindi è uguale.
La differenza è se non sbaglio che i local storage rimangono finché l'utente non li toglie e quindi potenzialmente non scadono?
Secondo il GDPR questo tipo di cookie come andrebbe classificato se eventualmente dovessi scegliere la versione con cookie?

Ultima domanda: è proprio necessario il bottone Salva?
Il codice legato alla pagina che avevi scritto tu non aveva bisogno del bottone Save.
Si potrebbe togliere ed avere un autosave ad ogni modifica delle caselle? Se sì, come?
Scusami il disturbo!
Ti ringrazio tantissimo per il prezioso aiuto!