CODEWITHSUNDEEP
jqueryhtmlif-statementhidden
user2574745
user2574745

Reputation: 43

How to show div that is display:none if shopping cart is empty of items?

Following the logic of the code below: 

<div id="add-to-cart-widget">
<div class="simpleCart_items"><div class="cartHeaders">
<div class="itemthumb">thumb</div><div  class="itemTotal">Total</div><div class="itemremove">remove</div>  </div>
</div>
<div id="if-cart-empty" style="display: none">Your cart is empty.</div>

Items only appear in cart if .itemContainer is present. For each item added to cart, a new container is created and put inside #add-to-cart-widget.

Using jQuery, how do I check if #add-to-cart-widget is showing .itemContainer and if none present then show div #if-cart-empty?

------- EDIT ------- (works in jsFiddle but not on site)

This is the exact code that I put into the post on my site. I added an extra .click event on .itemremove so you can click the "remove" container and test it out: 

<div id="add-to-cart-widget">
<div class="simpleCart_items">
    <div class="cartHeaders">
            <div class="itemthumb">thumb</div>
            <div  class="itemTotal">Total</div>
            <div class="itemremove">remove</div>
        </div>
</div>
<div id="if-cart-empty" style="display:none;">Your cart is empty.</div>
    </div>    

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
if (!$('.itemContainer').is(":visible")) {
    $('#if-cart-empty').show();
} else {
    $('#if-cart-empty').hide();
}

$('.itemremove').click(function(){
 $('.itemContainer').hide();
});
    });
</script>

<style type='text/css'>
  .itemContainer {background:red;}
</style>

FORGOT to put a link to the test site:

http://sitetestexample.blogspot.com/p/cart-empty-test.html

This is what the #add-to-cart-widget looks like when an item is added to the shopping cart (the first code above is what it looks like without any items in the cart) :

<div id="add-to-cart-widget">
<div class="simpleCart_items">
<div class="cartHeaders">
<div class="itemthumb">thumb</div>
<div class="itemTotal">Total</div>
<div class="itemremove">remove</div></div>
    <div class="itemContainer"><div class="itemthumb">
       <img border="0" src="http://3.bp.blogspot.com/-CB2o1hPryRo/Ub54iT3ggVI/AAAAAAAAFJY/W6iBiOFaggo/s1600/picture+001.jpg">
</div>
<div class="itemTotal">$80,000.00</div>
<div class="itemremove"><a href="javascript:;" onclick="simpleCart.items['c3'].remove();">x</a> 
</div></div></div>
<div id="if-cart-empty" style="display:none;">Your cart is empty.</div>
</div>

Upvotes: 4

Views: 7483

Answers (2)

yeyene
yeyene

Reputation: 7380

UPDATE ANSWER

DEMO http://jsfiddle.net/yeyene/BAs2m/8/

After you remove the item, you need to check again the itemContainer is still there or not.

Since you are deleting item, I suggest to use .remove() instead of .hide()

checkCart();

$('.itemremove').click(function(){    
    $('.itemContainer').remove();  
    checkCart();
});

function checkCart(){
    var item = $('.itemContainer');
    if (item.length > 0) {
        $('#if-cart-empty').hide();
    } else {
        $('#if-cart-empty').show();
    }
}

Upvotes: 3

pirs
pirs

Reputation: 2463

something like this would work :

function check_cart(){
   n = $('.itemContainer .itemthumb').length;
   if(n>0){ 
       $('.itemContainer').css('display','block');
       $('#if-cart-empty').css('display','none');
   }else{
       $('.itemContainer').css('display','none');
       $('#if-cart-empty').css('display','block');
   }
}

$(document).ready(function(){
    $('.itemremove, .itemadd').click(function(){
       check_cart();
    });
});

Upvotes: 3

Related Questions