CODEWITHSUNDEEP
javascript
chappers
chappers

Reputation: 466

Javascript if else to extract regular or sale price

Ive got this html:

<p class="price product-page-price ">
  <span class="woocommerce-Price-amount amount">
    <span class="woocommerce-Price-currencySymbol">£</span>
    24.99
  </span>
</p>

And im successfully extracting the price of 24.99 using the following javascript:

function() {
  var element = document.querySelector('.product-page-price .woocommerce-
Price-amount');
  var price = element.innerHTML.match(/\d*\.\d*/)[0];
  return price;
}

However, some of my products have a sale price and the html is as follows:

<p class="price product-page-price price-on-sale">
  <del>
    <span class="woocommerce-Price-amount amount">
      <span class="woocommerce-Price-currencySymbol">£</span>
      24.99
    </span>
  </del>
  <ins>
    <span class="woocommerce-Price-amount amount">
      <span class="woocommerce-Price-currencySymbol">£</span>
      12.99
    </span> 
  </ins>
</p>

In the case above, what javascript would extract the price of 12.99 rather than 24.99?

Upvotes: 2

Views: 758

Answers (2)

gavgrif
gavgrif

Reputation: 15499

Inspired by @sjahan - I have modified the code to pass through all the items (you may have many items on the page hence the document.querySelectorAll - and some of which have the discounted price. and for each - check if it has the discounted class and then if so -using the ins as the selector - you can get the text content of that node - note that I am replacing the pound symbol in each case. I also threw in some additions of the values so you can use the values in a more functional way.

var elementList = document.querySelectorAll('.product-page-price');

var totalUndiscountedValue = 0;
var totalDiscountedValue = 0;
  
  for(i = 0; i < elementList.length; i++){
    var classes = elementList[i].className;
    if(classes.indexOf('price-on-sale') !=-1)      
      {
        getDiscountedPrice(elementList[i])
      } else {
        getPrice(elementList[i])
      }; 
     
  }

getTotalValues();
 
 function getDiscountedPrice(element){ 
  var itemPrice  = parseFloat(element.getElementsByTagName('ins')[0].innerText.replace(/£/,''));
  totalDiscountedValue += itemPrice;
  console.log(itemPrice);
  }


 function getPrice(element){ 
  var itemPrice  = parseFloat(element.innerText.replace(/£/,''));
  console.log(itemPrice);
  totalUndiscountedValue += itemPrice;
  }
  
  

  function getTotalValues(){ 
   console.log("Total Undiscounted sales: £"+  totalUndiscountedValue);
       console.log("Total Discounted sales: £"+ totalDiscountedValue);
          console.log("Total sales: £"+ parseFloat(totalDiscountedValue + totalUndiscountedValue).toFixed(2));
 }
<p class="price product-page-price "><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>24.99</span></p>
    
    
    
    <p class="price product-page-price price-on-sale"><del><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>24.99</span></del><ins><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>12.99</span></ins></p>
    
              
        
    <p class="price product-page-price price-on-sale"><del><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>24.99</span></del><ins><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>12.99</span></ins></p>
    
    <p class="price product-page-price "><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>24.99</span></p>

Upvotes: 0

sjahan
sjahan

Reputation: 5940

Based on you code, try this: 

function() {
   var element = document.querySelector('.product-page-price.price-on-sale > ins > .woocommerce-Price-amount');
   if(!element) {
      element = document.querySelector('.product-page-price .woocommerce-Price-amount');
}
   var price = element.innerHTML.match(/\d*\.\d*/)[0];
   return price;
}

It checks if there is a price-on-sale first. If not, it picks the price the way you were.

Upvotes: 1

Related Questions