Wyświetlanie tych samych właściwości kilka razy

Cześć wszystkim, być może jest ktoś kto mógłby mi co nieco podpowiedzieć. Nie ogarniam za bardzo JS, administruje sklep na platformie Shoper i mam problem z powielaniem się atrybutów. Są one przesyłane z programu ERP, poprzez połączenie go z API Shopera, natomiast do szablonu wstawia je poniższy kod JS:

$(document).ready(function(){
                  
  if($('.shop_product').length > 0){
  
  	var state = '';
  	$('.product-attributes tbody tr').each(function(index, item){
      if($(item).find('.name').text() == "Stan produktu:"){
        state = $(item).find('.value').text();
      }
    });

  	if(state == ''){
      if($('#box_description #NOWY').length > 0){
        $('.product-attributes tbody').append('<tr class="r--l-flex r--l-flex-wrap"><td class="name r--l-box-5 r--l-md-box-10 r--l-xs-box-10 mx">Stan produktu:</td><td class="value r--l-box-5 r--l-md-box-10 r--l-xs-box-10" style="border-bottom: 1px solid #f0f0f0;">Nowy</td></tr>');
        $('.product-attributes tbody').append('<tr class="r--l-flex r--l-flex-wrap"><td class="name r--l-box-5 r--l-md-box-10 r--l-xs-box-10 mx">Gwarancja:</td><td class="value r--l-box-5 r--l-md-box-10 r--l-xs-box-10" style="border-bottom: 1px solid #f0f0f0;">2 lata</td></tr>');
        $('.product-attributes tbody').append('<tr class="r--l-flex r--l-flex-wrap"><td class="name r--l-box-5 r--l-md-box-10 r--l-xs-box-10 mx">Dokument sprzedaży:</td><td class="value r--l-box-5 r--l-md-box-10 r--l-xs-box-10" style="border-bottom: 1px solid #f0f0f0;">Paragon lub faktura VAT</td></tr><meta itemprop="itemCondition" content="https://schema.org/NewCondition" />');
      }
      if($('#box_description #UŻYWANY').length > 0){
        $('.product-attributes tbody').append('<tr class="r--l-flex r--l-flex-wrap"><td class="name r--l-box-5 r--l-md-box-10 r--l-xs-box-10 mx">Stan produktu:</td><td class="value r--l-box-5 r--l-md-box-10 r--l-xs-box-10" style="border-bottom: 1px solid #f0f0f0;">Używany</td></tr>');
        $('.product-attributes tbody').append('<tr class="r--l-flex r--l-flex-wrap"><td class="name r--l-box-5 r--l-md-box-10 r--l-xs-box-10 mx">Gwarancja:</td><td class="value r--l-box-5 r--l-md-box-10 r--l-xs-box-10" style="border-bottom: 1px solid #f0f0f0;">30 dni</td></tr>');
        $('.product-attributes tbody').append('<tr class="r--l-flex r--l-flex-wrap"><td class="name r--l-box-5 r--l-md-box-10 r--l-xs-box-10 mx">Dokument sprzedaży:</td><td class="value r--l-box-5 r--l-md-box-10 r--l-xs-box-10" style="border-bottom: 1px solid #f0f0f0;">Paragon lub faktura VAT marża</td></tr><meta itemprop="itemCondition" content="https://schema.org/UsedCondition" />');
      }
    }
  }
});

Nie wiem dlaczego i co poprawić, żeby w momencie uzupełnienia dodatkowego atrybutu, funkcja JS nie dublowała powyższych - nr magazynowy wstawia się zawsze i kiedy nie są uzupełnione np. numery częsci lub numery oryginału to atrybuty "Stan produktu, Gwarancja oraz Dokument Sprzedaży" funkcja wstawia poprawnie tylko jeden raz

ale wystarczy że uzupełniony jest jakikolwiek dodatkowy atrybut, funkcja dubluje powyższe atrybuty
.
Jakieś pomysy? :) Będę wdzięczny za każdą wskazówkę. Jeśli potrzeba więcej informacji, piszcie.

Wydaje mi się, że masz błąd w tym miejscu

kubaB napisał(a):

var state = '';

$('.product-attributes tbody tr').each(function(index, item){
	if($(item).find('.name').text() == "Stan produktu:"){
		state = $(item).find('.value').text();
	}
});

podczas ustawiania flagi, czy produkt posiada jakieś dane

Na 100% można zrobić to lepiej, ale spróbowałbym w taki sposób. Jak otworzysz sobie devtoolsy to będziesz mógł porównać, czy skrypt pobiera odpowiednie rzeczy.

let addNewRows = true;

$('.product-attributes tbody tr').each(function() {
  console.log($(this));
  console.log($(this).find('.name'));
  console.log($(this).find('.name').text());
  console.log($(this).find('.name').text().trim());

  if($(this).find('.name').text().trim() == "Stan produktu:"){
    addNewRows = false;
  }
});

if (addNewRows) {
  if ($('#box_description #NOWY').length > 0) {
    // ...
  } else if ($('#box_description #UŻYWANY').length > 0) {
    // ...
  }
}

Xarviel napisał(a):

Wydaje mi się, że masz błąd w tym miejscu

kubaB napisał(a):

var state = '';

$('.product-attributes tbody tr').each(function(index, item){
	if($(item).find('.name').text() == "Stan produktu:"){
		state = $(item).find('.value').text();
	}
});

podczas ustawiania flagi, czy produkt posiada jakieś dane

Na 100% można zrobić to lepiej, ale spróbowałbym w taki sposób. Jak otworzysz sobie devtoolsy to będziesz mógł porównać, czy skrypt pobiera odpowiednie rzeczy.

let addNewRows = true;

