Embed code from dataset to html element

Ask the community
,
1

Hello, i have a rooms dynamic page for my hotel, and I’m trying to display a reviews widget for each rooms
I want to grab the code from my data collection for each rooms widget and embed it in the code of the html element
I’ve been looking for solution but haven’t found anything that works for my case yet

This is the code i have as of now:

import wixData from "wix-data";

$w.onReady(() => {

 $w("#dynamicDataset").onReady( () => {
  const item = $w("#dynamicDataset").getCurrentItem();
  const hmtlcode = item.htmltext;
    $w("#html1").src = hmtlcode;

  });

});

Really appreciate any help!

2

You have 2-options.

  1. Using the html-component.
  2. Using the custom-element.

Here you will find an example of how to do it, using a html-component…
https://www.wix.com/velo/reference/$w/htmlcomponent/postmessage

3

Hello Ninja,
Thanks for the comment, yeah ive tried with postMessage aswell, but the widget never seems to load

4

Where to find the mentioned widged, or the complete code for it?

5

This is the code I’m using for the widget, the numbers change for each room:

<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-8130f7cd-6b8f-408a-9fee-a33461926634"></div>
6

ok! you have this…

and when you put it directly into a html-component you get the following…

1359×765 45 KB

Now you surely want to change it dynamically out of your DATABASE right?

What you have to change here inside this code???..

<script src="https://apps.elfsight.com/p/platform.js" defer></script><div class="elfsight-app-8130f7cd-6b8f-408a-9fee-a33461926634"></div>

… to change data for the widget?

Maybe the following…???

elfsight-app-8130f7cd-6b8f-408a-9fee-a33461926634
7

That is correct, that the part that needs to change for each dynamic page

8

You can try the following (not tested, maybe you will have to complete and modify it…)

This is an example to show you how to send your WANTED-STRING to the COMPONENT. Once your data arrives inside COMPONENT, you will have to generate CODE, which can handle the recieved data.

What to do with the recieved data?
So in your case you will have to change the CLASS (className) …

<div id="My_Element", class=""></div>

from → “”
to ------> “elfsight-app-8130f7cd-6b8f-408a-9fee-a33461926634”;
in other words to → event.data

HTML-COMPONENT-CODE:

<!doctype html>
<html>
    <head>
    <script src="https://apps.elfsight.com/p/platform.js" defer></script>

    <script type="text/javascript"> 
        window.onmessage = (event)=> {
            if (event.data) {console.log("Recieved-Data in HTML: ", event.data);
                document.getElementById("My_Element").className = event.data;
            }
        };

        function sendLoadMessage () {
            window.parent.postMessage("LoadOk", "*");
        }
    </script>
    </head>
    
    <body onload="sendLoadMessage ();" style="background-color:red;">
        <div id="My_Element", class=""></div>
    </body>
</html>

PAGE-CODE:

$w.onReady(function() {
    let stringData = "elfsight-app-8130f7cd-6b8f-408a-9fee-a33461926634";
    $w("#html1").onMessage((event) => {
        $w("#html1").postMessage(stringData);
    });
});

Must be something in to this direction.

For more info, try to ask PAPA-GOOGLE…
How to Change an Element’s Class with JavaScript (w3docs.com)

9

I must be doing something wrong, it turns the widget red, is there any detail i should change on either code?

10

If you see → RED → that means part of CODE already working!

< bodyonload = “sendLoadMessage ();” style = “background-color: red ;” >
change to → white here!

Navigate to → CONSOLE and INSPECT your own code and hot its working.

11

i see, ive changed it to transparent and that sees to work aswell

but the widget is still not loading, i did an inspection though and it is receiving the class:

844×304 12.7 KB