Enabling site-wide Lightbox with Switch/Boolean

I have a setup a system (preview below) where a user can input text info for a Lightbox. I have a switch to activate that Lightbox and set it up with a boolean in a dataset, but need the code to say that if the boolean/switch is on/true, the Lightbox should be shown to all users on the site.

Somebody please respond. Desperate for help. Thanks!

Hey Noah,

I created a working version of what you want here: https://derrellchristopher.wixsite.com/mysite/global-lightbox.

I added a couple extra lines for the rough use cases and to pretty it up, but you should be able to strip away anything you don’t need.


Page Code

import wixData from 'wix-data';
import {session} from 'wix-storage';

export function saveSettings(event) {
 //Add your code for this event here: 

    $w("#save").label = "Submitting..."
 
 let currentSetting = session.getItem("isLightboxGlobal");
 if(currentSetting !== ""+$w("#switch1").checked){
 if(session.getItem("lightboxdbID")){
            wixData.update("lightbox", {_id:session.getItem("lightboxdbID"),title:"Global",state:$w("#switch1").checked}).then(results=>{
                $w("#submitted").show("fade");
                $w("#save").label = "Save & Publish";
            });
        }
 else
        {
            wixData.query("lightbox").find().then(results=>{
 let id = results.items[0].state; //Whether the state is undefined or false, it will return false.
                session.setItem("lightboxdbID", results.items[0]._id);
                wixData.update("lightbox", {_id:id,title:"Global",state:$w("#switch1").checked}).then(resultVals=>{
                    $w("#submitted").show("fade");
                    $w("#save").label = "Save & Publish";
                });
            });
        }
    }
 else{
        $w("#submitted").text = "Submission Saved. No Changes Made";
        $w("#submitted").show("fade");
        $w("#save").label = "Save & Publish";
    }
}

Site Code

import wixData from 'wix-data';
import {session} from 'wix-storage';
import wixWindow from 'wix-window';

let isLightboxGlobal,isFirstVisit = true;

$w.onReady(function () {

    wixData.query("lightbox").find().then(results=>{
        isLightboxGlobal = !!results.items[0].state; //Whether the state is undefined or false, it will return false.

        session.setItem("isLightboxGlobal", ""+isLightboxGlobal);
        session.setItem("lightboxdbID", results.items[0]._id);

 if (isLightboxGlobal) {
            wixWindow.openLightbox("Subscribe", {any:"data",you:"want"});
        }
    });
});

I set all of this up with a database called lightbox with two fields. A Title field (Only because it can’t be deleted) and a boolean field called state. Please note I set the permissions of the database for read, create and update to Anyone.

Where do I find the lightboxID?

How do I resolve these errors?

@noahbschultz The errors you get is because your code can not find elements on your page with those identifiers. make sure you have the buttons and all elements that you refer to with $w in your code.

@andreas-kviby In your code, where it says “lightboxdbID”, where do I find that for my Lightbox to plug into the code?

@noahbschultz The “lightboxdbID” gets set as a persistent session variable for the user from the site code.

Did you get it to work already?

@chris-derrell It’s not working. Below are screenshots:

The heading, subheader and message (content of Lightbox) is all set up and functioning properly. The only thing not functioning is the on/off switch to enable/disbale the sitewide Lightbox.

@chris-derrell Below is also a screenshot of the Lightbox. It is named “EmergencyNotification”.

@chris-derrell

@noahbschultz hey Noah, sorry I was MIA for so long.

Your code looks like it was set up correctly, I have a feeling it might have been your database that’s the problem.

  1. Did you publish the database to go live?
  2. Did you change the permissions for read create and update to anyone?

@chris-derrell Hi. Sorry for my delay. Just getting back to this issue now. Whether or not it’s a problem with the code, my issue is with the On/Off switch. It’s On/Off isn’t affecting the Lightbox to show or not to. Would it have anything to do with the Lightbox’s non-code settings? Or maybe the code isn’t setup to control the Lightbox? Or maybe there’s some other connection that I’m missing? Any help would be so so appreciated!

Would it maybe have something to do with the default Lightbox settings? Did you set it to on?