window.parent.postMessage() help

Hi all,

I am wondering if someone can help me to understand how the wix pages communicate with the html iframes that one can embed.

I am trying to use the html in an embedded element to send a window.parent.postMessage() to the wix page such that the wix page will understand the message is recieved using onMessage() and then changing a text element or an input element to the event.data using $w(#textElement).text = event.data

I have been struggling for 2 days on the using the following resources by to no avail!

https://support.wix.com/en/article/corvid-working-with-the-html-element
(In this example if i could get the example of messaging demonstration to work i will be happy)

Thanks in advance for any help

Kind Regards
Francois

The example in the the article that you linked to explains precisely what’s needed. Not sure how I can help, but you might want to try loading this simple HtmlComponent example in your editor. The example is based on the article.

Thank you so much for your response! It was very usefull, with your example I managed to get it to work on my site.

I am trying to build a system that generates a quote using google maps directions data etc in the html iframew and then send that to the wix system so that I can create an email automation when the customer clicks accept quote.

Here is a link( not yet sorted out the mobile view so it is best to view with a desktop) https://www.polyorganics.co.za/html-to-corvid .

Do you know if it is possible for me to send the map in this way aswell? So that i can display it on the wix side rather than in the html iframe, so that i dont have to use so many linebreaks in the html.

I am now stuck with with getting a database to accept the info that i sent to the wix page. It creates an entry in the database but all the fields are blank. Do you perhaps know why this could be? I am trying to follow the instructions in this article: https://support.wix.com/en/article/creating-a-form-with-user-input-elements

Here is the html code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script async defer
 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA4tP_Uqtu37pDnYyW6cbrvCkvj_5qa69s">
 </script>
 <title>My Geocode App</title>
 <style>
 table {
 font-family: arial, sans-serif;
 border-collapse: collapse;
 table-layout: fixed;
    }
 
 td, th {
 border: 2px solid #dddddd;
 text-align: left;
 padding: 8px;
 overflow: hidden;
 text-overflow: ellipsis;
 word-wrap: break-word;
    }
 
 tr:nth-child(even) {
 background-color: #dddddd;
    }
 </style>
 <style>#map {height:350px;display: flex ;}
 </style>

 </head>
<body>
 <br>
 <div class="container">
 <br>
 <h4 id="text-center">Enter Details: </h4>
 <br>
 <form id="location-form">
 <h5>Name :</h5>
 <input type="text" id="name-input" class="form-control form-control-lg">
 <br>
 <h5>Email Address:</h5>
 <input type="email" id="email-input" class="form-control form-control-lg">
 <br>
 <h5>Phone Number:</h5>
 <input type="tel" id="tel-input" class="form-control form-control-lg">
 <br>
 <h5>Delivery Address:</h5>
 <input type="text" id="location-input" class="form-control form-control-lg">
 <br>
 <h5>Compost (m^3) :</h5>
 <input type="number" id="compost-input" min="0" class="form-control form-control-lg">
 <br>
 <h5>Lawn Dressing (m^3):</h5>
 <input type="number" id="lawn-input" min="0" class="form-control form-control-lg">
 <br>
 <h5>Compost Bags (30 dm^3):</h5>
 <input type="number" id="CMBag-input" min="0" class="form-control form-control-lg">
 <br>
 <h5>Lawn Dressing bags (30 dm^3):</h5>
 <input type="number" id="LDBag-input" min="0" class="form-control form-control-lg">
 <br>
 <button type="submit" class="btn btn-primary btn-block">Generate Quote</button>
 </form>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br> 
 <br>
 <br>
 <br>
 <br>
 <br>
 <br> 
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <div id= "map"></div>
 <div id="test"></div>
 </div>
 
 <script>
 
 var locationForm = document.getElementById('location-form');
 locationForm.addEventListener('submit', geocode);
 
 function sum(input){
 
 if (toString.call(input) !== "[object Array]")
 return false;
 
 var total =  0;
 for(var i=0;i<input.length;i++)
                          {                  
 if(isNaN(input[i])){
 continue;
 }
 total += Number(input[i]);
                           }
 return total;
                        }

 function geocode(e){
 e.preventDefault();
 var name_in = document.getElementById('name-input').value;
 var email_in = document.getElementById('email-input').value;
 var location = document.getElementById('location-input').value;
 var compost = document.getElementById('compost-input').value;
 var comp_bag = document.getElementById('CMBag-input').value;
 var lwnd = document.getElementById('lawn-input').value;
 var lwnd_bag = document.getElementById('LDBag-input').value;
 var tel_in = document.getElementById('tel-input').value;

 axios.get('https://maps.googleapis.com/maps/api/geocode/json',{
 params:{
 address:location,
 key:'AIzaSyA4tP_Uqtu37pDnYyW6cbrvCkvj_5qa69s'
        }
      })
      .then(function(response){
 console.log(response);
 var lat = response.data.results[0].geometry.location.lat;
 var lng = response.data.results[0].geometry.location.lng;
 var FormattedAddress = response.data.results[0].formatted_address;
 
 const center = {lat: -25.949894, lng: 28.178250};
 const options = {zoom: 15, scaleControl: true, center: center};
 map = new google.maps.Map(document.getElementById('map'), options);
 const polyorganics = {lat: -25.949894, lng: 28.178250};
 const inpt = {lat: response.data.results[0].geometry.location.lat, lng: response.data.results[0].geometry.location.lng};
 var mk1 = new google.maps.Marker({position: polyorganics, map: map});
 var mk2 = new google.maps.Marker({position: inpt, map: map});
 let directionsService = new google.maps.DirectionsService();
 let directionsRenderer = new google.maps.DirectionsRenderer();
 directionsRenderer.setMap(map); 
 const route = {
 origin: polyorganics,
 destination: inpt,
 travelMode: 'DRIVING'
        }
 

 directionsService.route(route,
 function(response, status) { 
 if (status !== 'OK') {
 window.alert('Directions request may need more detail =' + status);
 return;
            } else {
 directionsRenderer.setDirections(response); 
 var directionsData = response.routes[0].legs[0]; 
 if (!directionsData) {
 window.alert('No Delivery Route Found');
 return;
              }
 else {
 var compostPrice = compost*395
 var lwndPrice = lwnd*395
 var lwndbagPrice = lwnd_bag*30
 var compbagPrice = comp_bag*30
 var deliveryPriceCube = parseFloat(directionsData.distance.text) *(21*sum([compost,lwnd]))
 var deliverPriceBag = parseFloat(directionsData.distance.text) *(21*(0.03*sum([comp_bag,lwnd_bag])))
 
 var test = {
 name:name_in,
 email:email_in,
 phone:tel_in,
 delivery:directionsData.distance.text,
 lwnd_m3:lwndPrice.toFixed(2),
 comp_m3:compostPrice.toFixed(2),
 lwnd_30dm3:compbagPrice.toFixed(2),
 comp_30dm3:lwndbagPrice.toFixed(2),
 delv_price:sum([deliveryPriceCube,deliverPriceBag]).toFixed(2),
 tot_price:sum([compostPrice,lwndPrice,lwndbagPrice,compbagPrice,deliverPriceBag,deliveryPriceCube]).toFixed(2),
 delv_adrss:FormattedAddress,
 CM3_Quant:compost,
 LDM3_Quant:lwnd,
 CMB_Quant:comp_bag,
 LDB_Quant:lwnd_bag
                    };

 document.getElementById("test").value = test

 window.parent.postMessage(document.getElementById("test").value, "*");
              }
            }
          });
      })
      .catch(function(error){
 console.log(error);
 window.alert(error);
      });
    }
</script>
</body>
</html> 

Here is the wix page code

$w.onReady(function () {
 
    $w("#html1").onMessage((event) => {
        $w("#input1").value = event.data.name;
        $w("#input2").value = event.data.email;
        $w("#input3").value = event.data.phone;
        $w("#input4").value = event.data.delivery;
        $w("#input5").value = event.data.lwnd_m3;
        $w("#input6").value = event.data.comp_m3;
        $w("#input7").value = event.data.lwnd_30dm3;
        $w("#input8").value = event.data.comp_30dm3;
        $w("#input9").value = event.data.delv_price;
        $w("#input10").value = event.data.tot_price;
        $w("#input11").value = event.data.delv_adrss;
        $w("#input12").value = event.data.CM3_Quant;
        $w("#input13").value = event.data.LDM3_Quant;
        $w("#input14").value = event.data.CMB_Quant;
        $w("#input15").value = event.data.LDB_Quant;    


        console.log(event)
    });
});

Apologies if the code is a bit ugly, this is my first attempt at this type of thing after doing a course that involved python at university.

Thank you in advance.

Kind Regards

@francoisgriessel1802 A dding code to an HTML component is not a part of the Corvid product (which is what this forum is about). You will need to check the Google Maps documentation, and the provider of the script to find out how to get it work and how to adapt it to your needs.

You might find this example useful:
Multiple Markers in Google Maps
Embed Google Map on your site with multiple location markers , marker clustering, and custom controls using the HTML component.