lundi 22 mars 2021

Using :has & :not selectors with additional rule

Hi i'm trying to use the :has :not selectors in my code, where if a product doesn't have a sale banner/the class ".promo-text" then print the message "ADD MESSAGE" and if it does then ignore it - where i've got working.

But what i want to do is, if a product is out of stock then i don't want the message to print but not sure what's the best way to go about this. Any help on this would be really appreciated.

$(".product-slab__markdown-promotion:not(:has(.product-slab__markdown-promotion-inner))").each(function() {
  $(this).append("<span class='product-slab__markdown-promotion-inner'><span class='promo-text'>ADD MESSAGE</span></span>");
});
$(".product-slab__stock:has(.btn__disabled)").each(function() {
  $("this").css("display", "none");
});
.product-slab__wrapper {
  display: inline-block;
}
<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% Korting</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="">Niet op voorraad</p></div>
  <p>€0,00</p>
</div>

Aucun commentaire:

Enregistrer un commentaire