Connecting a Dataset URL to an Iframe Embed Element

Ask the community
1

I have a desire to connect a Dataset URL to a IFRAME element, but I don’t see the ability to connect the element to the dataset.

Thoughts anyone?

Teejay

1 Like
2

hey @teejay - which component type are you trying to connect?

3

I would like to embed another website the IFRAM ELEMENT in the TITLE page of a Dataset.

2758×1034 263 KB

4

I basically have 28 shows over the year. We use a third-party ticketing system and we want to keep people at the site, even though they are buying their tickets at this service on a page set in an iframe.

Rather than creating 28 pages, was trying the content manager / dataset to see if I could dynamically generate these pages

5

Hi @teejay
You can do this using Velo.

I create a collection named ‘urls’.
It has field title and field url , which has URL to some site or page.

775×503 34.9 KB

Add empty iFrame or use yours.

908×493 13.9 KB

Here is the code snippet example.

import wixData from 'wix-data';

$w.onReady(function () {
    wixData.query('urls')
    .eq('title', 'Youtube')
    .find()
    .then(res => {
        $w('#iframe1').src = res.items[0].url;
    })
});

Here is live site example.
https://vladkl4.editorx.io/my-site-5

Try it on your way.
You can improve code and add functionality you need.

Is this something you are looking for?

6

THANKS! I am continuously impressed. I will deploy a copy today.

7

What type of field is your STATUS field, please?

8

Thanks for your assistance, and I have a few more questions:

1. In this line of code:

. eq ( ‘title’ , ‘Youtube’ )

Do you need the secondary “Youtube”? Isn’t title sufficient, or would I have to add all the titles for each of my items?

  1. If I put the Velo code in the Dev Mode panel at the footer and assign it the ID of the iframe element, does anything receiving code go into it?

After setting everything up, the iframe has a UNDEFINED server IP address error.

Thoughts?

Thanks, Teejay

9

@teejay Status field is something in testing process on my way, don’t mind.
Answers on your questions

  1. . eq ( ‘title’ , ‘Youtube’ ) means that I want to retrieve an item from my Collection, which Title field has Youtube value

After I get an object item from my collection, then I can get any other value of this item. Every item has ‘url’ property with its value, and Youtube item in my collection has ‘htttps://youtube.com’ url value.

1554×822 103 KB

check this link and read a description
https://www.wix.com/velo/reference/wix-data/wixdataquery/eq

  1. In order this code works on your way, you have to use
  1. your collection name,
  2. your iFrame editor element’s ID,
  3. in your specific case you may need to specify dynamically the item properties (name and value) inside eq(‘yourFieldName’, ‘yourFieldValue’)
  4. your field name (‘url’ in my case) in your collection, that contains fact url.

I’ve underlined for you below in the code snippet all the values that for sure can differ for me and for you.

But please note that is only simple code snippet. The functionality can be much more difficult.

1526×968 96.2 KB

10

@vladkl in your case what is your collection name?

11

Here is what I have:

I have a URL field named Spektrix URL with Field Key of spektrixUrl

1312×1446 150 KB

I have a title as The Nutcracker – Dec 4

1316×1232 136 KB

The ID of the IFRAME element is “#spektrix”

1316×1532 109 KB

And here is my Velo code

import wixData from ‘wix-data’ ;

$w . onReady ( function () {
wixData . query ( ‘spektrixUrl’ )
. eq ( ‘title’ , ‘The Nutcracker – Dec 4’ )
. find ()
. then ( res => {
$w ( ‘#spektrix’ ). src = res . items [ 0 ]. spektrixUrl ;
})
});

This why I asked about where to put the ID /Name of the Dataset which I have as #ticketData

My question how does this code know to pull from this dataset? THANKS IN ADVANCE FOR ALL YOUR TIME.

634×2014 81.6 KB

12

Hi. My collection’s name is “urls”

wixData.query('spektrixUrl') // wrong collection name

in this query() you should point the collection name as an argument. I guess your collection’s name is ‘Tickets’ ?
So the code should be

$w.onReady(function () {
    wixData.query('Tickets') // collection name
    .eq('title', 'The Nutcracker – Dec 4')
    .find()
    .then(res => {
        $w('#spektrix').src = res.items[0].spektrixUrl;
    })
});

What is #ticketData ? Is it a dataset id?
You don’t need the dataset when working with velo code.

By the way, this code is really custom. I mean that you point the item name (‘The Nutcracker – Dec 4’) manually

 .eq('title', 'The Nutcracker – Dec 4')

But you can expand the functionality with velo and dynamically define the right name to retrieve.
Stuff like this

let ticket;
if (// some condition) ticket = 'The Nutcracker – Dec 4';
if (// some condition) ticket = 'The Nutcracker – Dec 20';

wixData.query('Tickets')
.eq('title', ticket)
.find()
.then(res => {
    $w('#spektrix').src = res.items[0].spektrixUrl;
})

You can create a variable that under some conditions (you choose what conditions) can be one or another value. And this value should be equal to your title name.

Or another way
You can once retrieve ALL the items from the collection and change the array item under some conditions.

wixData.query('Tickets')
    .find()
    .then(res => {
        console.log(res.items) // array of results. Every array item is a collection item
        if (// some condition) $w('#spektrix').src = res.items[0].spektrixUrl
        if (// some condition) $w('#spektrix').src = res.items[1].spektrixUrl
        if (// some condition) $w('#spektrix').src = res.items[10].spektrixUrl
    })
});

In this case you should check and know the order of items.

Or create your own way to define the correct name of a title in order to retrieve the url related to this title. You should know code to do that.
Hope that I’ve helped you :grin: