iFrame/HTML Code issue

Ask the community
, ,
2

I actually got this working by adding “dispatchEvent(new Event(‘load’));” to the end of the script.
That said the code is:

<html lang="en">
<head>
  	<meta charset="utf-8">
  	<title>Vivino Widget</title>
	<script src="https://www.vivino.com/external/vivino-widgets.js" type="text/javascript" async></script>
	<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>

	<div id="wrapper" class="vivino-widget vivino-wine-card-widget" data-vivino-widget-type="wine" data-vivino-vintage-id="1606513" data-vivino-user-id="49619996" data-vivino-widget-language="en" data-vivino-widget-read-reviews="true" data-vivino-widget-layout="big"></div>  

	<script type="text/javascript">
	  window.onmessage = (event) => {
		if (event.data) {
			console.log("message received");
			let vintageId = event.data.dataVivinoVintageId;
			console.log("vintageId: "+vintageId);
			document.getElementsByTagName("DIV")[0].setAttribute("data-vivino-vintage-id", vintageId);
			var newVintageId = document.getElementsByTagName("DIV")[0].getAttribute("data-vivino-vintage-id");
			console.log("newVintageId: "+newVintageId);
          	dispatchEvent(new Event('load'));
          	console.log("Finished");
		}
	  };
	</script>

</body>
</html>

Unfortunately, as with so many other things Wix, it doesn’t work well on preview, but there’s no issue on the live published site.

Enjoy,
José Caeiro