[Solved] How to open in new tab with wix location

Ask the community
,
1

Hello, How do I get this to open in a new tab on button click?

I don’t know anything about coding, this code was created for me, please don’t direct me to an article. I need someone to put the necessary code into mine. I understand I need a “target blank” code but, I do not know where it goes and I can’t find any help online, I have searched for hours.
Thank you

import wixLocation from ‘wix-location’ ;

$w.onReady( function () {

$w( ‘#button1’ ).onClick((event, $w) => {
checkValues();
});

$w( ‘#input1’ ).onKeyPress((event, $w) => {

setTimeout(() => {

if (event.key === “Enter” ) {

checkValues();

}
}, 10 );
});

});

function checkValues() {
if ($w( ‘#input1’ ).value === ‘5’ ) {
wixLocation.to( “google.com” )
} else if ($w( ‘#input1’ ).value === ‘6’ ) {
wixLocation.to( “google.com” )
}
}

2

You cannot open a new tab with wixLocation.
Only clickable links can be set to open a new tab via Velo.
There’s a way to open a new tab automatically using custom element (for premium accounts) but it’s more complicated and even then some browsers won’t let you open a link in new tab without a direct click.

1 Like
3

Thank you so much!! - Okay this was the information I was finding. Is there a different way to write my code so that I can use a new-tab function? Essentially what I have is an input box where it recognizes specific numbers and redirects to specific links based on the inputted number.

4

@sktvinc You can use a “Go” button (instead of “Enter” key).
And write some code like:

$w.onReady(() => {
$w("#goButton").target = "_blank";
$w("#input1").onInput(event => {
if($w("#input1").value === "5" ||  $w("#input1").value === "6"){
	$w("#goButton"). link = "https://some-link.com";
}  else if($w("#input1").value === "7"){
	$w("#goButton"). link = "https://another-link.com";
} else {
	$w("#goButton"). link = "https://different-link.com";
}
})
})

Then once the users click the Go button they will be redirected to the link on a different tab.

1 Like
5

@jonatandor35 Thank you so much, this is exactly what I needed! I appreciate the clear help!!

6

@jonatandor35 Useful.
Seems as if i ran into a similar problem. :sweat_smile:

7

This might also be helpful to someone

export function image7_click(event) { // in case of image
$w(“#image7”).target = “_blank”;
const currentItem = $w(‘#dynamicDataset’).getCurrentItem();
const url1 = currentItem.urlField;
if (url1) {
$w(“#image7”).link = url1;
}
}

8

Hello, I have added a hotel reservation bar to my site, I redirect to an external site with dynamic data. I used the code below, but I can’t open it in a new tab. Is there a way to do this?

// Wix Velo sayfa kodu
import wixLocation from ‘wix-location’;

$w.onReady(function () {
// Bugünün tarihini al
let today = new Date();
let tomorrow = new Date();
tomorrow.setDate(today.getDate() + 1); // Bir gün sonrasını ayarla

// DatePicker'lara varsayılan değerleri ata
$w('#datePickerIn').value = today;
$w('#datePickerOut').value = tomorrow;

// Tarih biçimlendirme fonksiyonu
function formatDate(date) {
    let month = (date.getMonth() + 1).toString().padStart(2, '0'); // Ay 0-11 arası olduğundan 1 ekliyoruz
    let day = date.getDate().toString().padStart(2, '0');
    let year = date.getFullYear();
    return `${month}/${day}/${year}`;
}

$w('#submitButton').onClick(() => {
    // DatePicker'lardan tarihleri al
    let selectedDateIn = $w('#datePickerIn').value;
    let selectedDateOut = $w('#datePickerOut').value;

    // Eğer tarih seçilmemişse hata döndür
    if (!selectedDateIn || !selectedDateOut) {
        console.log('Lütfen hem giriş hem de çıkış tarihi seçiniz.');
        return;
    }

    // Tarihleri MM/DD/YYYY formatına dönüştür
    let formattedDateIn = formatDate(selectedDateIn);
    let formattedDateOut = formatDate(selectedDateOut);

    // Dropdown'lardan değerleri al
    let adults = $w('#adultsDropdown').value;
    //let children = $w('#childrenDropdown').value;
    let hotelID = $w('#hotelDropdown').value;
    let languageID = 19;
    let rooms = 1;

    // Linki oluştur
    let bookingLink = `https://bookings.travelclick.com/${hotelID}?Adults=${adults}&DateIn=${formattedDateIn}&DateOut=${formattedDateOut}&LanguageID=${languageID}&Rooms=${rooms}#/guestsandrooms`;

    console.log(bookingLink); // Linki kontrol edebilir veya yönlendirme yapabilirsiniz.

    // Kullanıcıyı linke yönlendir
    wixLocation.to(bookingLink);
});

});

9

Just add this line above wixlocation.to

$w('#submitButton').target = "_blank";

I’d also recommend that you switch to the new wix-location-frontend.