IS IT POSSIBLE to execute BOTH openLightbox in current window & open URL in new window at same time

Ask the community
, ,
1

QUESTION:
IS IT POSSIBLE to execute BOTH of these actions at the same time:
openLightbox in CURRENT window + open external URL in a NEW window?

PRODUCT
I’m on WiX EDITOR

MY GOAL
Click button ==> lightbox opens in current win + Open external URL in a new window

ALSO
IF IT IS DETERMINED that this cannot be done: does anyone have a creative workaround for this (which is WHY we want to do this):

I want the lightbox to be open in the ORIG window for when they return to it, on the off chance that the visitor will be willing to answer 1 question about their experience at the external site they were sent to in the NEW window. Hope that makes sense.

I HAVE TRIED a few things, as follows… and all I can get it to do is open the lightbox

// FYI
// the lightbox NAME = exit-survey
// the button ID = buttDealsShop

THIS

import wixWindow from “wix-window”;

export function buttDealsShop_click(event) {

wixWindow.openLightbox (“exit-survey”);
$w(“#buttDealsShop”).link = “http://ExternalURLAddress”;
$w(“#buttDealsShop”).target = “_blank”;

AND

import wixLocationFrontend from ‘wix-location-frontend’;
import wixWindowFrontend from ‘wix-window-frontend’;

$w.onReady(function () {
$w(“#buttDealsShop”).onClick(function () {

wixWindowFrontend.openLightbox(‘exit-survey’);
wixLocationFrontend.to(“https://ExternalURLAddress”, “_blank”);
});
});

AND One other approach that I lost track of.

LASTLY
I tried switching the events:
lightbox THEN window, AND
open window, THEN lightbox – to no success.

WHAT DO YOU THINK OF THIS:
Maybe I can move the open external URL in new window event to the lightbox → when it opens, then open the URL in a new window.

THANK YOU!

2

Actually you have the right code/APIs but you used it with a wrong logic. You need to take button APIs out of the onClick event. Here is the right code with right logic:

import { openLightbox } from 'wix-window';

$w.onReady(() => {
    $w('#buttonId').link = "<your-external-site-url>";
    $w('#buttonId').tagret = "_blank";

    $w('#buttonId').onClick(() => {
        openLightbox("<your-lightbox-name>")
    })
})

With this code you can open an external URL in a new window and open a lightbox at the same time.

3

This worked for me

import wixWindowFrontend from 'wix-window-frontend';

$w.onReady(function () {

	// set button links
	$w('#buttonTest').link = 'https://www.youtube.com/'
	$w('#buttonTest').target = '_blank'

});


export function buttonTest_click(event) {
	wixWindowFrontend.openLightbox("Welcome (Logo)");
}
4

THANK YOU LoeiX for the suggestion. I’ll try it shortly and let you know how it goes. :+1:

5

THANK YOU SO MUCH OakStreet for the suggestion. Funny how something so simple can (1) Be done a number of ways, and (2) seem so complicated.

I’ll try it today and let you know how it goes. :+1: Really appreciate your input

6

If you’re curious as to why, wixLocation does not open links in a new tab so we have to work around it.

7

NO GO.
For some reason, I cannot get the external URL to open… not at all. Even if I comment out the openLightbox line and JUST try to open the external URL… it does nothing on the Click Event.

It DOES open the lightbox.

This is my code:

import wixWindowFrontend from ‘wix-window-frontend’;

$w.onReady(function () {

// set button links
$w(‘#buttDealsShop’).link = ‘https://www.pulaki.com/’
$w(‘#buttDealsShop’).target = ‘_blank’

});

export function buttDealsShop_click(event) {

wixWindowFrontend.openLightbox(“exit-survey”);
}

Any thoughts?

8

NO GO.
this would only open the lightbox.

And If I comment out the onClick…openLightbox command, it WILL open the external URL in a new window. But never can I get it to do both.

I’m wondering how I might move the open external URL command into the lightbox and make it trigger somehow when the lightbox opens, THAT would probably work, but since there won’t be a button being clicked - to trigger the event - not sure if this is possible.

This is my code. As it is, it only open the lightbox:

import { openLightbox } from ‘wix-window’;

$w.onReady(() => {
$w(‘#buttDealsShop’).link = “https://www.pulaki.com";
$w(‘#buttDealsShop’).target = “_blank”;

$w('#buttDealsShop').onClick(() => {
    openLightbox("exit-survey")
})

})

Any thoughts?

9

The only thing I can suggest to you is to use react-velo, but i am not sure if it will work.
react-velo : @wix/react-velo - npm
video : https://www.youtube.com/watch?v=cH5FCvwWt2o&ab_channel=TheWixWiz

lightbox: code

import React, { useEffect } from 'react';
import { render, W } from '@wix/react-velo';

function App() {

  useEffect(() => {
    window.open('https://www.example.com', '_blank');
  }, []);

  return (
    <W.myLightbox>
    </W.myLightbox>    
  );
}

$w.onReady(() => render(App, $w, React));
10

I will try it on my own and let you know with a solution.

11

This same code works for me. I don’t know why it doesn’t work for you if you can share your page URL I can check on my end. Also make sure your button ids are correct.

12

I assume you activated the event handler so we should be good on that piece.

I did notice that when I copied your code you are using backticks ( ` ) instead of a single quotation ( ’ ) mark or double quotation mark ( " ).

Backticks only works if you are trying to place an object in string and use brackets with a $ symbol before. Copy and paste this code and replace your on ready only. Make sure you event handler is activated.

$w.onReady(function () {

// set button links
$w('#buttDealsShop').link = 'https://www.pulaki.com/'
$w('#buttDealsShop').target = '_blank'

});
13

So here is the solution guys.

The first code block I post doesn’t work!

import { openLightbox } from 'wix-window-frontend';

$w('#boxId').onClick((event) => {
    openLightbox("Lightbox Name");
});

Create a box and put button inside of that button then set event listener for the box and set the URL for button inside the editor (or with the code/velo).

And this should open both lightbox and external URL you want to open in new tab.

3 Likes
14

Thank you again… especially for the observation of the single vs double quotes. I was wondering about that. I finally found a solution that worked - I tried perhaps 4 different approaches, your among them - and nothing worked. The solution was quite clever and is below.

I really appreciate your help. : -) All the best!

15

Thank you so much for that creative idea. I finally found a solution that worked and was super simple - I tried perhaps 4 different approaches and nothing worked. The solution was quite clever and is below. Basically, the external URL is set in the editor button settings and the button is placed in an invisible box whose action - opening the lightbox - is triggered when the button is clicked.

I really appreciate your help. : -) All the best!