$('.product-attributes tbody tr').each(function() {
  console.log($(this));
  console.log($(this).find('.name'));
  console.log($(this).find('.name').text());
  console.log($(this).find('.name').text().trim());

  if($(this).find('.name').text().trim() == "Stan produktu:"){
    addNewRows = false;
  }
});

if (addNewRows) {
  if ($('#box_description #NOWY').length > 0) {
    // ...
  } else if ($('#box_description #UŻYWANY').length > 0) {
    // ...
  }
}

Spróbowałem tego kodu na kopii szablonu, niestety po jego implementacji stan produktu, gwarancja oraz dokument sprzedaży nie wyświetlają się w ogóle. Dodatkowo zauważyłem, że jak z kodu $('.product-attributes tbody tr').each(function(index, item) usunę index, czyli zostanie $('.product-attributes tbody tr').each(function(item), nic to nie zmienia - nadal wyświetlają się zdublowane, natomiast jeśli zostawie tylko z parametrem index lub w ogóle bez parametrów, wtedy atrybuty stan produktu, gwarancja oraz dokument sprzedaży nie wstawiają się w ogóle. Ciężko mi coś podziałać bo nie znam Javascriptu :(

Jakby zadziałało za pierwszym razem to sam bym się zdziwił :D Bardziej to był przykład w czym może być problem, niż gotowiec do wklejenia bez żadnej analizy.

Włącz sobie po

1. dokumentacje jQuery (https://api.jquery.com/each/#each-function) dopasowaną do wersji z której korzystasz
2. devtoolsy (przycisk F12) i przeczytaj jakiś krótki poradnik jak ona działa

W następnym kroku bierzesz swój aktualny kod i wstawiasz prosty console.log, żeby sprawdzić jaki element ze strony zostaje pobrany (można też breakpointem, ale tutaj to pomińmy)

let addNewColumns = true;

$('.product-attributes tbody tr').each(function(index, item) {
  console.log($(item));
  console.log($(item).find('.name'));
  console.log($(item).find('.name').text());
  console.log($(item).find('.name').text().trim());

  if($(item).find('.name').text().trim() == "Stan produktu:"){
    addNewColumns = false;
  }
});

console.log(addNewColumns);

if (addNewRows) {
  console.log('#box_description #NOWY', $('#box_description #NOWY').length);
  console.log('#box_description #UŻYWANY', $('#box_description #UŻYWANY').length);

  if ($('#box_description #NOWY').length > 0) {
    // ...
  } else if ($('#box_description #UŻYWANY').length > 0) {
    // ...
  }
}

Bardzo dziękuję za wsparcie. Niestety jeśli chodzi o devtoolsa to potrafię się nim posługiwać jedynie jeśli chodzi o HTML oraz CSS, javascript mnie przerasta, dlatego napisałem na forum - może ma ktoś jeszcze jakiś pomysł skąd to dublowanie? :)

Kolejne odkrycie, kod "działa" (dalej dublując przy wypełnionym dodatkowym atrybucie) nawet w tej postaci:
$(document).ready(function(){

  if($('#NOWY').length){
    $('.product-attributes tbody').append('<tr class="r--l-flex r--l-flex-wrap"><td class="name r--l-box-5 r--l-md-box-10 r--l-xs-box-10 mx">Stan produktu:</td><td class="value r--l-box-5 r--l-md-box-10 r--l-xs-box-10" style="border-bottom: 1px solid #f0f0f0;">Nowy</td></tr>');
    $('.product-attributes tbody').append('<tr class="r--l-flex r--l-flex-wrap"><td class="name r--l-box-5 r--l-md-box-10 r--l-xs-box-10 mx">Gwarancja:</td><td class="value r--l-box-5 r--l-md-box-10 r--l-xs-box-10" style="border-bottom: 1px solid #f0f0f0;">2 lata</td></tr>');
    $('.product-attributes tbody').append('<tr class="r--l-flex r--l-flex-wrap"><td class="name r--l-box-5 r--l-md-box-10 r--l-xs-box-10 mx">Dokument sprzedaży:</td><td class="value r--l-box-5 r--l-md-box-10 r--l-xs-box-10" style="border-bottom: 1px solid #f0f0f0;">Paragon lub faktura VAT</td></tr>');
  }
  if($('#UŻYWANY').length){
    $('.product-attributes tbody').append('<tr class="r--l-flex r--l-flex-wrap"><td class="name r--l-box-5 r--l-md-box-10 r--l-xs-box-10 mx">Stan produktu:</td><td class="value r--l-box-5 r--l-md-box-10 r--l-xs-box-10" style="border-bottom: 1px solid #f0f0f0;">Używany</td></tr>');
    $('.product-attributes tbody').append('<tr class="r--l-flex r--l-flex-wrap"><td class="name r--l-box-5 r--l-md-box-10 r--l-xs-box-10 mx">Gwarancja:</td><td class="value r--l-box-5 r--l-md-box-10 r--l-xs-box-10" style="border-bottom: 1px solid #f0f0f0;">30 dni</td></tr>');
    $('.product-attributes tbody').append('<tr class="r--l-flex r--l-flex-wrap"><td class="name r--l-box-5 r--l-md-box-10 r--l-xs-box-10 mx">Dokument sprzedaży:</td><td class="value r--l-box-5 r--l-md-box-10 r--l-xs-box-10" style="border-bottom: 1px solid #f0f0f0;">Paragon lub faktura VAT marża</td></tr>');
  }

});,

czyli wygląda na to że to ustawienie flagi nic nie wnosi. Pogubiłem się totalnie :(

Niestety nie potrafię korzystać z devtool, jeśli chodzi o Javascript - wątek można zamknąć jako nierozwiązany. Wygląda na to że nie jest to taka prosta sprawa z tą funkcją.