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