how to count review per product and show in product listing in big commerce?

Question

Please find attached image which is gives you idea i want to count review per product

Please find attache code

<li class="%%GLOBAL_AlternateClass%%">
<div class="inner">
<div class="ProductImage QuickView" data-product="%%GLOBAL_ProductId%%">
%%GLOBAL_ProductThumb%%
</div>
<div class="ProductDetails">
<a href="%%GLOBAL_ProductLink%%" class="%%GLOBAL_SearchTrackClass%% pname">%%GLOBAL_ProductName%%</a>
</div>
<em class="p-price">%%GLOBAL_ProductPrice%%</em>
<div class="ProductPriceRating">
<span class="Rating Rating%%GLOBAL_ProductRating%%">
<img src="%%GLOBAL_IMG_PATH%%/IcoRating%%GLOBAL_ProductRating%%.png" alt="" style="%%GLOBAL_HideProductRating%%"/>
</span>
</div>
<div>
<div class="ProductCompareButton" style="display:%%GLOBAL_HideCompareItems%%">
<input type="checkbox" class="CheckBox" name="compare_product_ids" id="compare_%%GLOBAL_ProductId%%" value="%%GLOBAL_ProductId%%" onclick="product_comparison_box_changed(this.checked)"/> <label for="compare_%%GLOBAL_ProductId%%">%%LNG_Compare%%</label> <br>
</div>
<div class="ProductActionAdd" style="display:%%GLOBAL_HideActionAdd%%;">
<a href="%%GLOBAL_ProductURL%%" class="btn icon-%%GLOBAL_ProductAddText%%" title="%%GLOBAL_ProductAddText%%">%%GLOBAL_ProductAddText%%</a>
</div>
</div>
</li>

Answer 1

$(document).ready(function(){
    $('.ProductList').each(function(){
        $(this).find('li').each(function(){
            var current = $(this);
            var mainURL = window.location.href;
            var productUrl = current.find('div div a').attr('href');
            if(mainURL.indexOf('https')!==-1){
                productUrl = current.find('div div a').attr('href').replace('http','https');
            }
            $.ajax({
                url: productUrl,
                type: "POST",
                dataType: "html",
                success: function (data) {
                    var ht = $(data);               
                    var review = ht.find('#productTotalReview').text();
                    current.find('div span').append("<br>&nbsp"+review);//.replace('product reviews','Reviews'));
                }
            });
        });
    });
});

Answer 2

This jQuery snippet can be inserted on the category page to asynchronously access each product, and determine the number of reviews on the page.

// For each product on the category page...
$('.ProductDetails').each(function(index) {
  var $self = $(this); // Make local reference to 'this'.
  // Parse the URL from the individual product, and retrieve its Reviews Count:
  getProductPageReviewCount($self.find('>:first-child').attr('href')).then(function(count) {
    // Insert the number of reviews below the Product Name:
    $self.find('>:first-child').after("<a>" +count +" Reviews</a>");
  }).catch(function(err) {
    // Catch any Ajax Errors:
    console.log('Error - ', err);
  });
});

  /**
   * Determines the total number of reviews for a particular
   * external product page, according to its URL. 
   * @param url <string>   - The product page's URL. 
   * @return Promise\<int> - The number of reviews on the page, or error on failed request.
   */
  function getProductPageReviewCount(url) {
    return new Promise(function(fulfill, reject) {
        $.ajax({
          method: 'GET',
          url: url,
          success: function(res) {
            fulfill($(res).find('.ProductReviewList > li').length);
          },
          error: function(err) {
            reject(err);
          }
        });
    });
  }