Calculate percentage discount of multiple products on a product listing page

Question

Hi i'm trying to work out the percentage discount of products that are on sale on a product listing page which have a was and now price.

I've got the code working to get the percentage discount, but i can't seem to get it to work dynamically for each product. As at the moment it'll run the calculation then print the same percentage discount per product, and even for products that are full price.

Any help on this would be appreciated. Thanks!

setTimeout(function discountPrice() {
  $('.product-slab__price').each(function() {
    var pattern = /[^0-9\.]/g;
    var wasPrice = parseFloat($(".product-price__primary .product-price__was").text().replace(pattern, "")) / 100;
    var newPrice = parseFloat($(".product-price__primary .product-price__value--discounted").text().replace(pattern, "") / 100);
    var subtractPrice = (Math.abs(wasPrice - newPrice));
    var dividePrice = (Math.abs(subtractPrice / wasPrice));
    var multiplyPrice = (Math.abs(dividePrice * 100));
    $('.discountPercentage').html(multiplyPrice.toFixed(0) + "%");
  });
}, 500);

.product-price__was {
  text-decoration: line-through;
}

.product-price__value.product-price__value--discounted {
  color: red;
}

user_519413 · Answer

The issue is because you're selecting all the elements in the DOM with those classes as you iterate through the loop.

Instead, you need to target the elements with those classes relevant to the current .product-slab__price in the iteration. To do that use the this keyword and the find() method:

setTimeout(function discountPrice() {
  var pattern = /[^0-9\.]/g;

  $('.product-slab__price:has(.product-price__value--discounted)').each(function() {
    let $slab = $(this);
    var wasPrice = parseFloat($slab.find(".product-price__primary .product-price__was").text().replace(pattern, "")) / 100;
    var newPrice = parseFloat($slab.find(".product-price__primary .product-price__value--discounted").text().replace(pattern, "") / 100);

    var subtractPrice = Math.abs(wasPrice - newPrice);
    var dividePrice = Math.abs(subtractPrice / wasPrice);
    var multiplyPrice = Math.abs(dividePrice * 100);
    
    $slab.find('.discountPercentage').html(multiplyPrice.toFixed(0) + "%");
  });
}, 500);

.product-price__was {
  text-decoration: line-through;
}

.product-price__value.product-price__value--discounted {
  color: red;
}

Note that as the regex content is static it can be defined outside the loop.

user_295783 · Answer

You need to

use ,this to stay in the scope of the current slab
test multiplyPrice is a number
move the regexp since you do not need to create it every time

No need to

go via .product-price__primary in the code you show
parseFloat since you do not add anywhere. A unary plus +wasPrice can be used if you DO need to add

const pattern = /[^0-9\.]/g,
  discountPrice = function() {
    $('.product-slab__price').each(function() {
      const wasPrice = $(".product-price__was", this).text().replace(pattern, "") / 100,
        newPrice = $(".product-price__value--discounted", this).text().replace(pattern, "") / 100,
        subtractPrice = Math.abs(wasPrice - newPrice),
        dividePrice = Math.abs(subtractPrice / wasPrice),
        multiplyPrice = Math.abs(dividePrice * 100);

      if (!isNaN(multiplyPrice)) $('.discountPercentage', this).html(multiplyPrice.toFixed(0) + "%");
    });
  };

setTimeout(discountPrice, 500);

.product-price__was {
  text-decoration: line-through;
}

.product-price__value.product-price__value--discounted {
  color: red;
}

Calculate percentage discount of multiple products on a product listing page

2 Answers