Javascrip in symbol not always executed

Bugs
1

Hi!

I hope you are well. I have an issue I was hoping you would be able to help with.

I have created a symbol, which contains some javascript to get from an API 6 products from a certain category to show as product recommendations on an e-commerce website.

image
image1942×882 220 KB

On our homepage, we use 4 times this symbol, each time to get products from a different category. The category is provided as an input to the symbol.
The strange thing which happens now, is that it seems that randomly not all 4 of the symbols are shown.
In certain cases I see the 4 symbols correctly appearing with the 6 products, however occasionally (independent of the browser used) only some of the symbols would be shown.
Refreshing the page can change which of the symbols appear.

Looking at the network activity in my browser, I see the 4 calls being made for the 4 times this symbol is used using the builder SDK.

image
image1724×256 55.8 KB

Each of theses calls correctly gets a response, with the javascript provided in the response.

image
image2452×416 104 KB

However, occasionally not all of these 4 scripts would get executed correctly as far as I can see.
In the javascript of the symbol I started the script with printing the name of the category to fetch to check where the issues is, and it seems the console.log command is never executed.
Looking at the network activity I can also see that the endpoint for the search engine is also not requests 4 times.

As a conclusion, I have the impression that the content of the 4 symbols is correctly obtained, but that for some reason the javascript inside these symbols is’t correctly executed.

Any idea what might be causing this?

Many thanks in advance,
Vincent

2

Hey Vincent,

Would you mind sending me the Builder urls for both the homepage and the symbol? Thanks!

3

Hi Kara,

Thanks for your reply.
The link to the symbols is the following

I found actually a way around this issue.
The reason I went for a custom JS is because the API of the search engine I needed to connect to as a data source contains custom headers
As a workaround, I created a new endpoint on my backend which proxies the call and adds the required custom headers. That allows me to use this new endpoint as a data source, and all seems to be working as expected.

Best,
Vincent

4

Thanks for sharing your workaround!