Set button link manually from another dataset

Ask the community
, ,
1

The goal is to have a button on a dynamic page open a link from a data collection (not the dynamic collection) to an external site in a new tab. I originally tried to accomplish this without code by adding the dataset to the page and linking the button. Much to my dismay this only worked on 2 out of 4 pages despite troubleshooting by making the code identical among many other options. I have tried coding several ways to make this happen but have been stuck at one particular point.

The wixLocation . to () method works with the variable but does NOT open in a new tab and is therefore not viable.

My current solution:

  1. Query the database for the external URL that I would like the button to navigate

  2. //query amazon affiliate link from the database
    wixData . query ( “MasterDrinkData” )
    . eq ( “drinkName” , pageDrinkName ) //query the drink name of the individual review page
    . distinct ( “amazonAffiliateLink” ) //query the URL of the drink name in the master drink data database
    . then ( ( results ) => {

let affItem = results . items [ 0 ]; // gets the entire query results
console . log ( affItem ); //prints query results to console
affiliateLink = affItem ;
console . log ( affiliateLink ); //prints variable to console
}
);

  1. I know this works because the console prints the correct link in the variable affiliateLink

  2. Update the button link and target parameters to reflect the variable affiliateLink and to pen in a new tab (“_blank”)

  3. $w ( “#button7” ). link = affiliateLink ;
    $w ( “#button7” ). target = “_blank” ;

  4. setting the button link to a static link like google works, but the variable does not

  5. I receive this error

1624×114 20.9 KB

  1. I have tried updating the data in the referenced column in the dataset to make sure every cell has an URL and that did not change anything

  2. I have tried using an if statement to only pass the variable to the link parameter if the variable is not null/undefined

Thanks in advance.

Entire page code:
var pageDrinkName ;
var drinkpageURL ;
let pageURL ;
var productLink ;
var clickFormButton = 0 ;
var affiliateLink ;

import wixData from ‘wix-data’ ;
import wixLocation from ‘wix-location’ ;

$w . onReady ( function () {
// Write your JavaScript here

let itemObj = $w ( “#dynamicDataset” ). getCurrentItem ();
pageDrinkName = itemObj . drinkName ; //get the drink name for the current page from the dataset

wixData . query ( “MasterDrinkData” )
. eq ( “drinkName” , pageDrinkName ) //query the drink name of the individual review page
. distinct ( “drinkPageLink” ) //query the URL of the drink name in the master drink data database
. then ( ( results ) => {

let firstItem = results . items [ 0 ]; // gets the entire query results
console . log ( firstItem ); //prints query results to console
drinkpageURL = firstItem ;
// console.log(pageURL); //prints variable to console
}
);

//query amazon affiliate link from the database
wixData . query ( “MasterDrinkData” )
. eq ( “drinkName” , pageDrinkName ) //query the drink name of the individual review page
. distinct ( “amazonAffiliateLink” ) //query the URL of the drink name in the master drink data database
. then ( ( results ) => {

let affItem = results . items [ 0 ]; // gets the entire query results
console . log ( affItem ); //prints query results to console
affiliateLink = affItem ;
console . log ( affiliateLink ); //prints variable to console
}
);

$w ( “#button7” ). link = affiliateLink ;
$w ( “#button7” ). target = “_blank” ;

$w ( “#input8” ). value = wixLocation . url ; // set the text field to store the current page address

$w ( “#dataset1” ). onReady ( () => { //MasterDrinkDataset on ready, havent used this yet because used wix to add the dataset

productLink = $w ( “#dataset1” ). getCurrentItem ();
console . log ( productLink );

} );

});

export function gallery3_itemClicked ( event ) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
console . log ( drinkpageURL );
wixLocation . to ( drinkpageURL );
}

export function button9_click ( event ) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
clickFormButton ++;

//check if the number is even
if ( clickFormButton % 2 === 0 ) {
console . log ( “The number is even.” );
$w ( “#form3” ). collapse (); //hides the form
}
// if the number is odd
else {
console . log ( “The number is odd.” );
$w ( “#form3” ). expand (); //opens up the form
}
}

/**

  • Adds an event handler that runs when the element is clicked.
  • @param {$w.MouseEvent} event
    */
    export function button6_click ( event ) {
    // makes return to drink overview button work
    wixLocation . to ( drinkpageURL );
    }