Dec 7, 2017

CONNECT HTML EDITOR TO DATABASE! - Useful for dynamic pages

I request this feature in wix code!

I want to add an trustpilot Product reviews box to my dynamic page... But i need to use your HTML editor to sync between trustpilot and my site.. But at the moment i can't connect HTML editor to database in wix code...

How i think it should work:

1: In wix database:

Add field - in field type choose HTML - enter the html code here

2: On dynamic page

add the HTML editor - connect it to wix database and choose the HTML code field

8 comments0 replies

jonathan.r.earley

Dec 12, 2017

I'm trying to do the same thing. I'm almost there, but now when I try to pass a value, Wix tells me:

"Wix code SDK error: The message parameter that is passed to the postMessage method cannot be set to the value . It must be of type object,string."

So my next question is, how do I set a value passed from the database to an object that I can then pass to the HTML component??

Here's what I have so far:

$w.onReady(function () {

$w("#dynamicDataset").onReady(function(){

var payPal = $w('#dynamicDataset').getCurrentItem().payPalCode;

$w("#payPalCode").postMessage(payPal);

});

Within the HTML component I have the following:

<!doctype html>

<html>

<head>

function init () {

// when a message is received from the page code

window.onmessage = (event) => {

if (event.data) {

console.log("HTML Code Element received a message!");

insertMessage(event.data);

}

// display received message

function insertMessage(msg) {

document.getElementById('code').innerHTML = msg;

sendReturnMessage("Message from the HTML Component!");

}

// send message to the page code

function sendReturnMessage(msg) {

window.parent.postMessage(msg, "*");

}

</script>

</head>

</body>

</html>

Vortex Club

Dec 19, 2017Edited: Dec 19, 2017

I have this same doubt, since in case I can connect it to the html box, a code in the database would help to put Wight from the IMDB site and others as my system of Votes Per Star:

IMDB html:

<span class="imdbRatingPlugin" data-user="ur67763533" data-title="tt2339875" data-style="p2"><a href="http://www.imdb.com/title/tt2339875/?ref_=plg_rt_1"><img src="http://g-ecx.images-amazon.com/images/G/01/imdb/plugins/rating/images/imdb_38x18.png" alt=" Accel World
(2012) on IMDb" />
</a></span><script>(function(d,s,id){var js,stags=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return;}js=d.createElement(s);js.id=id;js.src="http://g-ec2.images-amazon.com/images/G/01/imdb/plugins/rating/js/rating.min.js";stags.parentNode.insertBefore(js,stags);})(document,'script','imdb-rating-api');</script>

Votes per star:

<script type="text/javascript">(function(d, t, e, m){

    
    // Async Rating-Widget initialization.
    window.RW_Async_Init = function(){
                
        RW.init({
            huid: "334919",
            uid: "28eb05a0b5ae7855f3e947b9a86e65b5",
            source: "website",
            options: {
                "advanced": {
                    "layout": {
                        "lineHeight": "12px"
                    },
                    "star": {
                        "stars": 6
                    },
                    "font": {
                        "hover": {
                            "color": "#CEC5C6"
                        },
                        "size": "10px",
                        "color": "#CEC5C6"
                    }
                },
                "label": {
                    "background": "#493C3D"
                },
                "lng": "pt",
                "style": "oxygen",
                "isDummy": false
            } 
        });
        RW.render();
    };
        // Append Rating-Widget JavaScript library.
    var rw, s = d.getElementsByTagName(e)[0], id = "rw-js",
        l = d.location, ck = "Y" + t.getFullYear() + 
        "M" + t.getMonth() + "D" + t.getDate(), p = l.protocol,
        f = ((l.search.indexOf("DBG=") > -1) ? "" : ".min"),
        a = ("https:" == p ? "secure." + m + "js/" : "js." + m);
    if (d.getElementById(id)) return;              
    rw = d.createElement(e);
    rw.id = id; rw.async = true; rw.type = "text/javascript";
    rw.src = p + "//" + a + "external" + f + ".js?ck=" + ck;
    s.parentNode.insertBefore(rw, s);
    }(document, new Date(), "script", "rating-widget.com/"));</script><script type="text/javascript">(function(d, t, e, m){
    
    // Async Rating-Widget initialization.
    window.RW_Async_Init = function(){
                
        RW.init({
            huid: "334919",
            uid: "28eb05a0b5ae7855f3e947b9a86e65b5",
            source: "website",
            options: {
                "advanced": {
                    "layout": {
                        "align": {
                            "hor": "center",
                            "ver": "top"
                        },
                        "lineHeight": "12px"
                    },
                    "star": {
                        "stars": 6
                    },
                    "font": {
                        "hover": {
                            "color": "#CEC5C6"
                        },
                        "size": "10px",
                        "color": "#CEC5C6"
                    }
                },
                "size": "medium",
                "label": {
                    "background": "#493C3D"
                },
                "lng": "pt",
                "style": "oxygen",
                "isDummy": false
            } 
        });
        RW.render();
    };
        // Append Rating-Widget JavaScript library.
    var rw, s = d.getElementsByTagName(e)[0], id = "rw-js",
        l = d.location, ck = "Y" + t.getFullYear() + 
        "M" + t.getMonth() + "D" + t.getDate(), p = l.protocol,
        f = ((l.search.indexOf("DBG=") > -1) ? "" : ".min"),
        a = ("https:" == p ? "secure." + m + "js/" : "js." + m);
    if (d.getElementById(id)) return;              
    rw = d.createElement(e);
    rw.id = id; rw.async = true; rw.type = "text/javascript";
    rw.src = p + "//" + a + "external" + f + ".js?ck=" + ck;
    s.parentNode.insertBefore(rw, s);
    }(document, new Date(), "script", "rating-widget.com/"));</script>
<div class="rw-ui-container" data-title="afro samurai"></div>

That in the final result should look something like this:

Mahigan Lepage

Jan 20, 2018

Hi,

I'm trying to do something similar, i.e. putting htlm in database, and then embed iframe of htlm code in a dynamic page, with would change from one page to the next.

If you ever find a solution, please tell me, it would be fantastic.