I’m having an impossible time trying to add make the widget that changes according to my dynamic pages! The widget javascript code is this:
On a normal page, it’s super easy to paste this code into an HTML component and the widget shows up instantly. However, I’ve had no luck making the script run on my dynamic pages and the ###### change to the proper number depending on the current page.
I’ve tried chaining the #html1.src to = the URL from the #dynamicDataSet, but that doesn’t work because it changes the source of the HTML component instead of running the script with the right source. I’ve tried using the .postMessage function to input the script, but it doesn’t seem to run the script after the code is input into the HTML Component.
Any help would be greatly appreciated!
I think you can do this using a WIX Custom Element .
Thanks for replying, can you elaborate more on how to do this? I’d have to send data from the #dynamicDataSet to the Custom Element and make it run the script right?
@dillon53759 Sending data is not the problem, I think you can attach the data to a script tag after receiving the data, then attach it to the head.
The source of the problem is that the script tag resides inside the head section. And you can postMessage until you see blue in the face, but that’s too late, postMessage cannot alter the head-tag. You you must provide a new html-page with a different URL, only then will it be loaded again.
You do not need a custom element, you can do it with http-functions:
- use a use_function, lile “use_myhttpfunc”
- set headers, e.g. like so:
let resource_options = {
"headers": {
'Access-Control-Allow-Origin': '*',
'Content-Type': 'text/html'
}
};
3)set html, including everything you want (head, script,etc), e.g. like so (postMessage can also be used, like in example, but it is not necessarry)
let strBody = `<html>
<head>
<script type="text/javascript">
function sendLoadMessage () {
window.parent.postMessage("LoadOk", "*");
}
</script>
</head>
<body onload="sendLoadMessage ();" style="background-color:white;">
<div id="someid">Hello worldr</div>
</body>
</html>`
- attach html to response, e.g. like so:
resource_options.body = strBody;
return ok(resource_options);
(remember to import http-ok at the top of your wix-http functions)
5)add inside this function catch for a query parameter (your ######)
6)in code, set URL for html-component on every dynamic page toe.g. “myhttpfunc?q=#####” (so not a single line of code inside html-component, we just set a new URL every time, html comes from the http-function)
7)done
1 Like
Hi Giri, you are amazing! I had no idea that Wix had http-functions or how to use them.
I had pretty much given up on making this work after 3 days working on it. After your reply, I used the code you provided and finally got it working exactly like I wanted.
Thank you so much for taking the time to write such a detailed answer and for the clear examples and instructions! Beyond grateful for your help.
@dillon53759 No problem, glad you got it working. Do everybody a favor, and mark your question title as SOLVED and maybe a best answer/like, so others will find the answer more quickly.
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:
- 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)
- For every dynamic item paste the html code with all css and js inside the item html field
- create a strip with an html component inside the WIX editor and name th component html (or else but in my code html)
- 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
- 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!)
- 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
Hi @giri-zano , I’m new to Wix and trying to follow this solution which I think does exactly what I need. Are you able to expand on items 5 and 6?
On 5, what do you mean when you say “this function”? Do you mean the use_function?
And then when you say “catch for a query parameter” what do you mean? Is that something like wixData.query(“someCollection”)?
On 6, are you referring to this: https://support.wix.com/en/article/content-manager-creating-a-unique-dynamic-page-url when you talk about setting the URL?
Thanks very much.
Hi. With “query” I meant the query params as coming in thru URL using https://www.wix.com/velo/reference/wix-http-functions/wixhttpfunctionrequest
6 means setting the URL for the html-component as described here: src - Velo API Reference - Wix.com
I love this answer.
Works perfectly for a question I had to answer and feels more elegant.
This worked perfectly for me and I found it more straight forward than the previous answer