Display products on cms using javascript

[Med Aziz]

To start with, I'm using this module  Products On CMS Or Anywhere  which enables one to display specific products anywhere by writing for example this line of code [ph-product-cms id="1"]. That line of code will be converted afterwards into many lines of html code.

That's been said, i'm creating at the moment an algorithm to display certain products based on the user's answers. I added a new page in which I've put the html code using PrestaShop basic text editor.
However, i can't use the module in that text editor because it only supports html and i want to use conditions (if.. else if) in order to display the products that's why i've used javascript and wrote the rest of the code in page.tpl
The thing is when i want to change the content of a div using innerhtml for example like this document.getElementsByClassName('test0 prod')[0].innerHTML = "[ph-product-cms id="1"]"; It shows me an error due to the wrong syntax and i think that's because of the embedded double quotes inside the external double quotes. This is a screenshot of the error down below.

I tried replacing double quotes with single quotes but the problem remains.

I'm sure it was the double quotes that caused the problem because when i replaced them with backticks it worked but the code lacked some lines. 

If anyone could tell me how to fix this that would be great.

Thanks in advance.

[knacky]

.innerHTML = '<div class="your_class">';

 

[Ress]

Wouldn't it be easier for you to use such a module for this?

https://addons.prestashop.com/en/additional-information-product-tab/86348-product-finder-assistant.html

 

Edited April 6, 2022 by Ress (see edit history)