Dynamic Button

Ask the community
,
1

I have a dynamic product page set up that is working correctly. I want to add a button that links the user to an external URL based upon the current page I am on. For example, I wish to link to the Amazon listing for the current product. Further, if there is no external link, I do not want the button to appear. I believe these two things are, in general, related from a code point-of-view but I am currently not able to get it to work.

Currently I am trying to get my button to work. I am using the following code (on the page, not the site):

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

export function amazonButton_click(event, $w) {
//Add your code for this event here:
const curItem = $w(“#productDataset”).getCurrentItem().amazonURL;

wixLocation.to(curItem);

}

I get no obvious errors in the compiler but when I click on the button nothing happens. Can anyone tell me where I am going wrong?

If I am not mistaken, I should be able to use a similar approach for hiding the button using code along the lines of:

if (!curItem) { $w(“#amazonButton”).hide(); }

Am I correct in this assumption?

Thanks for any help.

2

Try to put it inside:

$w("#productDatabase").onReady( () => {
})
3

Does not seem to do anything to help out. I appreciate the input though.

4

@robglass42 so add console.log( $w(“#productDataset”).getCurrentItem().amazonURL);
and see if it logs a valid url;

5

Okay, you have helped a bit (and thanks for that - it has been a long time since I’ve done any coding). I’ve added a bit of debugging code to see what is happening. My code currently looks like this:

import wixData from 'wix-data';
import wixLocation from 'wix-location';

export function amazonButton_click_1(event) {
 
    console.log("Button Clicked"); // make sure the click event is working -debug

    $w("#productDataset").onReady( () => {
 
        console.log("Database is ready");
        console.log( $w("#productDataset").getCurrentItem().amazonUrl); // make sure the URL in the DB is        
 being read properly - debug
 
        const destination = $w("#productDataset").getCurrentItem().amazonUrl; // create a constant that holds the URL 
        
        console.log(destination); // make sure the constant is holding the proper url and that it matches the above - debug

        wixLocation.to(destination); // send the user to the destination website
    });
}

When I click the button, I see that the click event is seen, the DB is ready, the test read of the database pulls the correct URL from amazonUrl, the CONST destination holds the exact same URL. This all seems to be working correctly.

While in the preview mode within the Wix editor, if I click the button I get a little popup that tells me the “This link will work on your published site”. However, when I actually publish and then click the button, nothing happens. I go nowhere.

It seems to work in preview but not in live. Any ideas?

6

Maybe you forgot to sync your collection and therefore the data exist in the sandbox and not on live? Check your database.
Your code looks ok and you said it worked as expected on preview mode, so the problem is somewhere else.

7

You should also check your database collection permissions. They matter in Live mode (Preview is more forgiving).

8

@jonatandor35 Wow, I feel really stupid right now. I thought I had pushed all the data to live but apparently I had not pushed that particular update to live. Now it is working exactly as I wanted it to. Thanks for helping out. It always seems to be the simple things that cause the biggest headaches.