HELP! Code to interact between Lightboxes and Page

Ask the community
, ,
1

Our website (www.babli.org/home) has a generic ‘starting page’ - called " Reservations " [Referred below as Page"X"]- from which site visitors can access different aspects of the process’/ clauses for reservations at our Farmstay.

Issue, in gist :-

  • Page “X” provides 3 text links - each leading to a different Lightbox

  • Each of those 3 lightboxes have “buttons” for navigating between each other

  • Final lightbox is closed by such a “button”, returning the visitor to the original Page “X”
    I need ~

  • A hidden “text-box” to appear , when the visitor returns to Page “X”

  • This needs to happen irrespective of how they got back to the page - i.e

  • By entering the first lightbox , using the 1st text-link on Page"X" - then navigating to the third lightbox with the “buttons” provided in the lightboxes - and finally exiting that lightbox with the button, and returning to Page “X”

  • By entering the second/ third lightbox , skipping the other(s) - using the 2nd/ 3rd text-link on Page"X" - then navigating to the third lightbox and returning to Page “X” as above
    I have achieved ~

  • A code which works - ONLY if the visitor clicks the third text-link on Page"X" - to enter the final lightbox, and then clicks the ‘Button’ there, to return to Page"X"

[Note: I can’t manage to describe the issue in gist - as it’s a rather complicated scenario - so, sorry for the elaborate ‘background’, which precedes the actual issue at the bottom!]

Issue, in detail :-
The Page comprises of a Column-Strip - with 3 columns

The left and right columns provide various LINKS, for navigating between the various ASPECTS of the reservation-process
[Centre Column is just a static Image]

Left Column :-
Has 3 TEXT LINKS

  • ADVANCE BOOKING RULES

  • POSSIBLE MODES OF PAYMENT

  • IMPORTANT CONSIDERATIONS

Each of those text links open ~

  • Separate lightboxes

  • But each of those Lighboxes have ‘Back’ & ‘Forward’ BUTTONS which intelink the 3 Lightboxes

  • So, a visitor can START by clicking ANY of the TEXT-LINKS on the Page - which takes them to the connected Lightbox - but then, the ‘Back/Forward’ links on that and other connected Lightboxes will FINALLY lead them BACK to the original PAGE

Right Column :-
Has 1 BUTTON LINK

  • Which takes the visitor to a different page

  • This Button-Link needs to be highlighted , when the visitor RETURNS to the Page, after exploring the 3 Lightboxes

WHAT I AM TRYING TO ACHIEVE :-
WHEN A VISITOR RETURNS to the Page , after exploring the 3 Lightboxes ~

  • A hidden text-box is shown (revealed, with animation) - which points to the Button-Link on the Right Column

WHAT I HAVE MANAGED TO ACHIEVE :-
IF THE VISITOR DIRECTLY CLICKS THE LAST TEXT LINK (on the Right Column) ~ [ “text213” ]

  • Which directly opens the FINAL Lightbox (out of the 3 interconnected Lightboxes) ~ [ “Reservation_CLAUSES_Pg3” ]

  • Then, they are forced to click the " Next " button [ “button3” ] at the bottom of the Lightbox - which programmatically closes the Lightbox

  • And, with that scenario - my INTENDED FUNCTION of ‘showing’ the hidden Text-Box [ “#box46” ] is working fine !

TO DO THIS, I HAVE USED THE FOLLOWING CODE ~
PAGE CODE :-

import wixWindow from 'wix-window';
export function text213_click(event) {
wixWindow.openLightbox("Reservation_CLAUSES_Pg3")
  .then( (data) => {
let GlideEffectOptions = {
 "duration":   2000,
 "delay":      250,
 "angle": 270,
 "distance": 250
};
$w("#box46").show("glide", GlideEffectOptions);
  } );
}

LIGHTBOX CODE:-

import wixWindow from 'wix-window';
export function button3_click(event, $w) {
 const dataObj = {
            };
    wixWindow.lightbox.close(dataObj);
}

MY PROBLEM :-

IF THE VISITOR CLICKS ANY OF THE FIRST TWO TEXT LINK (on the Right Column) ~

  • Which opens the FIRST / SECOND Lightbox (out of the 3 interconnected Lightboxes) ~ [“Reservation_CLAUSES_Pg1” -OR- “Reservation_CLAUSES_Pg2”]

  • Then, they navigate to the FINAL LIGHTBOX with the “Next” buttons provided in each of those Lightboxes

  • In that scenario, when they finally CLICK the “Next” button [“button3”] at the bottom of the Lightbox [“Reservation_CLAUSES_Pg1”] - which programmatically closes the Lightbox

  • But, with that scenario - my INTENDED FUNCTION of ‘showing’ the hidden Text-Box [“#box46”] is NOT WORKING!

I sort of do see the problem - but I can’t figure out how to SOLVE it!
I’ve played around with ~

  • Converting all buttons to programatically open/close the Lightboxes

  • Adding a modified version of the Page-Code to the 2nd Lightbox

  • And a few other variations…

NB: - I am not an expert at coding! I basically explore examples and try to appropriate those to the best of my understanding.

ANY SUGGESTION WOULD BE MUCH APPRECIATED!

2

Anybody…?
I am a noob at this - and could really do with some pointers from the experts!