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:
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;; 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:)
How do you actually add an item to the cart? It would be handy to be able to test this. At the moment, all I see is a cart button top center. Is it not meant to be there?
Did you have much of a hand in designing this theme, or is it supplied by Shopify?
Hi Ralph,
Thanks for your reply to the post and sorry the site isn't a little clearer. If you click on the main image on the homepage it will take you through to a product page where you can add a poster (the homepage image) to the cart. Once it is added to the cart, if you then reload any other page you will notice that the basket button moves to the right hand side of the page where it's supposed to sit. What I would like is for the basket button to permanently sit over to the right hand side of the page and slide down with the basket panel when it is clicked (as happens when a product is in the basket).
Sorry for not making it clearer with the images, any help you can offer would be much great
Many thanks,Tom
Sorry just forgot to reply to the second part of the thread.
The theme was originally from shopify and I have been editing it over the past week to get it to where it is now.
Thanks again!
Hm, for me (on Firefox), when I click on Add to basked, the basket number increases, but if I click on the button, the basket is still empty, and the button doesn't move.
Hi Ralph,
That happens for me as well, I need to workout how to get the cart inside to update automatically without reloading the page in the same way the item count works. If you add a product though and then click on another link then when the page refreshes completely the basket will move to right where it's supposed to sit.
Any help you can offer really would be much appreciated.
Cheers,Tom
I still can't seem to get this working despite my very best efforts this weekend. I am looking to the dorp down cart on but at the moment just can't get my basket button to sit on the far right and push down beneath the sliding panel when it is clicked.
My current CSS is this:
/* Mini Cart */
.topbar {width:1000px; height:5px; background-color:#333; margin:0 auto;}
.topbar-anchor {z-index:1999999; width:1000px; margin:0 auto; height:5px; background-color:#333; position:absolute;}
#mini-basket {background-color: #333; color:#fff width: 500px; text-align:center; border-radius:0 0 10px 10px;}
.topbar-basket {margin-left:500px;; width:70px; Margin-left:500px; 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 advice people can provide really would be much appreciated
Sorry I haven't been more help, but it's a bit hard to know how to help without knowing the history of what you are doing. Is the cxxvi site based on the same theme or whatever from Shopify? What did you start out with, and what have you done to change your site? I can't even tell if this is a CSS issue or a JS issue, but perhaps this should be moved to the JS forum, as your first concern is really functionality, it seems to me, which is more of a JS issue. What do you think?
Hey Ralph,
Thanks for all your help, I completely appreciate it's hard when you don't know the background.
The CXXVI website is also built on Shopify and their theme certainly looks similar to the one I started out with (that's not to say it's exactly the same though). The javascript for the sliding panel was implemented by me and was not there beforehand. The CSS for the basket was there but only as a href link through to the cart page rather than as button to generate the drop down.
I think the issue is CSS based as the javascript is doing everything is should be, it's just the button is moving around the page when there are items or no items in the basket.
I would be happy for this to be moved to the javascript forum if you feel it is more relevant
O, right, I see; I didn't realize the JS was working. I'll have to look more closely at the CSS then. The first think I notice is that the HTML isn't too good, so that needs a bit of work. On first glance, I see a div inside an <a>, for example, which isn't good.
EDIT: I'll move this to the CSS forum, too, where it will get more CSS attention!
Thanks for moving it to the CSS forum Ralph.
I took the idea of the div inside the <a> from the CXXVI website's layout but if there is a better way of working the CSS then I would definitely be keen to implement it?