How to trigger lightbox with onMouseIn only once per page visit

Ask the community
, ,
1

How to trigger a lightbox with onMouseIn only once per page visit?

Wix Editor (dev mode)

What are you trying to achieve:
I have 2 lightboxes on 2 different pages. They are triggered by a onMouseIn event. My current code can only open one lightbox per session. My goal is to be able to open both lightboxes per session. I only want these lightboxes to open once per page visit not session visit.
Example: User is on page 1 and scrolls to section #3, lightbox 1 is triggered to open. User then closes lightbox. Any subsequent onMouseIn to section#3 does not trigger lightbox 1 to open.
User is on page 2 and scrolls to section #5, lightbox 2 is triggered to open. User then closes lightbox. Any subsequent onMouseIn to section#5 does not trigger lightbox 2 to open.
Right now if user triggers lightbox on either page the lightbox on the other page will not successfully open.

I have tried the “AI” code assist.
I did a search in this forum.

Here is my current code.
page 1:

import { session } from 'wix-storage-frontend';
import wixWindowFrontend from 'wix-window-frontend';

$w("#section3").onMouseIn(() => {
    if (!session.getItem("lightboxShown")) {
        wixWindowFrontend.openLightbox("YourLightboxName");
        session.setItem("lightboxShown", "true");
    }
});

page 2:

import { session } from 'wix-storage-frontend';
import wixWindowFrontend from 'wix-window-frontend';

$w("#section5").onMouseIn(() => {
    if (!session.getItem("lightboxShown")) {
        wixWindowFrontend.openLightbox("LB-Member-Benefits-V1.0");
        session.setItem("lightboxShown", "true");
    }
});

Thanks.

2

Hi, user3422 !!

I believe there’s a string “lightboxShown” in your code. Please change it into two separate strings, such as “lightboxShown3” and “lightboxShown5”. Currently, there’s only one storage location for the data, and it’s being shared. As a result, when the lightbox is opened on one page, the data stores that “the lightbox has already been opened.” This leads to the lightbox not opening on a different page within the same session. :wink:

3

I need to show an edit to first post. The code for page 1:

import { session } from 'wix-storage-frontend';
import wixWindowFrontend from 'wix-window-frontend';

$w("#section3").onMouseIn(() => {
    if (!session.getItem("lightboxShown")) {
        wixWindowFrontend.openLightbox("LB-Member-Benefits");
        session.setItem("lightboxShown", "true");
    }
});
4

Thanks for the reply. I modified my code strings as follows: “lightboxShown3” and “lightboxShown19”. The “19” is because the second lightbox is in element “#coulumnStrip19” . This resulted in the lightboxes showing on both pages. However, the lightboxes open with every mouseIn.

5

Please show me both of the latest versions of the code :thinking:

6

First page:

import { session } from 'wix-storage-frontend';
import wixWindowFrontend from 'wix-window-frontend';

$w("#section3").onMouseIn(() => {
    if (!session.getItem("lightboxShown")) {
        wixWindowFrontend.openLightbox("LB-Member-Benefits");
        session.setItem("lightboxShown", "true");
    }
});

Second page:

import { session } from 'wix-storage-frontend';
import wixWindowFrontend from 'wix-window-frontend';

$w("#columnStrip19").onMouseIn(() => {
    if (!session.getItem("lightboxShown")) {
        wixWindowFrontend.openLightbox("LB-Member-Benefits-V1.0");
        session.setItem("lightboxShown", "true");
    }
});
7

Please rewrite the code as follows. :thinking:

First page:

import { session } from 'wix-storage-frontend';
import wixWindowFrontend from 'wix-window-frontend';

$w("#section3").onMouseIn(() => {
    if (!session.getItem("lightboxShown3")) {
        wixWindowFrontend.openLightbox("LB-Member-Benefits");
        session.setItem("lightboxShown3", "true");
    }
});

Second page:

import { session } from 'wix-storage-frontend';
import wixWindowFrontend from 'wix-window-frontend';

$w("#columnStrip19").onMouseIn(() => {
    if (!session.getItem("lightboxShown19")) {
        wixWindowFrontend.openLightbox("LB-Member-Benefits-V1.0");
        session.setItem("lightboxShown19", "true");
    }
});
1 Like
8

Your solution works perfectly. Thanks so much.

1 Like
9

I’m glad to hear that. Enjoy Wix !! :wink: