lundi 22 mars 2021

If this statement is true do this, but if this statement is true but this second statement is false then do this

Hi i'm trying to create a few different statements where firstly if a product doesn't have this class "product-slab__markdown-promotion-inner" (which is for a sale banner) then print this code to add a sale banner to the product. But if this product is out of stock then I don't want the sale banner to be added to this product.

I've got as far as printing the code if a sale banner doesn't exist but i'm not sure how i go about creating the latter. I did try doing something like this below using &&, but I've not had any luck. If anyone can help on this, it would be really appreciated. Thanks in advance!

$(".product-slab__wrapper").each(function(){
  if ( (!$(this).hasClass("product-slab__markdown-promotion-inner")) && (!$("product-slab__stock").hasClass("btn__disabled"))  ){
    $(this).css("display" , "none");
  }
});
.product-slab__wrapper {display: inline-block; border: 1px solid black;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-slab__wrapper">
  <div class="product-slab__markdown-promotion">
    <div class="product-slab__markdown-promotion-inner">
      <span class="promo-text">20% discount</span>
    </div>
  </div>
  <div class="product-slab__stock"></div>
  <p>€0,00</p>
</div>

<div class="product-slab__wrapper">
  <div class="product-slab__markdown-promotion">
  </div>
  <div class="product-slab__stock"></div>
  <p>€0,00</p>
</div>

<div class="product-slab__wrapper">
  <div class="product-slab__markdown-promotion"></div>
  <div class="product-slab__stock"><p class="btn btn__secondary btn__disabled product-slab__cta btn--full" disabled="">Out of stock</p></div>
  <p>€0,00</p>
</div>
$(".product-slab__markdown-promotion").each(function(index){
  if ($(this).children('.product-slab__markdown-promotion-inner').length === 0){
    $(this).append("<span class='product-slab__markdown-promotion-inner'><span class='promo-text'>SALE MESSAGE HERE</span></span>");
  }
})   
.product-slab__wrapper {
  display: inline-block;
  border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-slab__wrapper">
  <div class="product-slab__markdown-promotion">
    <div class="product-slab__markdown-promotion-inner">
      <span class="promo-text">OLD SALE MESSAGE</span>
    </div>
  </div>
  <div class="product-slab__stock"></div>
  <p>€0,00</p>
</div>

<div class="product-slab__wrapper">
  <div class="product-slab__markdown-promotion">
  </div>
  <div class="product-slab__stock"></div>
  <p>€0,00</p>
</div>

<div class="product-slab__wrapper">
  <div class="product-slab__markdown-promotion"></div>
  <div class="product-slab__stock"><p class="btn btn__secondary btn__disabled product-slab__cta btn--full" disabled="">Out of stock - DO NOT SHOW SALE MESSAGE</p></div>
  <p>€0,00</p>
</div>

Aucun commentaire:

Enregistrer un commentaire