I am trying to achieve the following:
If my shopping cart is empty, I want another div to display over the top of it. Instead of seeing the cart, users should see a message saying 'your cart is empty'.
Currently, I have set the other div to display:none in my CSS, but it seems to always be displayed! I am attempting to use JavaScript to hide or show it. The cart I am using is simplecart.js.
Here is my CSS for the cart and the cart-empty div:
.cart{
margin: 30px 0 0 0;
background:red;
position:relative;
}
#if-cart-empty{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
display: none;
background:w
This is the HTML:
<div class="cart">',
<div class="simpleCart_items"></div>',
<span class="simpleCart_quantity"></span> items - <span class="simpleCart_total"></span>',
<div class="checkout">',
<a href="javascript:;" class="simpleCart_checkout">Checkout</a>',
</div>',
<a href="javascript:;" class="simpleCart_empty">Empty Basket</a>',
<div id="if-cart-empty" style="display: none">Your cart is empty.</div>',
</div>And this is the JavaScript:
checkCart();
$('.itemremove').click(function(){
$('.itemContainer').remove();
checkCart();
});
function checkCart(){
var item = $('.itemRow');
if (item.length > 0) {
$('#if-cart-empty').hide();
} else {
$('#if-cart-empty').show();
}
}
Can someone help me get this to work? Thanks!