Hello, I have a wedding planning business and I recently added an online wedding checklist for clients/visitors to access once they login to my website (after paying for this checklist). This checklist begins at 12 months prior to their wedding date and includes a “to do list” of items they need to complete for their wedding planning. I have listed each item on this list as a single checkbox (organizing them by 12 months out, 9 months out, 6 months out, etc.). What I would like to happen is for each checkbox a visitor checks, to stay checked - even when they leave the site/page altogether. What is happening currently is that once a visitor leaves the page with the checklist (checkboxes), all of the checkboxes that they have checked are now left blank/unchecked again. This makes it impossible for them to track any progress with their wedding planning. I am not familiar with using code at all. However, I did see a similar question on this forum from another user and copied the code they used, but this code did not work for me. (see code below). Is there something specific I need to add to this code for my checkboxes to stay checked once clicked?
Code:
import {session} from ‘wix-storage’;
$w.onReady( function () {
let val = session.getItem(‘array’);
if (val) {
let newArray = JSON.parse(val);
if (newArray.length > 0) {
newArray.forEach( (item) => {
$w(${item}).disable();
});
}
}
});
var array = ;
export async function checkbox1_change(event) {
if ($w(“#checkbox1”).checked === true ) {
$w(“#checkbox1”).disable();
await array.push(‘#checkbox1’);
let valve = JSON.stringify(array);
session.setItem(‘array’, valve);
}
}
export async function checkbox2_change(event) {
if ($w(“#checkbox2”).checked === true ) {
$w(“#checkbox2”).disable();
await array.push(‘#checkbox2’);
let valve = JSON.stringify(array);
session.setItem(‘array’, valve);
}
}
I have also done some research and it sounds like I need to have a local storage option added to my code on the webpage with the checkboxes and the code I found for this option is here:
import {local} from ‘wix-storage’ ;
// …
local.setItem( “key” , “value” );
What am I doing wrong? Can someone please help explain this to me in lay terms (haha I have no experience with coding so I need someone to spell it out to me).
Here is a screenshot of my website with the checkboxes:
