(SOLVED) Dynamic HTML Component JS Widget for Dynamic pages

Ask the community
,
8

Hey Dillon @dillon58311 ,

I saw you already solved it but yet another solution I just came up with when having a similar issue and were able to solve it. I thought it could be interesting in general for all of you who have acoding team that is able to create costum html content you want to embed dynamically in your website:

  1. In your collection create a new text field (use text as it takes less storage space than rich content for example) and name it html (or else but in my code html)
  2. For every dynamic item paste the html code with all css and js inside the item html field
  3. create a strip with an html component inside the WIX editor and name th component html (or else but in my code html)
  4. Put this to your page code to get the html value and send it to the component when it has loaded:
$w.onReady(function () {
   $w("#knowledgeDataset").onReady(() => {
          const item = $w("#knowledgeDataset").getCurrentItem();
          const html = item.html ? item.html: null;
          if(html){
               $w("#html").onMessage( (event) => {
                  $w("#html").postMessage(html);
                  console.log("sent data")
               });
          }
          else{
             $w('#htmlstrip').collapse();
          }
   });
}); //closing page onready
  1. Add this code to your html component:
<html>
<head>
	<title>Dynamic HTML Component</title>
</head>
<body>
	<h1>Page still loading</h1>
<script>window.parent.postMessage("ready","*");
// when a message is received from the page code let the message data be the new html content
window.onmessage = (event) => {
  let newhtml = event.data;
  document.open();
  document.write(newhtml);
  document.close();
};
 </script>
</body>
</html>

(you can modify the style, the important part is the script to set the new content of the html component to your items html!)

  1. What is a little pain is that you can not modify the width and height of an html component with WIX Velo. So you would need to create strips for different heights and offer different fields in the collection for the respective strip and component. Then you would check if the field exists on read and collapse the strip if not I guess. If anyone has a better solution please let me know!
3 Likes