iFrame/HTML Code issue

Ask the community
, ,
1

Hi,
I’m creating an online store, and want to add a widget to an external website.
I’ve used an iFrame with this code (as instructed by them):

<script src="https://www.vivino.com/external/vivino-widgets.js" type="text/javascript" async></script>
<div 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"><a href="https://www.vivino.com/gazela-vinho-verde-rose/w/1166700" target="_blank">Gazela Vinho Verde Rosé U.V. on Vivino</a></div>

this works well. Unfortunately it obviously only shows by the product hardcoded in the

attribute “data-vivino-vintage-id”. (“1606513”).

How do I make this dynamic?

It tried the following code. I send a message to iFrame from wix with the intended product code. I then change the

attribute the the new “vintage-id”. Unfortunatelly, although is seems to be working (last console.log returns correct value) nothing happens and the widget doesn’t update.

<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);
		}
	  };
	</script>

</body>
</html>

Help anyone?

Best Regards,
José Caeiro

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