How to hide product item if the price is 0

byMR

July 28, 2022

Some of my products have 0 price. Until I fix this issue I want to hide those products from
collection pages.

So,

How can I hide the .productItem or .ItemOrj if the .productPrice span is == ₺0,00 , else show

Look code below:

    <div id="ProductPageProductList" class="ProductList sort_4">
    <div class="ItemOrj col-4">
       <div class="productItem" style="display: block;">
          <div class="productImage">
             <img class="resimOrginal lazyImage" src="/Uploads/" alt="">
          </div>
          <div class="productDetail videoAutoPlay" data-id="5637" data-variant-id="11091">
             <div class="productName detailUrl" data-id="5637"><a title="" href="/"></div>
             <div class="productPrice ">
                <div class="discountPrice">
                   <span>
                   ₺1.950,00
                   </span>
                </div>
             </div>
          </div>
       </div>
    </div>
    <div class="ItemOrj col-4">
       <div class="productItem" style="display: block;">
          <div class="productImage">
             <img class="resimOrginal lazyImage" src="/Uploads/" alt="">
          </div>
          <div class="productDetail videoAutoPlay" data-id="5637" data-variant-id="11091">
             <div class="productName detailUrl" data-id="5637"><a title="" href="/"></div>
             <div class="productPrice ">
                <div class="discountPrice">
                   <span>
                   ₺1.250,00
                   </span>
                </div>
             </div>
          </div>
       </div>
    </div>
    <div class="ItemOrj col-4">
       <div class="productItem" style="display: block;">
          <div class="productImage">
             <img class="resimOrginal lazyImage" src="/Uploads/" alt="">
          </div>
          <div class="productDetail videoAutoPlay" data-id="5637" data-variant-id="11091">
             <div class="productName detailUrl" data-id="5637"><a title="" href="/"></div>
             <div class="productPrice ">
                <div class="discountPrice">
                   <span>
                    ₺0,00
                   </span>
                </div>
             </div>
          </div>
       </div>
    </div>
 </div>

I have also tried but not worked:

    var amount = parseFloat($('.productPrice span').html().replace(",", "."));
    if(amount === 0){
        $('.productItem').css("display", "none");
    }else{
        $('.productItem').css("display", "block");            
    }

>Solution :

I stripped out the additional HTML for my answer since it doesn’t affect my answer.

But I loop through each item, and get the text value of the productPrice div and strip out all numeric values then parse it to a Float. Then if its under 0, I hide the parent productItem.

$(document).ready(function(){
 $(".productItem").each(function(){
  let price = parseFloat($(this).find(".productPrice").text().replace(/[^0-9]/g,""));
  if(price == 0){
   $(this).hide();
  }
 });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="productItem">
  <div class="productPrice ">
    <div class="discountPrice">
      <span>
                   ₺1.250,00
                   </span>
    </div>
  </div>
</div>

<div class="productItem">
  <div class="productPrice ">
    <div class="discountPrice">
      <span>
                   ₺0
                   </span>
    </div>
  </div>
</div>