Variable URL Link Based on User Input

Ask the community
,
1

Hi all,

Apologies ahead of time for the long post :slight_smile:

I’m trying to implement a feature on my website where users can track shipping containers from other websites. The websites in question does not offer API so i’m stuck with dynamically creating my own URLs based on user input and knowing the target URL structure ahead of time.
Methods I’ve tried:

  1. Using LinkableMixin:
export function button1_click(event) {
    let tracking = $w("#maerskinput").value;
    let url = MaerskURL(tracking);
    console.log(url);
    $w("#button1").link = url;
    $w("#button1").target = "_blank";
}

The above grabs the tracking number from input (maerskinput), appends the tracking number to the base url using my public function MaerskURL(tracking), and attempts to link my search button (button1) with the new url link (url). The console.log(url) is 100% right but i’m unable to properly assign the URL link to the my search button.

  1. Using Wixlocation:

Created a dataset called “maesrktrackingrequests” that grabs the tracking number from input (maerskinput) on my Container Tracking webpage. The search button (button1) submits the data to the dataset and redirects the user to new page called “Carrier Redirect” where i have the following code:

import {MaerskURL} from 'public/variables.js';
//import carrierurl from 'public/variables.js';
import wixLocation from 'wix-location';

$w.onReady(function () {
    $w("#dataset1").onReady( () => {
        let urlobject = $w("#dataset1").getCurrentItem()
        let tracking = urlobject.title
        let  url = MaerskURL(tracking)
        console.log(url)
        wixLocation.to(url);
});
});

I have a button on this “redirect” page that’s connected to the Maersktrackingrequests dataset so i can see what the my code is going to pull. The label on my button shows the correct tracking number in preview mode.
I used a nested .onReady because the site needs time to load the data set, otherwise it returns “null”.
The console.log(url) shows the url I need when i’m in preview mode.

When i run the published site (to get wixLocation to run) it does not run, the button doesn’t display the right label anymore, and I get the following errors in my browser console:

console.js:35 Failed to load initial data 

e.<computed> @ console.js:35

console.js:35 An error occurred in one of datasetReady callbacks TypeError: Cannot read property 'title' of null

^^ the whole point of using the nested .onReady was to avoid null, which works in preview?

Any recommendations for this? Maybe another work around? Been stuck on this for two days now… lol.
If i could dynamically change the url link set on a button in the basic button link settings that would be AWESOME but not sure how to do it since it requires a “paste.”

Thanks!

2

If anyone is trying to achieve the same goal, I found a solution for method two.

In the code in the “redirect” page, I have the urlobject assigned to the title column. I added a new column that is NOT a main, title column and called it “tracking.” Changed my code to:

$w.onReady(function () {
    $w("#dataset1").onReady( () => {
    let urlobject = $w("#dataset1").getCurrentItem()
    let tracking = urlobject.tracking
    let  url = MaerskURL(tracking)
    console.log(url)
    wixLocation.to(url);
});
});

(changes highlighted)
Changed permission to let anyone read or create data from the collection and it worked.

3

Awesome - Thank you for posting what you found! This is very helpful.