Page 1 of 1

Page with dynamic content via JS

Posted: 22 Mar 2023, 04:51
by hyc
Hi all,

In line with that post : viewtopic.php?f=52&t=10565

I am having similar question, however, I can't seem to make it work..

I have one page with following content in "Page_name>Settings>Content" area : 
Code
<div id="testid"></div>

<div>
<script data-cfasync="false" type="text/javascript" src="https://externaljs.com/example" charset="utf-8"></script>
<script type="text/javascript"> xSpecialFunction(param(50));</script>
</div>
When reaching the page by itself (direct link), it works great.
When reaching the page from any other page of the website, the content doesn't load.
Now I understand the reason, but I am not sure how to fix it.

I tried by having this code in "Page_name>Settings>Page>Advanced>Page Javascript"
Code
function x3_load_page(){
  xSpecialFunction(param(50));
}
and changing this in the "Page_name>Settings>Content" but it didn't work
Code
<div id="testid"></div>

<div>
<script data-cfasync="false" type="text/javascript" src="https://externaljs.com/example" charset="utf-8"></script>
</div>
thanks for the help

Re: Page with dynamic content via JS

Posted: 22 Mar 2023, 05:56
by mjau-mjau
Really difficult to diagnose without a link, because I don't know what this Javascript does or how and when it triggers. Normally, if you include it in the "content", it will load (and perhaps trigger after loaded). If it does not trigger automatically, you would have to run a function for the javascript. Also, are you using Cloudflare? What is data-cfasync for? You should never use rocketloader in X3 for example, because it can mess up the order of how javascript is loaded and triggered.

Re: Page with dynamic content via JS

Posted: 22 Mar 2023, 08:09
by hyc
Got your point

This is content of code in "content" :
Code
<div id="my-store-85914820"></div>
<div>
<script data-cfasync="false" type="text/javascript" src="https://app.ecwid.com/script.js?85914820&data_platform=code&data_date=2023-03-17" charset="utf-8"></script><script type="text/javascript"> xProductBrowser("categoriesPerRow=3","views=grid(20,3) list(60) table(60)","categoryView=grid","searchView=list","id=my-store-85914820");</script>
</div>
It is an ecommerce/shop from Ecwid

Does that help ? 

Re: Page with dynamic content via JS

Posted: 22 Mar 2023, 10:20
by mjau-mjau
I tried the script locally, and it's like you say ... works on first load, but not when navigating to the page. Where is the docs for this? I can't see that this is prepared for SPA websites that load pages dynamically like X3. The main javascript does something by itself when it's loaded, and even refused to be placed in the <head> (it complained <body> was not available), and then it clearly also requires running the xProductBrowser().

Surely they support triggering the shop on the element manually? This script doesn't seem to be prepared at all for dynamic pages.

Re: Page with dynamic content via JS

Posted: 22 Mar 2023, 12:53
by hyc
Some info here https://support.ecwid.com/hc/en-us/arti ... 5004678945

I will reach out to them directly through my account to ask for info on dynamic loading, but there is no way to have the main js in the body of all pages ? 

Re: Page with dynamic content via JS

Posted: 22 Mar 2023, 22:45
by mjau-mjau
hyc wrote:I will reach out to them directly through my account to ask for info on dynamic loading, but there is no way to have the main js in the body of all pages ? 
There is, by adding the <script> to X3's Settings > Footer, which is basically at the end inside the <body> tag. I already tried this, but it doesn't work ... This script/code seems to only want to trigger once, as it thinks it's on a single page and has no reason to trigger again.
There is no info here about re-triggering the script. It just mentions what you have already done, in which case it triggers correctly, but there is no means (at least by documentation) to re-trigger the script.

Basically I would ask "How to trigger this script for a SPA (single-page application) website? The xProductBrowser() function does nothing when triggered after the first time. I have tried to add the <script> to header (causes an error in the script), once in <body> and also tried to reload it before triggering xProductBrowser()."

This script doesn't really look that well planned to me.