Hey all,
I have just spent quite a while implementing a sliding panel to house a shopping cart. The issue I am having is that everything seems to work very well when I have an item in the cart but as soon as the cart is empty my Basket button is shifting so that it’s no longer below the panel that slides open.
I have tried really hard to get this to work but just can’t seem to fix it. I was wondering whether anyone might be able to solve this mystery?
My site is: http://thisiscurated.myshopify.com
The actual code for the relevant site part is as follows:
<div class="topbar">
<div class="topbar-anchor">
<div class="topbar-basket">
<div id="mini-basket" style="display:none;">
<script type="text/javascript">
function remove_item(id) {
document.getElementById('updates_'+id).value = 0;
document.getElementById('cartform').submit();
}
</script>
<div id="cart" class="cart clearfix">
{% if cart.item_count == 0 %}
<div class="c" style="padding:100px 0;">
<h2 class="title" style="text-align:center;">Your Basket is Empty</h2>
</div>
{% else %}
<div class="more-info clearfix">
<div class="basket-inner">
<form action="/cart" method="post" id="cartform">
<table>
<tbody>
{% for item in cart.items %}
<tr class="top-row">
<td class="c">Qty</td>
<td class="c">Description</td>
<td class="c">Price</td>
<td class="c"></td>
</tr>
<tr>
<td class="c">
<input type="text" size="4" name="updates[{{item.variant.id}}]" id="updates_{{item.variant.id}}" value="{{ item.quantity }}" onfocus="this.select();" class="item-quantity" />
</td>
<td><a href="{{item.product.url }}">{{ item.title }}</a></td>
<td class="c">{{ item.line_price | money }}</td>
<td class="c"><a href="#" class="cart" onClick="remove_item({{item.variant.id}}); return false;">X</a></td>
</tr>
<tr class="summary-mini">
<td class="c">Summary</td>
<td class="c"></td>
<td class="c"><strong>{{ cart.total_price | money }}</strong></td>
<td class="c"></td>
</tr>
<tr>
<td class="c"></td>
<td class="minicart-proceed"><a href="/cart">Proceed to Checkout</a></td>
<td class="c"></td>
<td class="c"></td>
</tr>
{% endfor %}
</tbody>
</table>
</form>
</div> <!-- /Basket Inner -->
{% endif %}
</div><!-- /Moreinfo Clearfix -->
</div> <!-- /#cart -->
</div> <!-- Mini-Basket -->
<a id="basket-button">
<div class="basket-top">Basket</div>
<div class="basket-bottom">
-
<span class="cart-total-items">
<span class="count">{{ cart.item_count }}</span>
</span>
-
</div>
</a>
</div> <!-- /.topbar-basket -->
</div> <!--/.topbar anchor -->
</div> <!-- /.topbar -->
And most of the relevant CSS is:
/* Mini Cart */
.topbar {width:100%; height:5px; background-color:#333;}
.topbar-anchor {z-index:1999999; width:1100px; margin:0 auto; height:5px; background-color:#333; position:relative; top:-5px}
#mini-basket {background-color: #333; color:#fff width: 500px; text-align:center; border-radius:0 0 10px 10px;}
.topbar-basket {float: right; height: 5px; margin-top: 5px; width: 500px;}
.basket-summary{height:38px; float:right; width:40px; background-color:#333; padding: 0 10px 0 10px; border-radius:0 0 30px 30px;}
.basket-top{text-align:center; font-weight:bold; font-size:11px;}
.basket-bottom{text-align:center; position:relative; top:-12px; font-weight:bold; font-size:11px;}
#basket-button {cursor:pointer; height:35px; position:relative; right:30px; width:70px; float:right; background-color:#333; border-radius:0 0 30px 30px;}
.top-row {font-weight:bold;}
.summary-mini {padding:20px;}
.minicart-proceed{font-weight:bold;}
.cart .more-info{padding:0px; margin:0px;}
Any help people can offer really would be much appreciated!
Many thanks in advance!
Tom:)
