Replace value from JS if found inside div based on if/else condition

Follow

Syed raza Ali

• November 15, 2021 11:39
• Edited

Tried below, but does not work in HTML tab.

 

<div class="dy-recommendations__slider-wrapper">
${#Recommendations}
<div class="price-box">
<p class="dynamic-price">${product_price_dynamic},-</p>
<p class="regular-price">${price}</p>
</div>
${/Recommendations}
</div>

${/#Recommendations}
</div>

 

var itemPrices = document.querySelectorAll('.dy-recommendations__slider-wrapper .price-box');
for(var i=0; i<itemPrices.length; i++){

var discount_price = itemPrices[i].getElementsByClassName("dynamic-price")[0];
var price = itemPrices[i].getElementsByClassName("regular-price")[0];

if(parseInt(discount_price.innerHTML)){
price.style.textDecoration = "line-through";
} else {
discount_price.style.display = "none";
}
}

1

• 

  Alexander Mikhaylov

  • November 15, 2021 10:54

  Hi,

  there is an issue in your JS code.

  You are assigning a value to a variable, but not replacing innerHTML value.

  If I understood your idea correctly, then you should have something like this:

  var itemPrices = document.querySelectorAll('.slider-wrapper .pricebox');
  for(var i=0; i<itemPrices.length; i++){
  
    var discount_price_element = itemPrices[i].getElementsByClassName("dynamic-price")[0];
    var price_element = getElementsByClassName("rec_price_num")[0];
  
    if(discount_price_element){
      discount_price_element.innerHTML = 'some new html';
      price_element.innerHTML = 'some new html';
    } else {
      price_element.innerHTML = 'some new html';
    }
  }
  
  

  1

  Comment actions Permalink
• 

  Syed raza Ali

  • November 18, 2021 22:02
  • Edited

  Hi Alexander Mikhaylov thanks for your response,
  
  This code works very well

  <div class="slider-wrapper">
  <div class="price-box">
  <p class="dynamic-price">${discountvalue}</p>
  <p class="regular-price">${regularvalue}<p>
  </div>
  </div>

   

  var itemPrices = document.querySelectorAll('.slider-wrapper .price-box');
  for(var i=0; i<itemPrices.length; i++){
  
  var discount_price = itemPrices[i].getElementsByClassName("dynamic-price")[0].innerHTML;
  var price = itemPrices[i].getElementsByClassName("rec_price_num")[0].innerHTML;
  
  if(discount_price){
  var discount_price = itemPrices[i].getElementsByClassName("dynamic-price")[0].innerHTML;
  var dynamic_price = getElementsByClassName("special-price")[0].innerHTML;
  }
  else {
  var special_price = getElementsByClassName("regular-price")[0].innerHTML;
  }
  }

  1

  Comment actions Permalink
• 

  Alexander Mikhaylov

  • November 15, 2021 14:13

  Hi! :)

  unfortunately your code does nothing, since your element has class "price-box", not "pricebox".

  If you change the selector to the correct one - you will get an error:

  Uncaught ReferenceError: getElementsByClassName is not defined

   

  I still haven't figured out what you are trying to do.

  Values in DIVs are filled without javascript. If you want to format them - you need to change your code.

  1

  Comment actions Permalink
• 

  Syed raza Ali

  • November 18, 2021 22:03

  Code works fine just with different logic, above was posted as example Here is what i added to it to control special price property + price property from feed

  var itemPrices = document.querySelectorAll('.dy-recommendations__slider-wrapper .price-box');
  for(var i=0; i<itemPrices.length; i++){

  var discount_price_element = itemPrices[i].getElementsByClassName("dynamic-price")[0];
  var price_element = itemPrices[i].getElementsByClassName("regular-price")[0];
  
  if(parseFloat(discount_price_element.innerHTML) == parseFloat(price_element.innerHTML)){
  discount_price_element.style.display = "none";
  } else {
  price_element.style.textDecoration = "line-through";
  }
  }

  1

  Comment actions Permalink

Please sign in to leave a comment.