Js не работает, как ожидалось, на моем сайте, даже он работает на codepen - PullRequest
Новая
       9

Js не работает, как ожидалось, на моем сайте, даже он работает на codepen

0 голосов
/ 10 сентября 2018

Я попытался разработать алгоритм js, который переопределяет существующий HTML-код на странице сведений о моем продукте. Это требуется после интеграции XML с моим веб-сайтом. Я хочу визуализировать эти спецификации в виде таблицы, но после интеграции XML он позволяет сохранять на моем веб-сайте только теги абзаца HTML.

Итак,

Вот мой код, который отлично работает на codepen, но не на моем WordPress-сайте.

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>&nbsp;</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>

Так что этот код отлично смотрится на codepen или здесь. Я внедряю этот код на своем WordPress-сайте OceanWP от Elementor для «Единой страницы продукта Woocommerce». Я могу изменить дизайн этой страницы с помощью плагина. (Это позволяет мне добавлять элемент или пользовательский HTML на эту страницу, и я реализую этот код там в тегах 'script / script')

Каждый продукт имеет уникальные характеристики, поэтому этот JS должен брать данные для каждой страницы продукта и отображать их в виде таблицы, как показано выше.

Заранее большое спасибо,

С

1 Ответ

0 голосов
/ 10 сентября 2018

Не уверен, что вы хотите сделать с этим кодом, просто измените ваш код JavaScript (просто нужно добавить window.onload, и он должен работать. 

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;
}
...