I tried to design an js algorithm that overrites to existing HTML on my product detail page. This is required after XML integration to my website i want to visualize this specs as table but after XML integration it only allows to store on my website as paragraph tags of HTML.
So;
Here is my code that works exactly well on codepen but not on my wordpress website.
JS
var a,b,c,d,e,f;
var bazes = document.getElementById("prd-desc").getElementsByTagName("div")[0].getElementsByTagName("p") ;
var bazes_t = document.getElementById("prd-desc").getElementsByTagName("div")[0];
a = bazes[0].innerText;
b = bazes[1].innerText;
c = bazes[2].innerText;
d = bazes[3].innerText;
e = bazes[4].innerText;
f = bazes[6].innerText;
//console.log(c);
bazes_t.innerHTML = '<div class ="outer-box"> <table id="urun_inf"> <tr> <td class="col1-head"> Kod </td> <td class="col2-desc">a</td> </tr> <tr> <td class="col1-head"> Ebat </td> <td class="col2-desc"> Açıklama2 </td> </tr> <tr> <td class="col1-head"> Reklam Alanı</td> <td class="col2-desc"> Açıklama3 </td> </tr> <tr> <td class="col1-head"> Renk </td> <td class="col2-desc"> Açıklama4 </td> </tr> <tr> <td class="col1-head"> Merkez Stok </td> <td class="col2-desc"> Açıklama5 </td> </tr> <tr> <td class="col1-head"> Toplam Stok </td> <td class="col2-desc"> Açıklama6 </td> </tr> </table> </div><style> .outer-box{ border : 2px solid; border-style : groove; width : %100; height : auto;}.col1-head,.col2-head{ font-weight : bold; color : blue;}.col1-desc::before,.col2-desc::before{ content : ":";}</style>';
console.log(bazes_t.getElementsByTagName("td")[1].innerText);
bazes_t.getElementsByTagName("td")[1].innerText = a;
bazes_t.getElementsByTagName("td")[3].innerText = b;
bazes_t.getElementsByTagName("td")[5].innerText = c;
bazes_t.getElementsByTagName("td")[7].innerText = d;
bazes_t.getElementsByTagName("td")[9].innerText = e;
bazes_t.getElementsByTagName("td")[11].innerText =f;<div data-id="6f6ba5e" class="elementor-element elementor-element-6f6ba5e elementor-widget elementor-widget-product-description" id="prd-desc" data-element_type="product-description.default">
<div class="elementor-widget-container">
<p>Lacivert</p>
<p>Bisiklet Yaka Lacivert Tişört</p>
<p>M Beden</p>
<p>1458</p>
<p>1458</p>
<p> </p>
<p>* %100 Pamuklu * 30/1 Süprem Kumaş * İstenilen renk ve bedenlerde dikim yapılır * Yandan Dikişli * 145 gr.</p>
</div>
</div>So this code looks great on codepen or here. I implement this code on my OceanWP wordpress website by Elementor to "Single Product Page of Woocommerce" I can re-design this page with a plugin. ( It allows me to add an elementor custom HTML to this page and i implement this code there within 'script /script' tags)
Every product has unique specs so that this JS must be take data for each product page and display it as table like the code above.
Many thanks in advance,
C.
Not sure what you want to do with this code, just change your javascript code (just need to add window.onload and it should work.
window.onload = function(){
var a,b,c,d,e,f;
var bazes = document.getElementById("prd-desc").getElementsByTagName("div")[0].getElementsByTagName("p");
var bazes_t = document.getElementById("prd-desc").getElementsByTagName("div")[0];
a = bazes[0].innerText;
b = bazes[1].innerText;
c = bazes[2].innerText;
d = bazes[3].innerText;
e = bazes[4].innerText;
f = bazes[6].innerText;
//console.log(c);
bazes_t.innerHTML = '<div class ="outer-box"> <table id="urun_inf"> <tr> <td class="col1-head"> Kod </td> <td class="col2-desc">a</td> </tr> <tr> <td class="col1-head"> Ebat </td> <td class="col2-desc"> Açıklama2 </td> </tr> <tr> <td class="col1-head"> Reklam Alanı</td> <td class="col2-desc"> Açıklama3 </td> </tr> <tr> <td class="col1-head"> Renk </td> <td class="col2-desc"> Açıklama4 </td> </tr> <tr> <td class="col1-head"> Merkez Stok </td> <td class="col2-desc"> Açıklama5 </td> </tr> <tr> <td class="col1-head"> Toplam Stok </td> <td class="col2-desc"> Açıklama6 </td> </tr> </table> </div><style> .outer-box{ border : 2px solid; border-style : groove; width : %100; height : auto;}.col1-head,.col2-head{ font-weight : bold; color : blue;}.col1-desc::before,.col2-desc::before{ content : ":";}</style>';
console.log(bazes_t.getElementsByTagName("td")[1].innerText);
bazes_t.getElementsByTagName("td")[1].innerText = a;
bazes_t.getElementsByTagName("td")[3].innerText = b;
bazes_t.getElementsByTagName("td")[5].innerText = c;
bazes_t.getElementsByTagName("td")[7].innerText = d;
bazes_t.getElementsByTagName("td")[9].innerText = e;
bazes_t.getElementsByTagName("td")[11].innerText =f;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments