Let button generating URLs dependent on selected values

Ask the community
, ,
1

Hello Wix Community,
I have an issue with Wix Code. I have dropdowns with one text field as Car_Brand > Car_Model = Car_Size . Car_Size in this case is a “text field” which is determined of selected Car_Model (e.g. Audi > A4 = Medium ). Now I would like to embody one idea.
I want to add a “Booking button” with a list of custom URLs in order to generate a right link dependent on selected values before, as Car_Brand > Car_Model = Car_Size in order with a clicking of booking button i would go to outsource webpage but integrated in window frame on my website with prefilled data.
(e.g. https://fnsbuchen.as.me/ medium ?field:4517648= Audi %20 A4 ) . I would appreciate your help in details because im not that good enough in Wix Code.
Thank you in advance.

1020×672 90.3 KB

2

Hi Dominic!

It sounds like you want to manipulate the wixLocation API to your needs which is totally doable!
If I understood your request correctly and all the urls has a similar pattern (depending on the fields (3, 1 and 2 - as marked in your screenshot)) it should look something like this:

import wixLocation from 'wix-location';

let url = `https://fnsbuchen.as.me/${$w('#field3').value}?field:4517648=${$w('#field1').value}%20${$w('#field2').value}`;

//This will automatically generates your desired url 
//according to the values in the users input. 

wixLocation.to(url);

Hope it helps!
Best of luck

Doron. :slight_smile:

3

Doron, That’s great a might be helpful! Thank you! But the question is how I do connect that script with my booking button and where do I put that script? On Page or Beckend Module or? Thank you very much
Dominic.

4

Hi,
Check out this article:

You need to use postmessage Method.
It should look like this:

$w("#yourHTMLComponent").postMessage(['Audi','A4']);

The code to the HTML component should look some thing like this:

<html>
<head>
    <script type="text/javascript">
        window.onmessage = (event) => {
            if (event.data) {
                const iframe = document.getElementById("myIframe");
                iframe.src = `https://fnsbuchen.as.me/medium?field:4517648=${event.data[0]}%20${event.data[1]}`;
            }
        };
    </script>
</head>
<body>
<iframe id="myIframe" src="https://www.example.com"></iframe>
</body>
</html>

Don’t forget to add the onClick event to the button.
Good luck!
Roi.