How to Dynamically update SRC URL of iFrame in a LightBox, when click triggered, with Wix Product Code

Ask the community
,
1

Hello,
I am wondering if someone can help me with this. New to Velo, any help would be greatly appreciated, already tried the help files and searching for this, and I hope someone can help me with this specifically.

I want to add an iframe of the Measurement Details of Products @ To the iframe component on the Wix Product Page: trillstat. us/product/measurements/4ee7a5dd-608c-40b1-b240-8eddfd0460a1/ index. html , linked through a Lightbox " Measurements ".
At present, the Lightbox HTML code is:

I simply want to be able to dynamically update the bold part of the SRC URL address, which is the Wix Product Code, which reads a static HTML document through the iframe, that contains the measurements @ the Lookbook Website, when the (Green) Measurements button is triggered (clicked) on the Wix Product Page.

I am able to get the Wix Product Code, as displayed on the left-hand side of the Product Page for each product from the Wix DB, however, I require to pass that Product Code to the Wix Lightbox “Measurements” and have the iframe SRC URL updated according to the Wix Product Code + “/index.html” (Static Page for simplicity purpose).

The  Velo instructions for passing data to an iframe are vague and I was not able to figure it out from it. My code for obtaining the Wix Product  Code is written below. 

//-------------Imports-------------//

import wixLocation from 'wix-location';

//-------------Exmports-------------//

export function onLoad() {

    $w('#section1').hide();

}

function waitForLoading() {
    
    setTimeout(() => {
 
        $w('#section1').show();

    }, 1111);
}
//-------------Global Variables-------------//

// Current product.
let product; 
$w.onReady(async function () {

    product = await $w('#productPage1'). getProduct(); 

 
    wixLocation. onChange(async (location) => {
 
        $w('#text1').text = product. name;
 
    });

    $w('#button1').onClick(() => {

        $w. onReady(async function () {
            product = await $w('#productPage1'). getProduct(); 

            $w('#text1'). text =  product. _id;
        });      
     
    });

})

$w.onReady(function () {
    
    onLoad();

    $w.onReady(() => {

        waitForLoading();
        
    });
});

Again, any help on the matter is greatly appreciated. I am just finalizing the rest of the Sizing Guide now, but the initial products on the Products Page are available as an example, though the iframe only points to the first one currently until it can be dynamically updated.

Thank you!
X

2

//-------------Imports-------------//

import wixLocation from ‘wix-location’ ;

//-------------Exmports-------------//

export function onLoad () {

$w ( '#section1' ). hide ();

}

function waitForLoading () {

setTimeout (() => { 

    $w ( '#section1' ). show (); 

},  1111 );

}

//-------------Global Variables-------------//

// Current product.
let product ;

$w . onReady ( async function () {

product  =  **await**  $w ( '#productPage1' ). getProduct ();  

wixLocation . onChange ( **async**  ( location ) => { 

    $w ( '#text1' ). text  =  product.name ; 

}); 

$w ( '#button1' ). onClick (() => { 

    $w . onReady ( **async function**  () { 
        product  =  **await**  $w ( '#productPage1' ). getProduct ();  

        $w ( '#text1' ). text  =   product._id ; 
    });       
 
});

})

$w . onReady ( function () {

onLoad (); 

$w . onReady (() => { 

    waitForLoading (); 
    
});

});